Yavaş sayfa kaydırma için komut dosyası. Düzgün kaydırma (pürüzsüz kaydırma) açılış sayfası

AT son zamanlar Sayfa kaydırılırken oynatılan animasyonlar giderek daha fazla popülerlik kazanıyor. Ancak, tarayıcıların büyük çoğunluğunun bu tür animasyonlar için tasarlanmadığını fark ettim. Sayfaları fare ile kaydırmak sorunsuz bir şekilde (Firefox'ta olduğu gibi) değil, adım adım gerçekleşir. Sonuç olarak, sayfalardaki kaydırma animasyonları da gerizekalı oynuyor. Bence buradaki sorun hiç de tarayıcılarda değil, bu animasyonları oluşturmak için kullanılan eklentilerde. Çünkü atlayışları yapan onlar. Herhangi bir animasyon için, animasyonun düzgün olacağı bir maksimum oynatma hızı olması gerektiğine ve kullanıcının sayfada ne olduğunu anlayabileceğine inanıyorum. Benimle aynı fikirdeyseniz, kedinin altında sorunsuz ve gerizekalı olmadan hareket edin.

Bu makalede Biz konuşacağız Scrollissimo adını verdiğim kaydırma kontrollü animasyonlar oluşturmak için bir eklenti hakkında. En yakın analogu ScrollMagic eklentisidir. Sahip oldukları ortak özelliklerden - amaçları ve animasyon motoru olarak Greensock'un seçilmesi. Herhangi bir nedenle ona hala aşina değilseniz, o zaman belki tam anlayış Tüm olup bitenler arasında, Habré'de halihazırda yayınlanmış olan Greensock hakkındaki makaleleri okumalısınız. Örneğin .

Bu eklentilerin ortak özelliklerinin yanı sıra farklılıkları da bulunmaktadır. Ama özellikle asıl şeyi vurgulamak istiyorum - pürüzsüz animasyon. Asılsız görünmemesi için işte size kanıt. Ana Sayfa ScrollMagic de sözlerimi doğruluyor.

Bu nasıl kullanılır?

bağlanıyoruz

Scrollissimo'yu kullanmaya başlamak için iki şey yapmanız gerekir. İlk önce Greensock'u bağlayın. Yalnızca gerekli minimum kitaplıkları (TweenLite, TimelineLite ve CSS) dahil edebilirsiniz:

veya yukarıdakilerin tümünü içeren bir kitaplık ekleyin:

İkincisi, Scrollissimo'nun kendisini bağlarız. Kütüphane depodan temin edilebilir. Bower kullanıcıları için komutla yükleme seçeneği de vardır.

Bower scrollissimo'yu kurun
İndirildi, şimdi bağlanın:

İsteğe bağlı olarak, kendi rahatınız için jQuery'yi dahil edebilirsiniz (ancak zorunlu olarak değil). Makalenin ilerleyen bölümlerinde, daha fazla okunabilirlik için onu kullanarak kod yazacağım.

Scrollissimo'yu yalnızca tüm sayfayı kaydırırken değil, aynı zamanda başka herhangi bir olayda tetikleme yeteneği sağladım, ancak durumların büyük çoğunluğunda sayfa kaydırma olayına abone olmanız gerekir:

$(pencere).scroll(function()( Scrollissimo.knock(); ));
Şimdi, scroll olayı her gerçekleştiğinde, Scrollissimo mevcut animasyon ilerlemesini hesaplayacak ve oynatacaktır.

NOT: Eklentinin sayfanın kaydırılmasını saymasını istemiyorsanız, scrollTop özelliğinin kendi değerinizi knock() yöntemine iletebilirsiniz.Örneğin, Scrollissimo.knock(1000) eklentiye şunu söyler: sayfayı 1000 piksel kaydırdı.

NOT: Dokunmatik cihazları desteklemek için, kaydırma sırasında sayfanın donmasına karşı savaşan bir scrollissimo.touch.js dokunmatik adaptörü vardır.

Her şey, şimdi doğrudan canlandırabilirsiniz! Scrollissimo, araları (tek animasyonlar) ve zaman çizelgelerini (tek animasyon kuyruğu) canlandırabilir. İkizlerle başlayalım.

En basit animasyon

Divy adında güzel bir kırmızı div'imiz olduğunu varsayalım. Gerçekten büyümek istiyor ama şimdiye kadar sadece 50 piksel genişliğinde ve yüksekliğinde.

#Divy(konum: sabit; üst: 0; sol: 0; yükseklik: 50 piksel; genişlik: 50 piksel; arka plan: kırmızı; )
Sayfanın başından 1000 piksel sonra 300 piksel genişliğinde olacak şekilde yapalım. Bunu yapmak için, önce Greensock ile normal bir animasyon yapıyormuş gibi karşılık gelen arayı yaratırız:

VardivyTween = new TweenLite($("#Divy"), 1000, (genişlik: 300 ));
NOT: Fark ettiğiniz gibi, Greensock'taki standart animasyondan tek fark, animasyonun süresini saniye cinsinden değil piksel cinsinden (bizim durumumuzda 1000) belirtmemizdir.

Harika! Sadece bu ikizi Scrollissimo tarafından yenmesi için kalır:

Scrollissimo.add(divyTween, 0, 6);
Şimdi yavaşlayalım ve bu çizgiyi analiz edelim. İlk argüman, yarattığımız aynı ikiz. İkinci argüman, animasyonun nereden başlayacağıdır. Bizim durumumuzda bu, sayfanın başlangıcıdır (0 piksel). Üçüncü bir argüman var. İşte yaklaşıyoruz ana özellik Scrollissimo'yu normal eklentilerden ayıran . Üçüncü argüman, maksimum animasyon oynatma hızıdır. Bu hız soyut olarak ölçülür boyutsuz birimler ve "gözle" seçildi. “Üçüncü parametreyi belirtmezseniz ne olur?” sorusuna hemen cevap vereceğim. belirtmezsen en yüksek hız, o zaman olmayacak. Bu animasyon, normal eklentilerin oynayacağı şekilde oynayacaktır.

zaman çizelgeleri

Böylece, Divy genişlik olarak büyüdü. Ve boyunun uzamasına nasıl yardımcı olabiliriz? Bu, animasyon zincirlerinin veya Greensock terimleriyle zaman çizelgelerinin bize yardımcı olacağı yerdir. Bunları daha önce animasyon oluşturmak için kullandıysanız, sizin için yeni bir şey yok. Yukarıdaki ikiz ile yaptığımız gibi, zaman çizelgesi ile yapıyoruz. jsFiddle

VardivyTimeline = yeni TimelineLite(); divyTimeline.to($("#Divy"),1000 (genişlik: 300)); divyTimeline.to($("#Divy"), 1000, (yükseklik: 300 )); Scrollissimo.add(divyTimeline, 0, 6);

Çözüm

tüm gereken bu başarılı yaratım Scrollissimo ile kaydırma animasyonları. Bu konuda, belki de makaleyi bitireceğim. Sonuç olarak, eklentinin süreçte olduğunu söyleyeceğim aktif geliştirme Büyümek ve gelişmek için yeri var. Bu nedenle, her türlü soru, tavsiye ve özellik isteklerine memnuniyetle cevap vereceğim.

Makyaj yap, canlandır!

Ve böylece, bir başlangıç ​​​​için çapa bağlantılarının veya yalnızca çapaların ne olduğunu öğrenelim. Bağlantı bağlantıları, ziyaretçiyi sayfadaki belirli yerlere götüren bağlantılardır. Temel olarak, bir yer imi gibidir. Sayfa büyükse ve esasen bölünmüşse farklı bloklar, ziyaretçinin hemen gidebilmesi için yapabilirsiniz istenilen kısım kaydırmadan sayfalar.

Bu bağlantı bağlantıları genellikle sayfalarda kullanılır SSS.. Bu tür sayfalarda, cevapları olan birçok farklı öğe vardır. SSS. Metni manuel olarak kaydırmamak için, bu sorular istenen paragrafa bağlantılar ile başlangıca yerleştirilir. Ayrıca, bu tür bağlantı bağlantıları genellikle açılış sayfalarında kullanılır ( açılış sayfaları). Ayrıca, müşteri isterse açılış sayfalarında bu tür bağlantıları sıklıkla kullanırım. Açılış sayfaları genellikle uzundur ve bu nedenle bu tür çapalar kötü bir yardımcı değildir.

Bu bağlantıların nasıl çalıştığına dair bir örnek bu sayfada görülebilir:

Bizim durumumuzda, bu basit div bloğu. Esasen, için basit geçiş hepsi bu. Böyle bir bağlantıya tıklandığında, ziyaretçi anında sayfanın çapalı bloğun bulunduğu kısmına aktarılacaktır.

Ankrajlar boyunca düzgün hareket uygulamak için bağlanmanız gerekir - jQuery. Bir keresinde uzun süre doğru senaryoyu aradım ve bir sürü bilgiyi karıştırdım. Yarısından fazlası, artık kitaplıkların yeni sürümlerinde çalışmayan komut dosyalarını gösterir. Belki de bu komut dosyalarını siteme gelmeden önce buldunuz. sonra anladım verilen komut dosyası, bu benim ihtiyaçlarım için harika bir çözümdü.

Başlamak için, kapatmadan önce bir şapkada kafa veya kapatmadan önce bodrumda gövde jQuery kitaplığını eklemeniz gerekir.

Komut dosyalarının bir çatışmasını ve çalışmazlığını kışkırtmamak için bunun daha önce yapılmadığından emin olun.

Şimdi, kütüphaneden sonra, yumuşak geçişi canlandıracak olan betiğin kendisini bağlarız.

Komut dosyasının ikinci satırı, bağlantı bağlantılarına sahip bloğun kimliğini belirtir. Örnek olarak, şöyle bir blok düzenleyebilirsiniz:

Altıncı satır 1500 sayısını içerir - milisaniye cinsinden süre ve 1,5 saniyeye eşittir. Bu, istenen çapaya geçişin yapıldığı zamandır. Animasyonu hızlandırmak veya yavaşlatmak için numarayı değiştirmeniz yeterlidir.

Hepsi bu, ilginiz için teşekkürler. 🙂

Tünaydın. Bugün size bundan bahsetmek istiyorum ilginç etki, nasıl çapa için pürüzsüz kaydırma. Örneğin, sayfanın üst kısmındaki bir menü olabilir, tıklandığında sorunsuz bir şekilde ilgili öğeye kaydırılır.

Elbette diğer açılış sayfalarında da benzer bir etki gördünüz. Bugün nasıl uygulanacağını öğreneceksiniz.

Javascript kullanarak sabitlemek için düzgün kaydırma

Projelerden birinde, sadece görev, menü öğelerinden birine tıklandığında belirli bir öğeye yumuşak kaydırma ile benzer bir efekt uygulamaktı.

Jquery kütüphanesini projemize bağlayarak başlayalım ve düzgün kaydırmadan sorumlu olan betiğin yolunu yazalım:

Onunla ilgilen. Şimdi, kaydırmanın gerçekleşeceği etiketler ve çapalar koymanız gerekiyor.

Kiralama projesinde bulunan menü örneğini kullanacağım profesyonel ekipman inşaat ve temizlik işleri için. İşte burada kaynak:

Gördüğünüz gibi, her şey standart ve hileler olmadan. İnişte daha sonra menüye karşılık gelen bloklar yapıldı. Belirli bir hizmet verdiler. Bu bloklara yumuşak bir geçiş yapmak gerekiyordu.

Geçiş yapmak için Doğru yer sitede, tanımlayıcıya bir bağlantı eklemeniz yeterlidir istenilen blok. Hadi bunu yapalım.

Şimdi "temizleme", "inşa", "eylemler" tanımlayıcılarını ilgili bloklara ayarlamanız gerekir. Benim için şöyle görünüyordu: