Scrollmagic: desain web yang menyenangkan

Dalam desain web tren seperti gaya yang telah diadopsi untuk realisasi situs yang sangat diterima oleh pengguna, biasanya dalam periode sementara. Bagian dari tren sejauh ini pada tahun 2016 dan, tampaknya, akan terus mengatur nada pada tahun 2017, adalah animasi dan bagian panjang dengan banyak gulir.

Bukan rahasia bahwa gaya ini cukup menarik dan menyenangkan bagi pengguna, dengan animasi kita dapat membuat navigasi situs menjadi intuitif dan menghibur selama mereka digunakan dengan baik. Untuk alasan ini, kami telah membuat tutorial untuk menyertakan gulungan animasi di situs web Anda, menggunakan plugin jQuery ScrollMagic.

ScrollMagic: Desain Web Menyenangkan

ScrollMagic adalah pustaka yang dibuat dalam javascript untuk mencapai interaksi saat memindahkan situs web. Ini adalah penulisan ulang lengkap Superscrollorama pendahulunya dan arsitekturnya didasarkan pada plugin yang menawarkan kustomisasi yang mudah dan ekstensibilitas.

Ini sangat ideal jika kita ingin menerapkan beberapa hal berikut:

• Animasi berdasarkan posisi atau perpindahan situs. Picu animasi atau sinkronkan dengan gerakan gulir. Tambahkan efek paralaks tanpa banyak usaha. Buat halaman dengan gulir tanpa batas, menangani pemuatan konten dengan ajax.

Fitur ScrollMagic

• Kinerja yang dioptimalkan, ringan, fleksibel, dan memungkinkan ekstensibilitas. Manajemen acara dan pemrograman berorientasi objek. Mendukung desain web adaptif. Memiliki dukungan untuk gerakan di kedua arah (horizontal dan vertikal). Ia memiliki dukungan untuk pergerakan dalam wadah (div), bahkan lebih dari satu halaman. Ini berfungsi dengan baik untuk browser: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. Dalam repositori GitHub -nya, ia memiliki dokumentasi terperinci dan banyak contoh aplikasi.

Dapatkan ScrollMagic

Ini tersedia untuk mendapatkannya dengan berbagai cara.

1: GitHub

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

2: Bower

bower instal scrollmagic

3: manajer paket simpul

npm pasang scrollmagic

4: CDN

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

Anda juga dapat membaca Cara menyesuaikan desain email di Outlook

Instalasi dan penggunaan

Instalasinya cukup sederhana, kami hanya menyertakan file kernel di file html di mana kami ingin menggunakannya.

;

Untuk digunakan, plugin menyediakan pola desain yang berorientasi pengontrol, yang ditambahkan satu adegan atau lebih. Adegan-adegan ini digunakan untuk menentukan apa yang terjadi dalam wadah ketika mereka pindah ke titik tertentu.

Ini akan menjadi contoh dasar:

// init controller var controller = new ScrollMagic.Controller (); // buat adegan baru ScrollMagic.Scene ({durasi: 100, // adegan harus berlangsung untuk jarak gulir 100px offset: 50 // mulai adegan ini setelah menggulir 50px}).setPin ("# my-sticky- element ") // pin elemen untuk durasi adegan.addTo (controller); // tetapkan adegan ke controller

Contoh yang lebih maju adalah, mencapai beberapa offset, kode sumbernya adalah:

$ (function () {// tunggu dokumen siap // init controller var controller = new ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0, 5, {skala: 3, mudah: Linear.easeNone}); // build scene var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", durasi: 400, offset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // tambahkan indikator (memerlukan plugin).addTo (controller); // init controller horizontal var controller_h = new ScrollMagic.Controller ({vertical: false}); // buat tween horizontal var tween_h = TweenMax.to ("# animate", 0, 5, {rotasi: 360, gampang: Linear.easeNone}); // bangun adegan var scene_h = ScrollMagic.Scene baru ({durasi: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // tambahkan indikator (memerlukan plugin).addTo (controller_h);});

Anda dapat menemukan lebih banyak contoh dengan kode sumbernya di dokumentasi plugin.

KAMI MEREKOMENDASIKAN ANDA untuk melakukan instalasi bersih Windows 10 menggunakan tongkat USB