Как сделать такую анимацию с помощью parallax.js с переходом на другую страницу?

Обсуждения
1

Как реализовать такой эффект с переходом на следующую страницу

Ссылка на пример

2

http://scrollmagic.io/examples/index.html посмотрите примеры этой либы

3

Думаю что проблема в постановке вопроса. parallax.js не для того сделан чтобы делать анимации как по ссылке.

Тебе нужно взять какую-то библиотеку анимации (можно даже самому написать стили через https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions для анимирования и https://developer.mozilla.org/en-US/docs/Web/CSS/transform для описания конечных и начальных состояний элемента при анимации.

И прикрутить изменение урла в браузере https://developer.mozilla.org/en-US/docs/Web/API/History/pushState в конце анимации (или использовать библиотеку для клиентского раутинга).

4

Пока получилось так Ссылка на сайт

<?php get_header(); ?>

  <style type="text/css">
    .object {
      transition: all 2s ease-in-out;
      -webkit-transition: all 2s ease-in-out;
      -moz-transition: all 2s ease-in-out;
      -o-transition: all 2s ease-in-out;
    }
    #contact .move-ne {
      transform: translate(100%, 100%);
    }
    .my_anim {
      background-color: #fff;
    }
    #header {
      z-index: 0;
    }
  </style>
    <header id="header" class="header" style="position: absolute;">

    </header>
<div class="my_anim">

/// Контент страницы contact 

</div>
  
    <script>
    function animater() {
      $('.contact-navigation_img').on('click', function () {
        $('#header').load('<?php echo get_home_url(); ?> #header', function() {
           /// can add another function here

          $('.my_anim').toggleClass('object');
          $('.my_anim').toggleClass('move-ne');
          $('#header').on('mousemove', function(event){
            rotate(event);
          });
          $('#header').on('onmouseout', function(event){
            stopRotate(event);
          });
        });
      });
    }
    if (animater()) {

    }
  </script>
...
  <?php get_footer(); ?>

Как заменить контент на новый и как поменять ссылку на ту что надо?
Анимация по нажатию стрелочки (верхний левый угол ), переходить должно на главную

5

У тебя страницы организованы так что каждая отдельная рендерится на сервере. Чтобы сделать эффект навигации между ними с таким перелистыванием удобнее иметь single page application подход когда с помощью client-side routing переключаешься между страницами.

Как заменить контент на новый

Но и в этом случае что у тебя можно попробовать что-то сделать. Например ajax-сом забирать html-ку следующей странице выкусывать часть ее, и полностью подменять содержимое “body” при навигации на следующую страницу. Для этого нужно быть аккуратным с тем что именно содержится в body (избегать скриптов, например, чтобы они не инициализировались где не надо).

как поменять ссылку на ту что надо?

Ты про адрес в браузере? Можно на клик (не дожидаясь конца анимации) сразу ставить новый урл с помощью History: pushState() method - Web APIs | MDN