Scrollmagic: eğlenceli web tasarımı

Web tasarımında bir eğilim, genellikle geçici dönemlerde kullanıcılar tarafından güçlü bir şekilde kabul edilen sitelerin gerçekleştirilmesi için benimsenen stile benzer. 2016'da şu ana kadar trendlerin bir kısmı ve görünüşe göre, 2017'de tonu ayarlamaya devam edecek, çok fazla kaydırma içeren animasyonlar ve uzun bölümler.

Bu stilin kullanıcı için oldukça çekici ve eğlenceli olduğu bir sır değil, animasyonlar ile iyi kullanıldıkları sürece sitede gezinmeyi sezgisel ve eğlenceli hale getirebiliriz. Bu nedenle, jQuery ScrollMagic eklentisini kullanarak web sitenize animasyonlu kaydırmalar eklemek için bir eğitici hazırladık.

ScrollMagic: Eğlenceli Web Tasarımı

ScrollMagic, web sitelerini taşırken etkileşimi sağlamak için javascript'te yapılmış bir kütüphanedir. Selefi Superscrollorama'nın tamamen yeniden yazılmasıdır ve mimarisi, kolay özelleştirme ve genişletilebilirlik sunan eklentilere dayanmaktadır.

Aşağıdakilerden bazılarını uygulamak istersek idealdir:

• Sitenin konumuna veya yer değiştirmesine göre animasyon Animasyonu tetikleyin veya kaydırmanın hareketi ile senkronize edin Çok fazla çaba harcamadan paralaks efekti ekleyin.Ajax ile içerik yüklemeyi yöneterek sonsuz kaydırma ile bir sayfa oluşturun.

ScrollMagic Özellikleri

• Optimize edilmiş performans, hafif, esnek ve genişletilebilirlik sağlar Etkinlik yönetimi ve nesne yönelimli programlama, uyarlanabilir web tasarımını destekler, her iki yönde (yatay ve dikey) hareketler için desteği vardır (konteynerler (div)) Tarayıcılar için mükemmel çalışır: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. GitHub deposunda ayrıntılı belgeler ve birçok uygulama örneği vardır.

ScrollMagic'i edinin

Çeşitli şekillerde elde edilebilir.

1: GitHub

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

2: Bower

bower scrollmagic yükleyin

3: düğüm paket yöneticisi

npm scrollmagic'i yükle

4: CDN

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

Outlook'ta bir e-postanın tasarımını özelleştirme konusunu da okuyabilirsiniz.

Kurulum ve kullanım

Kurulum oldukça basit, sadece kullanmak istediğimiz html dosyalarına çekirdek dosyasını dahil ediyoruz.

;

Kullanım için eklenti, bir veya daha fazla sahnenin eklendiği denetleyiciye yönelik bir tasarım deseni sağlar. Bu sahneler, belirli bir noktaya taşındıklarında kaplarda ne olacağını tanımlamak için kullanılır.

Bu temel bir örnek olacaktır:

// init denetleyici var denetleyici = yeni ScrollMagic.Controller (); // bir sahne oluşturun yeni ScrollMagic.Scene ({duration: 100, // sahne 100 piksel kaydırma mesafesi için sürmelidir: 50 // 50 piksel kaydırdıktan sonra bu sahneyi başlatın}).setPin ("# my-sticky- element ") //, sahnenin süresi için elemanı sabitler.addTo (denetleyici); // sahneyi denetleyiciye atayın

Daha gelişmiş bir örnek, birden fazla ofset elde etmek, kaynak kodu şöyle olacaktır:

$ (function () {// belgenin hazır olmasını bekleyin // init controller var controller = new ScrollMagic.Controller (); // build tween var tween = TweenMax.to ("# animate", 0.5, {scale: 3, ease: Linear.easeNone}); // build scene var scene = yeni ScrollMagic.Scene ({triggerElement: "#multiDirect", süre: 400, ofset: 250}).setTween (ara arası).setPin ("# animate"). addIndicators ({name: "resize"}) // göstergeler ekle (eklenti gerektirir).addTo (denetleyici); // init denetleyicisi yatay var controller_h = new ScrollMagic.Controller ({vertical: false}); // ara yatay var tween_h = TweenMax.to ("# animasyon", 0.5, {döndürme: 360, kolaylığı: Linear.easeNone}); // build scene var scene_h = new ScrollMagic.Scene ({duration: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // göstergeler ekleyin (eklenti gerektirir).addTo (controller_h);});

Eklenti belgelerinde kaynak kodlarıyla daha birçok örnek bulabilirsiniz.

USB stick kullanarak temiz bir Windows 10 kurulumu nasıl yapılır?