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

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

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

ScrollMagic: Веселий веб-дизайн

ScrollMagic - це бібліотека, створена в JavaScript для досягнення взаємодії під час переміщення веб-сайтів. Це повне перезапис попередника Superscrollorama, а його архітектура базується на плагінах, які пропонують просте налаштування та розширення.

Ідеально, якщо ми хочемо реалізувати деякі з наступних речей:

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

Функції ScrollMagic

• Оптимізована продуктивність, вона легка, гнучка і дозволяє розширювати Управління подіями та об'єктно-орієнтоване програмування. Він підтримує адаптивний веб- дизайн, підтримує рухи в обох напрямках (горизонтальний і вертикальний), підтримує рухи в контейнерах (div), навіть кілька на одній сторінці. Він ідеально підходить для браузерів: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. У своєму сховищі GitHub є детальна документація та багато прикладів застосувань.

Отримайте ScrollMagic

Отримати його можна різними способами.

1: GitHub

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

2: Бауер

bower встановити scrollmagic

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

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

4: CDN

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

Ви також можете прочитати Як налаштувати дизайн електронної пошти в Outlook

Установка та використання

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

;

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

Це був би базовий приклад:

// init контролер var controller = новий ScrollMagic.Controller (); // створити сцену нового ScrollMagic.Scene ({тривалість: 100, // сцена повинна тривати відстань прокрутки 100 зсуву: 50 // запустити цю сцену після прокрутки на 50px}).setPin ("# my-sticky- елемент ") // прив'язує елемент до тривалості сцени.addTo (контролер); // призначити сцену контролеру

Більш просунутим прикладом може бути досягнення кількох компенсацій, його вихідний код буде:

$ (function () {// дочекатися готовності документа // init controller var controller = new ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0, 5, {шкала: 3, простота: Linear.easeNone}); // побудувати сцена сцени var = new ScrollMagic.Scene ({тригерElement: "#multiDirect", тривалість: 400, зміщення: 250}).setTween (tween).setPin ("# anime"). addIndicators ({ім'я: "змінити розмір"}) // додати індикатори (потрібен плагін).addTo (контролер); // init контролер горизонтальний var controller_h = новий ScrollMagic.Controller ({вертикальний: false}); // побудувати між горизонтальним var tween_h = TweenMax.to ("# анімація", 0, 5, {обертання: 360, легкість: Linear.easeNone}); // побудова сцени var scene_h = new ScrollMagic.Scene ({тривалість: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({ім'я: "повернути"}) // додати індикатори (потрібен плагін).addTo (controller_h);});

Ви можете знайти ще багато прикладів з їх вихідним кодом у документації на плагіни.

РЕКОМЕНДУЄМО ВАС Як зробити чисту інсталяцію Windows 10 за допомогою USB-накопичувача