Scrollmagic: веселый веб-дизайн

В веб-дизайне тенденция похожа на стиль, принятый для реализации сайтов, который очень популярен среди пользователей, обычно во временные периоды. Частью тенденций до сих пор в 2016 году и, по-видимому, будут продолжать задавать тон в 2017 году, являются анимации и длинные участки с большим количеством прокрутки.

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

ScrollMagic: забавный веб-дизайн

ScrollMagic - это библиотека, созданная на javascript для обеспечения взаимодействия при перемещении сайтов. Это полное переписывание своего предшественника Superscrollorama, а его архитектура основана на плагинах, которые предлагают простую настройку и расширяемость.

Идеально, если мы хотим реализовать некоторые из следующих вещей:

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

Особенности ScrollMagic

Оптимизированная производительность, легкость, гибкость и расширяемость. Управление событиями и объектно-ориентированное программирование. Поддержка адаптивного веб- дизайна. Поддержка движений в обоих направлениях (горизонтальном и вертикальном). Поддержка движений внутри контейнеров (div). Даже на нескольких страницах. Идеально подходит для браузеров: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+.

Получить ScrollMagic

Получить его можно разными способами.

1: GitHub

git clone git: //github.com/janpaepke/ScrollMagic.git

2: Бауэр

беседка установить scrollmagic

3: менеджер пакетов узлов

npm установить scrollmagic

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

Вы также можете прочитать Как настроить дизайн электронной почты в Outlook

Установка и использование

Установка довольно проста, мы включаем файл ядра только в HTML-файлы, где мы хотим его использовать.

;

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

Это был бы основной пример:

// init controller var controller = new ScrollMagic.Controller (); // создаем новую сцену ScrollMagic.Scene ({duration: 100, // сцена должна длиться на расстоянии прокрутки 100px offset: 50 // начать эту сцену после прокрутки на 50px}).setPin ("# my-sticky- element ") // прикрепляет элемент к продолжительности сцены.addTo (controller); // назначаем сцену контроллеру

Более продвинутый пример - достижение нескольких смещений, его исходный код:

$ (function () {// ожидание готовности документа // контроллер init var controller = new ScrollMagic.Controller (); // создание анимации движения tw tween = TweenMax.to ("# animate", 0, 5, {scale: 3, easy): Linear.easeNone}); // сборка сцены var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", длительность: 400, смещение: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // добавляем индикаторы (требуется плагин).addTo (controller); // контроллер init горизонтальный var controller_h = новый ScrollMagic.Controller ({vertical: false}); // строим анимацию горизонтального var tween_h = TweenMax.to ("# animate", 0.5, {вращение: 360, ease: Linear.easeNone}); // создание сцены var scene_h = new ScrollMagic.Scene ({duration: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // добавить индикаторы (требуется плагин).addTo (controller_h);});

Вы можете найти много других примеров с их исходным кодом в документации к плагину.

МЫ РЕКОМЕНДУЕМ ВАМ сделать чистую установку Windows 10 с помощью флешки