Scrollmagic: fajne projektowanie stron internetowych

W projektowaniu stron internetowych trend jest podobny do stylu, który został przyjęty w celu realizacji witryn, który jest silnie akceptowany przez użytkowników, zwykle w okresach przejściowych. Częścią dotychczasowych trendów w 2016 r. I, jak się wydaje, nadal będą nadawać ton w 2017 r., Są animacje i długie sekcje z dużą ilością przewijania.

Nie jest tajemnicą, że ten styl jest dość atrakcyjny i zabawny dla użytkownika, dzięki animacjom możemy sprawić, aby poruszanie się po stronie było intuicyjne i zabawne, o ile są dobrze używane. Z tego powodu stworzyliśmy samouczek zawierający animowane zwoje w Twojej witrynie przy użyciu wtyczki jQuery ScrollMagic.

ScrollMagic: Zabawne projektowanie stron internetowych

ScrollMagic to biblioteka wykonana w javascript, która umożliwia interakcję podczas przenoszenia stron internetowych. Jest to kompletne przepisanie swojego poprzednika Superscrollorama, a jego architektura oparta jest na wtyczkach, które oferują łatwą personalizację i rozszerzalność.

Jest to idealne rozwiązanie, jeśli chcemy wdrożyć niektóre z następujących rzeczy:

• Animacja oparta na pozycji lub przemieszczeniu strony. Uruchom animację lub zsynchronizuj ją z ruchem przewijania. Dodaj efekt paralaksy bez większego wysiłku. Utwórz stronę z nieskończonym przewijaniem, obsługując ładowanie zawartości za pomocą ajax.

Funkcje ScrollMagic

• Zoptymalizowana wydajność, jest lekka, elastyczna i umożliwia rozszerzalność. Zarządzanie zdarzeniami i programowanie obiektowe. Wspiera adaptacyjne projektowanie stron internetowych. Obsługuje ruchy w obu kierunkach (poziomy i pionowy). Obsługuje ruchy w kontenerach (dział), nawet wiele na jednej stronie. Działa idealnie w przeglądarkach: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. W repozytorium GitHub zawiera szczegółową dokumentację i wiele przykładów aplikacji.

Uzyskaj ScrollMagic

Można go uzyskać na różne sposoby.

1: GitHub

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

2: Altana

altana zainstaluj scrollmagic

3: menedżer pakietów węzłów

npm zainstaluj scrollmagic

4: CDN

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

Możesz także przeczytać Jak dostosować projekt wiadomości e-mail w programie Outlook

Instalacja i użytkowanie

Instalacja jest dość prosta, plik jądra umieszczamy tylko w plikach HTML, w których chcemy go użyć.

;

Do użytku wtyczka zapewnia wzorzec projektowy zorientowany na kontroler, do którego dodawana jest jedna lub więcej scen. Sceny te służą do zdefiniowania, co dzieje się w kontenerach, gdy przechodzą do określonego punktu.

To byłby podstawowy przykład:

// kontroler init var controller = new ScrollMagic.Controller (); // stwórz nową scenę ScrollMagic.Scene ({czas trwania: 100, // scena powinna trwać do przewinięcia o przesunięcie 100px: 50 // rozpocząć tę scenę po przewinięciu do 50px}).setPin ("# my-sticky- element ") // przypina element na czas trwania sceny.addTo (kontroler); // przypisz scenę do kontrolera

Bardziej zaawansowanym przykładem byłoby osiągnięcie wielu przesunięć, kod źródłowy to:

$ (function () {// czekaj na gotowy dokument // kontroler init var kontroler = nowy ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animacja", 0, 5, {skala: 3, łatwość: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", czas trwania: 400, offset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // dodaj wskaźniki (wymaga wtyczki).addTo (kontroler); // init kontroler poziomy var kontroler_h = nowy ScrollMagic.Controller ({vertical: false}); // buduj tween poziomy var tween_h = TweenMax.to ("# animacja", 0, 5, {obrót: 360, łatwość: Linear.easeNone}); // buduj scenę var scene_h = nowy ScrollMagic.Scene ({czas trwania: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // dodaj wskaźniki (wymaga wtyczki).addTo (controller_h);});

Więcej przykładów z kodem źródłowym można znaleźć w dokumentacji wtyczki.

ZALECAMYJak wykonać czystą instalację systemu Windows 10 za pomocą pamięci USB