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

bower инсталирате scrollmagic

3: мениджър на пакети на възел

npm инсталирайте scrollmagic

4: CDN

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

Можете също да прочетете Как да персонализирате дизайна на имейл в Outlook

Инсталиране и използване

Инсталацията е доста проста, ние включваме само файла на ядрото в html файловете, където искаме да го използваме.

;

За употреба, плъгинът осигурява дизайн, ориентиран към контролера, към който се добавят една или повече сцени. Тези сцени се използват за определяне на това, което се случва в контейнерите, когато се преместят в определена точка.

Това ще бъде основен пример:

// init контролер var controller = new ScrollMagic.Controller (); // създайте сцена нова ScrollMagic.Scene ({продължителност: 100, // сцената трябва да продължи с разстояние на превъртане от 100px офсет: 50 // стартирайте тази сцена след превъртане за 50px}).setPin ("# my-sticky- елемент ") // фиксира елемента за продължителността на сцената.addTo (контролер); // назначи сцената на контролера

По-напреднал пример е постигането на множество компенсации, неговият изходен код ще бъде:

$ (function () {// изчакване за готовност на документа // init controller var controller = new ScrollMagic.Controller (); // изграждане на t između var tween = TweenMax.to ("# анимация", 0, 5, {мащаб: 3, лекота: Linear.easeNone}); // изграждане на сцена сцена var = нов ScrollMagic.Scene ({спусъкElement: "#multiDirect", продължителност: 400, офсет: 250}).setTween (tween).setPin ("# анимация"). addIndicators ({name: "resize"}) // добавяне на индикатори (изисква плъгин).addTo (контролер); // init контролер хоризонтален var controller_h = нов ScrollMagic.Controller ({вертикално: невярно}); // изграждане между хоризонтална var tween_h = TweenMax.to ("# анимация", 0, 5, {въртене: 360, лекота: Linear.easeNone}); // изграждане на сцена var scene_h = new ScrollMagic.Scene ({продължителност: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // добавяне на индикатори (изисква плъгин).addTo (controller_h);});

Можете да намерите още много примери с техния изходен код в документацията за плъгините.

ПРЕПОРЪЧВАМЕ ВИ КАК да направите чиста инсталация на Windows 10 с помощта на USB флашка