Сегодня мы бы хотели поговорить о стилизационном эффекте для вашего сайта, а именно о том, как создать плавные переходы между страницами сайта, а также слайдами при помощи анимации и немного магии от javascript. По умолчанию у нас будет два блока на странице, при прокрутке страницы блоки будут плавно замещать друг друга создавая красивый эффект перехода между страницами. Выглядит очень красиво, а интересный подход к анимации в виде чернил и дыма придает загадочности в элегантности, такой эффект не останется вне поля зрения.

 

Много красивых бесплатных шаблонов и не только, вы сможете найти на сайте наших партнеров, есть русские шаблоны и поддержка которая сделает все за вас.

 

Шаг 1. HTML

Разметка у нас служит для демонстрации по этому она минимальная, также не забывайте, что вам необходимо подключить все скрипты к документу:

Это вся разметка которая служит для отображения перехода между слайдами страницы, двигаемся дальше.

Шаг 2. CSS

У нас будут два изображения, именно на них мы хотим показать эффект перехода между страницами, мы подключаем изображения через классы:

Шаг 3. JS

Вся магия будет осуществляться при помощи JavaScript’a, нам нужно отображать маску между слайдами и анимировать ее в процессе скроллинга страницы:

Вот такая замечательная анимация у нас получилась, на лендинге это очень удобно, ведь между переходами на странице можно украсить красивым эффектом. Спасибо Fabio Ottaviani за отличную работу.

Вот и все. Готово!