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ük bir hacme sahipse ve esasen farklı bloklara bölünmüşse, ziyaretçinin kaydırmayı kullanmadan hemen sayfanın istenen bölümüne gidebilmesi için bunu yapabilirsiniz.
Bu bağlantı bağlantıları genellikle sayfalarda kullanılır SSS.. Bu tür sayfalarda, sıkça sorulan soruların yanıtlarını içeren birçok farklı öğe bulunmaktadır. Metni manuel olarak kaydırmamak için, bu sorular istenen paragrafa bağlantılar ile başlangıca yerleştirilir. Aynı sıklıkta, bu tür bağlantı bağlantıları, açılış sayfalarında (açılış sayfaları) kullanılır. 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 bir div bloğudur. Temel olarak, basit bir geçiş için, bu kadar. 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 görevlerim için harika bir çözüm olan bu komut dosyasına rastladım.
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. 🙂
Selamlar sevgili arkadaşlar. Fark etmiş olabileceğiniz gibi, hemen hemen tüm tarayıcılarda sitelerde gezinmek çok keskin ve güzel değil. Ve elbette sitem için kaydırmayı daha yumuşak hale getirmek istiyorum, elbette bu yapılabilir ve ayrıca çok fazla zorlamamak. Bu, basit bir jQuery eklentisi ve birkaç CSS kuralı ile yapılır. Ve hepsinin nasıl çalıştığını görmek için aşağıdaki demoya bir göz atmanızı öneririm.
Ι
Şimdi sitemize düzgün kaydırma eklemeye geçelim.
HTML
İlk önce jQuery kütüphanesini eklememiz gerekecek. Zaten eklediyseniz, bu adımı atlayın:
Ardından, düzgün kaydırmamızdan sorumlu olan jQuery eklentisinin kendisini eklememiz gerekiyor ve bununla birlikte sitede kaydırma çubuğunun kendisini değiştiren ayrı CSS kuralları var. Bir sonraki derste kaydırma çubuğu hakkında daha fazla konuşacağız, ancak şimdilik sadece yumuşak kaydırma. Ve işte kuralların kendisi ve eklenti:
Her şey. Şimdi ilk ve en önemli adımı atmış bulunuyoruz. Şimdi sitemizin CSS stillerine basit bir kural eklememiz gerekiyor.
css
html, gövde( yükseklik: %100; )Bu, eklentimize sayfa genişliğinin esnetildiğini ve %100 uzun olduğunu açıkça belirtmek içindir. Bu kuralı CSS'nize eklediğinizden emin olun, aksi takdirde kaydırma çalışmaz.
Senaryo
Ve şimdi demo örneğini daha ayrıntılı olarak analiz etmeyi öneriyorum. Ve HTML ile başlayacağız.
demoda HTML
İçerik
Gördüğünüz gibi, burada yukarıda tartıştığımız tüm komut dosyaları ve CSS dosyalarıyla birlikte tamamen standart bir HTML5 işaretlemesi kullandım. Bence burada anlatılacak bir şey yok, anlamadığınız bir şey varsa yorumlarda sormayı unutmayın.
Şimdi CSS kurallarına bir göz atalım.
Demodan CSS
@import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,kiril); @import url(http://fonts.googleapis.com/css?family=Istakoz&subset=latin,kiril); gövde( arka plan rengi: #fff; renk: #555; yazı tipi boyutu: 14 piksel; yazı tipi ailesi: "Kötü Komut Dosyası", el yazısı; kenar boşluğu: 0; dolgu: 0; minimum genişlik: 480 piksel; ) html, gövde( yükseklik: %100; ) h2( yazı tipi boyutu: 80 piksel; metin hizalama: merkez; yazı tipi ailesi: "Istakoz", el yazısı; yazı tipi ağırlığı: 700; yazı tipi stili: italik; renk: #444; ) sa( yükseklik: 0; kenarlık: yok; kenarlık-alt: 1 piksel katı #eee; kenar-üst: 1 piksel katı #eee; kenar boşluğu: 50 piksel; clear: her ikisi; ) .cont( yazı tipi boyutu: 30 piksel; kenar boşluğu: 0 otomatik ;üst dolgu: 20px;genişlik: %50;maks.genişlik: %50; ) .text( üst dolgu: 15 piksel; alt dolgu: 20 piksel )CSS kuralları da çok basit ve çok fazla yok ve demonun görsel olarak güzel görünmesi için Google'ın yazı tiplerinin buraya eklendiğini görebilirsiniz.
Tünaydın. Bugün size böyle ilginç bir etkiden bahsetmek istiyorum. ç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 ile sabitlemek için yumuşak 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.
İnşaat ve temizlik işleri için profesyonel ekipman kiralamak için projede yer alan menü örneğini kullanacağım. İşte kaynak kodu:
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.
Sitede istenilen yere gitmek için istenilen bloğun tanımlayıcısına link eklemek yeterlidir. 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:
name="cleaning" niteliğine dikkat edin. Kimlikle eşleşmelidir. İşte betiğin kendisi:
$(function () ( $("a.scrollto").click(function () ( let elementClick = $(this).attr("href") let hedef = $(elementClick).offset().top; $) ("html:not(:animated),body:not(:animated)").animate(( scrollTop: hedef ), 1100); false döndür; )); ));
Benim gibi, birden fazla öğeye kaydırma uygulamanız gerekiyorsa, kimlikleri böyle koyun ve hepsi bu kadar! Çok uygun ve uygulaması kolay bir yol, en iyisi olduğunu iddia etmiyorum ama işe yarıyor. Birisi bunu basitleştirebilir, kısaltabilir veya bir şekilde iyileştirebilirse, size çok minnettar olacağım. Bana gelince, bu etki birçokları için faydalı olabilir.
Lütfen makalenin başında komut dosyasının adını ve yolunu aşağıdaki gibi belirttiğimizi unutmayın:
Yani sitenizin kök dizininde js adında bir klasör oluşturmanız ve içine perehod.js adlı bir dosya yerleştirmeniz gerekiyor. Ve zaten komut dosyası kodunu içine ekleyin. Bu benim, her ihtimale karşı. Aniden biri anlamıyor.
Ve bugünlük, hepsi bu. Artık, sayfanın çapaya yumuşak bir şekilde kaydırılması gibi harika bir efekti nasıl uygulayacağınızı biliyorsunuz. Herkese hoşçakalın!
Not: Yeni makaleler için fikirlere yardımcı olmak için sosyal ağlardaki çağrıya cevap verenlere teşekkürler. Neden özel mesajlara yazmaya karar verdiğini bilmiyorum, yorumlarda daha iyi bırak, bu yüzden daha cesur birinin zaten yaptığını görürlerse diğer insanlar daha kolay yorum yazacak.
Bu yöntemin dezavantajı, makaledeki animasyonu oluşturmak için kullandığımız wow.js ile iyi çalışmamasıdır. Bazı animasyonlar oynamıyor ve yerlerinde boşluk bırakıyor. Bunu nasıl düzelteceğini bilen varsa, lütfen yorumlara veya
Son zamanlarda, siz sayfayı kaydırdıkça oynayan 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 yazımızda Scrollissimo adını verdiğim scroll kontrollü animasyonlar oluşturmak için bir eklentiden bahsedeceğiz. 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, belki de olan her şeyi tam olarak anlamak için, Greensock hakkında Habré'de yayınlanmış makaleleri okumalısınız. Örneğin .
Bu eklentilerin ortak özelliklerinin yanı sıra farklılıkları da bulunmaktadır. Ama özellikle ana şeyi vurgulamak istiyorum - pürüzsüz animasyon. Asılsız görünmemesi için işte size kanıt. ScrollMagic'in ana sayfası da 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 sayfaları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 bir 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.
İyi! 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. Scrollissimo'yu normal eklentilerden ayıran ana özelliğe geldiğimiz yer burasıdır. Üçüncü argüman, maksimum animasyon oynatma hızıdır. Bu hız soyut boyutsuz birimlerle ölçülür ve "gözle" seçilir. “Üçüncü parametreyi belirtmezseniz ne olur?” sorusuna hemen cevap vereceğim. Maksimum hızı belirtmezseniz, olmayacaktır. 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. jsFiddleVardivyTimeline = yeni TimelineLite(); divyTimeline.to($("#Divy"),1000 (genişlik: 300)); divyTimeline.to($("#Divy"), 1000, (yükseklik: 300 )); Scrollissimo.add(divyTimeline, 0, 6);
Çözüm
Scrollissimo ile başarılı bir şekilde kaydırma animasyonları oluşturmak için gereken tek şey bu. Bu konuda, belki de makaleyi bitireceğim. Sonuç olarak, eklentinin aktif olarak geliştirilmekte olduğunu, büyümek ve geliştirmek için yer olduğunu söyleyeceğim. Bu nedenle, her türlü soru, tavsiye ve özellik isteklerine memnuniyetle cevap vereceğim.Makyaj yap, canlandır!
İlgili Makaleler
koli milli parkı finlandiya koli milli parkı finlandiya oraya nasıl gidilir
Angra dos Reis'teki hangi otellerin manzarası güzel?
Sıcaklık kontrollü havya
Sıcaklık kontrollü havya
Havya için sıcaklık kontrolörü