В двух словах

Анимация реализована на JavaScript, HTML5 и CSS3. В JavaScript прописанано всё поведение эффектов, через HTML я применяю анимацию к нужному мне элементу, а в CSS настраиваю временные промежутки и прозрачность. Рассмотрим подробнее.

JavaScript

В head сайта, помимо фреймворков modernizr и JQ.min, подключён файл functions.js, в котором прописаны параметры анимации: popup — появление, from-left — выезд слева, from-right — выезд справа, from-bottom — выезд снизу, и другие.

Webflow.require('ix').init([
  {"slug":"from-bottom","name":"from bottom","value":{"style":{"x":"0px","y":"200px"},"triggers":[{"type":"scroll","stepsA":[{"transition":"transform 500ms ease 0ms","x":"0px","y":"0px"}],"stepsB":[]}]}},
  {"slug":"popup","name":"popup","value":{"style":{"opacity":0,"scale":0.8},"triggers":[{"type":"scroll","stepsA":[{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","scale":1.1},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","scale":1}],"stepsB":[]}]}},
  {"slug":"popup-2","name":"popup 2","value":{"style":{"opacity":0,"scale":0.8},"triggers":[{"type":"scroll","stepsA":[{"wait":300},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","scale":1.1},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","scale":1}],"stepsB":[]}]}},
  {"slug":"popup-3","name":"popup 3","value":{"style":{"opacity":0,"scale":0.8},"triggers":[{"type":"scroll","stepsA":[{"wait":600},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","scale":1.1},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","scale":1}],"stepsB":[]}]}},
  {"slug":"popup-4","name":"popup 4","value":{"style":{"opacity":0,"scale":0.8},"triggers":[{"type":"scroll","stepsA":[{"wait":900},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","scale":1.1},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","scale":1}],"stepsB":[]}]}},
  {"slug":"nav-top","name":"nav top","value":{"style":{},"triggers":[{"type":"scroll","selector":".nav-bg","stepsA":[{"display":"block"}],"stepsB":[]}]}},
  {"slug":"display-none","name":"display none","value":{"style":{"display":"none"},"triggers":[]}},
  {"slug":"display-nav","name":"display nav","value":{"style":{},"triggers":[{"type":"scroll","selector":".nav-bg","stepsA":[{"opacity":0,"transition":"opacity 500ms ease 0ms","x":"0px","y":"-64px"}],"stepsB":[{"display":"block","opacity":1,"transition":"opacity 500ms ease 0ms","x":"0px","y":"0px"}]}]}},
  {"slug":"from-right","name":"from right","value":{"style":{"opacity":0,"x":"300px","y":"0px"},"triggers":[{"type":"scroll","stepsA":[{"opacity":1,"transition":"transform 1000ms ease 0ms, opacity 500ms ease 0ms","x":"0px","y":"0px"}],"stepsB":[]}]}},
  {"slug":"from-left","name":"from left","value":{"style":{"opacity":0,"x":"-300px","y":"0px"},"triggers":[{"type":"scroll","stepsA":[{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","x":"0px","y":"0px"}],"stepsB":[]}]}},
  {"slug":"from-right-2","name":"from right 2","value":{"style":{"opacity":0,"x":"300px","y":"0px"},"triggers":[{"type":"scroll","stepsA":[{"wait":300},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","x":"0px","y":"0px"}],"stepsB":[]}]}},
  {"slug":"from-left-2","name":"from left 2","value":{"style":{"opacity":0,"x":"-300px","y":"0px"},"triggers":[{"type":"scroll","stepsA":[{"wait":300},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","x":"0px","y":"0px"}],"stepsB":[]}]}},
  {"slug":"info","name":"info","value":{"style":{"x":"0px","y":"87px"},"triggers":[]}},
  {"slug":"popup-5","name":"popup 5","value":{"style":{"opacity":0,"scale":0.8},"triggers":[{"type":"scroll","stepsA":[{"wait":1200},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","scale":1.1},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","scale":1}],"stepsB":[]}]}},
  {"slug":"popup-6","name":"popup 6","value":{"style":{"opacity":0,"scale":0.8},"triggers":[{"type":"scroll","stepsA":[{"wait":1500},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","scale":1.1},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","scale":1}],"stepsB":[]}]}},
  {"slug":"mouse","name":"mouse","value":{"style":{},"triggers":[{"type":"hover","loopA":true,"stepsA":[{"opacity":0,"transition":"transform 1000ms ease 0ms, opacity 1000ms ease 0ms","x":"0px","y":"43px"},{"x":"0px","y":"0px"},{"opacity":1,"transition":"transform 1000ms ease 0ms, opacity 1000ms ease 0ms","x":"0px","y":"0px"},{"wait":1200}],"stepsB":[]}]}}
]);

Код можно скопировать прямо отсюда или скачать файл целиком, нажав на его название. Чтобы реализовать такую анимацию у себя на сайте, необходимо поместить functions.js в файловый каталог своего сайта, а затем подключить его следующим кодом:

<script type="text/javascript" src="путь/к/functions.js"></script>

Необходимо разместить подключение файла между тегами head.

HTML&CSS

Теперь осталось только применить анимацию к нужным элементам. Это можно сделать добавив атрибут data-ix и style к коду. Анимация применима к абсолютно любым блокам и фрагментам. Например, имеется картинка, прописанная следующим кодом:

<img src="pic.jpg">

Добавляем к ней анимацию и получаем:

<img data-ix="popup" style="opacity: 1; transform: scale(1); transition: opacity 500ms, transform 500ms; -webkit-transition: opacity 500ms, transform 500ms;" src="pic.jpg">

Как видно из обоих примеров, код анимации составляет данный фрагмент:

data-ix="popup" style="opacity: 1; transform: scale(1); transition: opacity 500ms, transform 500ms; -webkit-transition: opacity 500ms, transform 500ms;"

где popup название анимации, которую можно изменить на один из вариантов: from-left, from-right, from-bottom и другие.