Çapa bağlantısına hamar keçid. Javascript solması - hamar rəng dəyişikliyi

Saytlardan birində hamar animasiya ilə səhifənin yuxarıya sürüşdürülməsini həyata keçirmək lazım idi. JQuery-də bu bir əmrlə edilir:

$("html,body").animate((scrollTop:0),500);

Ancaq təmiz JavaScript-də bu bir az daha mürəkkəbdir:

var t;
funksiyası scrolltop() (
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
əgər(üst>0) (
window.scrollTo(0,Math.floor(top/1.5));
t = setTimeout("scrolltop()",30);
) başqa (
clearTimeout(t);
}
yalanı qaytarmaq;
}

Dəyişən üst piksellə cari səhifə sürüşdürmə məsafəsinə bərabərdir. Hər 30 ms-də bu dəyər 1,5 dəfə azalır və nəticədə rəvan sıfıra çatır. Bu, CSS animasiyalarındakı asanlaşdırma xüsusiyyətinin təqlididir.

Səhifəni sürətləndirmədən xətti olaraq yuxarı sürüşdürmək lazımdırsa, belə bir şey yazın:

window.scrollTo(0,-20);

Sonra səhifə 30 ms-də 20 piksel sürətlə yuxarıya doğru sürüşəcək.

30 ms müddətinə nə səbəb olur? Rahat ekran yeniləmə sürəti saniyədə təxminən 30 kadrdır, yəni hər kadrın müddəti 30 ms-dir. İdeal hamarlıq üçün saniyədə 60 kadr edə bilərsiniz və sonra fasilələr təxminən 15 ms olmalıdır. Ancaq bu, zəif cihazlarda gecikə bilər.

Saytın müəllifinə təşəkkür edirik

Layihəni dəstəkləmək istəyirsinizsə, Yandex.Money platformasından istifadə edin - bu, məxfi və təhlükəsizdir.

Günortanız xeyir. Bu gün sizə bu haqda danışmaq istəyirəm maraqlı effekt, Necə hamar sürüşmə lövbərə. Məsələn, bu, səhifənin yuxarısındakı menyu ola bilər ki, kliklədikdə müvafiq elementə rəvan keçəcək.

Yəqin ki, digər açılış səhifələrində də oxşar təsiri görmüsünüz. Bu gün siz bunu necə həyata keçirəcəyinizi öyrənəcəksiniz.

Javascript istifadə edərək lövbərə hamar sürüşmə

Layihələrdən birində vəzifə menyu elementlərindən birini kliklədikdə müəyyən bir elementə hamar sürüşmə ilə oxşar effekti həyata keçirmək idi.

Qoşulmaqla başlayaq jquery kitabxanası layihəmizə daxil olun və hamar sürüşmə üçün cavabdeh olan skriptin yolunu yazın:

Biz bununla məşğul olduq. İndi sürüşmənin baş verəcəyi etiketlər və lövbərlər qoymalısınız.

Tikinti və təmizlik işləri üçün peşəkar avadanlıqların icarəsi layihəsində olan menyu nümunəsini sizə izah edəcəyəm. Budur mənbə kodu:

Təmizləmə avadanlığı
Tikinti avadanlığı
Səhm

Gördüyünüz kimi, hər şey standart və hiyləsizdir. Sonradan açılış səhifəsində menyuya uyğun bloklar yaradıldı. Onlar konkret bir xidmət ortaya qoydular. Bu bloklara rəvan keçid etmək lazım idi.

Saytda istədiyiniz yerə getmək üçün identifikatora bir keçid əlavə etmək kifayətdir istədiyiniz blok. Gəlin bunu edək.

Təmizləmə avadanlığı
Tikinti avadanlığı
Səhm

İndi "təmizləmə", "tikinti", "hərəkətlər" identifikatorlarını müvafiq bloklara təyin etməlisiniz. Mənim üçün bu belə görünürdü:

name="təmizləmə" atributuna diqqət yetirin. O, ID-yə uyğun olmalıdır. Budur skriptin özü:

$(funksiya () ( $("a.scrollto").klik(funksiya () ( qoy elementClick = $(bu).attr("href") təyinat = $(elementClick).offset().top; $ ("html:not(:animated),body:not(:animated)").animate(( scrollTop: təyinat ), 1100 ));

Əgər siz də mənim kimi bir neçə elementə sürüşməyi həyata keçirməlisinizsə, onda sadəcə identifikatorlar qoyun, oxşar şəkildə və budur! Çox rahat yol və həyata keçirmək asandır, bunun ən yaxşı olduğunu demirəm, amma işləyir. Kimsə bunu sadələşdirə, qısaltsa və ya bir şəkildə təkmilləşdirə bilsə, sizə çox minnətdar olaram. Mənə gəlincə, bu təsir çoxlarına faydalı ola bilər.

Nəzərə alın ki, məqalənin əvvəlində skriptin adını və yolunu aşağıdakı kimi göstərdik:

Yəni saytınızın kökündə js adlı qovluq yaratmalı və ora perehod.js adlı fayl yerləşdirməlisiniz. Və sonra skript kodunun özünü daxil edin. Hər halda bu mənəm. Bəs kimsə başa düşmürsə?

Və bu gün üçün hamısıdır. İndi siz ankerə hamar səhifə sürüşdürmək kimi gözəl effekti necə həyata keçirəcəyinizi bilirsiniz. Hamıya salam!

P.s.: Zəngə cavab verənlərə təşəkkürlər sosial şəbəkələr yeni məqalələr üçün fikirlərlə kömək edin. Niyə yazmağa qərar verdiyinizi bilmirəm şəxsi mesajlar, şərhlərdə buraxmaq daha yaxşıdır, buna görə də daha cəsarətli birinin bunu etdiyini görsələr, digər insanlar üçün rəy yazmaq daha asan olacaq.

U bu üsul bir çatışmazlıq var, məqalədə animasiya yaratmaq üçün istifadə etdiyimiz wow.js ilə yaxşı işləmir. Bəzi animasiyalar oynamır və onların yerində boş yer var. Bunu necə düzəltməyi bilən varsa, şərhlərdə və ya yazın

Document.querySelector("nav").addEventListener("klik", funksiya (e) ( var dest = e.target.href if (!dest || !(dest = dest.split("#"))) qaytarmaq e .preventDefault() var p = document.querySelector("main") var a = document.getElementById(dest) var st = p.scrollTop var d = a.getBoundingClientRect().top - p.getBoundingClientRect().top - 8 var s = d / 1000 var pt = performance.now() requestAnimationFrame(f(t) funksiyası console.log((p.scrollTop = st + d * (t - pt) / 1000), (st + d)) var cur = p.scrollTop = st + s * (t - pt) əgər (s st + d: cur< st + d) requestAnimationFrame(f) else requestAnimationFrame(() =>p.scrollTop = st + d) ))) ));

* ( qutu ölçüsü: sərhəd qutusu; ) nav ( mövqe: yapışqan; en: 1.25em; float: sol; kənar: 8px; ) a (ekran: blok; xəttin hündürlüyü: 1.25em; mətni hizalayın: mərkəz; ) a:hover ( fon: gümüş; ) html, gövdə, əsas ( hündürlük: 100%; kənar: 0; ) əsas ( daşqın: avtomatik; ) h1 ( kənar: 16px 0; fon: antik ağ; ) 1 2 3 4 5 6 7 8 9 10 1 2 Saf JS-də lövbərlər arasında hamar sürüşmə varmı? Maraqlıdır, bunun üçün bir ssenari varmı? hamar sürüşmə təmiz JS-də saytı onsuz qururam

jQuery istifadə edərək

Saf JS-də lövbərlər arasında hamar sürüşmə varmı? Saf JS-də hamar sürüşmə üçün bir skript olub-olmadığını düşünürəm, jQuery istifadə etmədən veb sayt düzəldirəm IN son vaxtlar

Səhifəni sürüşdürdükcə oynayan animasiyalar getdikcə populyarlaşır. Ancaq gördüm ki, brauzerlərin böyük əksəriyyəti bu cür animasiyalar üçün nəzərdə tutulmayıb. Siçan ilə səhifələrin sürüşməsi rəvan (Firefox-da olduğu kimi) deyil, addımlarla baş verir. Nəticədə, səhifələrdə sürüşmə animasiyaları da sürətlə oynayır. Məncə, burada problem ümumiyyətlə brauzerlərdə deyil, bu animasiyaları yaratmaq üçün istifadə olunan plaginlərdədir. Çünki qəfil sıçrayışlara icazə verənlər onlardır. İnanıram ki, hər hansı bir animasiya üçün animasiya hamar olacaq və istifadəçi səhifədə nə baş verdiyini anlaya biləcək maksimum oynatma sürəti olmalıdır. Əgər mənimlə razılaşırsınızsa, o zaman rəvan və pişiyin altında əyilmədən hərəkət edin. Bu yazıda Scrollissimo adlandırdığım sürüşdürmə ilə idarə olunan animasiyalar yaratmaq üçün bir plagin haqqında danışacağıq. Onun ən yaxın analoqu ScrollMagic plaginidir. Fromümumi xüsusiyyətlər

Ümumi xüsusiyyətlərə əlavə olaraq, bu plaginlərin də fərqləri var. Ancaq əsas şeyi xüsusilə vurğulamaq istərdim - hamar animasiya. Bunun əsassız səslənməməsi üçün sizə dəlil təqdim edirik. Əsas səhifə ScrollMagic də sözlərimi təsdiqləyir.

Onu necə istifadə etməli? Connect Scrollissimo-dan istifadə etməyə başlamaq üçün siz iki şeyi etməlisiniz. Əvvəlcə Greensock-u birləşdirin. Yalnız minimal şəkildə qoşula bilər tələb olunan kitabxanalar(TweenLite, TimelineLite və CSS):

və ya yuxarıda göstərilənlərin hamısını ehtiva edən bir kitabxanaya qoşulun:

İkincisi, biz Scrollissimonun özünü bağlayırıq. Kitabxana anbardan əldə edilə bilər. Bower istifadəçiləri üçün isə komanda ilə quraşdırmaq da mümkündür

Bower scrollissimo quraşdırın
Endirildi, indi qoşulun:

Öz rahatlığınız üçün isteğe bağlı olaraq (lakin mütləq deyil) jQuery əlavə edə bilərsiniz. Məqalənin sonrakı hissəsində daha çox oxunaqlı olmaq üçün ondan istifadə edərək kod yazacağam.

Mən Scrollissimo-nu təkcə bütün səhifəni sürüşdürərkən deyil, həm də hər hansı digər hadisədə işə salmaq imkanını təmin etmişəm, lakin əksər hallarda səhifənin sürüşdürülməsi hadisəsinə abunə olmalısınız:

$(pəncərə).scroll(funksiya())( Scrollissimo.knock(); ));
İndi hər dəfə sürüşdürmə hadisəsi baş verəndə Scrollissimo animasiyanın cari gedişatını hesablayacaq və onu oynadacaq.

QEYD: Əgər siz plaqinin səhifə sürüşdürməsini saymasını istəmirsinizsə, siz scrollTop xassə dəyərinizi knock() metoduna keçirə bilərsiniz. səhifə 1000 piksel.

QEYD: Toxunma cihazlarını dəstəkləmək üçün sürüşmə zamanı səhifənin donması ilə mübarizə aparan scrollissimo.touch.js toxunma adapteri var.

Budur, indi birbaşa animasiya edə bilərsiniz! Scrollissimo əkizləri (tək animasiyalar) və zaman qrafiklərini (tək animasiyaların növbəsi) canlandıra bilər. Əkizlərdən başlayaq.

Ən sadə animasiya Tutaq ki, Divy adlı gözəl qırmızı divimiz var. O, həqiqətən böyümək istəyir, lakin indiyə qədər o, yalnız 50 piksel geniş və yüksəkdir.

#Divy( mövqe: sabit; yuxarı: 0; sol: 0; hündürlük: 50px; en: 50px; fon: qırmızı; )
Gəlin elə edək ki, səhifənin əvvəlindən 1000 pikseldən sonra onun eni 300 piksel olsun. Bunu etmək üçün əvvəlcə Greensock-dan istifadə edərək adi animasiya edirikmiş kimi müvafiq aralıq yaradacağıq:

Var divyTween = new TweenLite($("#Divy"), 1000, (en: 300 ));
QEYD: Qeyd etdiyiniz kimi, standart Greensock animasiyasından yeganə fərq odur ki, biz animasiyanın müddətini saniyələrlə deyil, piksellərlə (bizim vəziyyətimizdə 1000) təyin edirik.

Əla! Qalır ki, bu əkiz Scrollissimo tərəfindən udulsun:

Scrollissimo.add(divyTween, 0, 6);
İndi yavaşlayaq və bu xəttə baxaq. Birinci arqument bizim yaratdığımız eyni arqumentdir. İkinci arqument animasiyanı hansı mövqedən başlamaqdır. Bizim vəziyyətimizdə bu, səhifənin başlanğıcıdır (0 piksel). Üçüncü arqument qalır. Bizim çatdığımız yer budur əsas xüsusiyyət, bu Scrollissimo-nu adi plaginlərdən fərqləndirir. Üçüncü arqument maksimum animasiya oynatma sürətidir. Bu sürət mücərrəd şəkildə ölçülür ölçüsüz vahidlər və “gözlə” seçilir. “Üçüncü parametri göstərməsəniz nə olar?” sualına dərhal cavab verəcəm. Əgər dəqiqləşdirməsəniz maksimum sürət, onda mövcud olmayacaq. Bu animasiya adi plaginlər tərəfindən ifa olunduğu kimi oynanılacaq.

Zaman qrafikləri Beləliklə, Divy genişliyi artdı. Onun boyu böyüməsinə necə kömək edə bilərik? Animasiya zəncirləri və ya Greensock termini ilə desək, zaman qrafikləri burada bizə kömək edəcək. Əgər siz onlardan əvvəl animasiya yaratmaq üçün istifadə etmisinizsə, bu sizin üçün yeni bir şey deyil. Yuxarıdakı əkizlə etdiyimiz kimi, bunu zaman çizelgesi ilə edirik. jsFiddle

Var divyTimeline = yeni TimelineLite(); divyTimeline.to($("#Divy"),1000 (en: 300 )); divyTimeline.to($("#Divy"), 1000, ( hündürlük: 300 )); Scrollissimo.add(divyTimeline, 0, 6);

Nəticə Scrollissimo-dan istifadə edərək fırlanan animasiyaları uğurla yaratmaq üçün sizə lazım olan bütün bunlardır. Yəqin ki, məqaləni burada bitirəcəm. Sonda deyim ki, plugin aktiv inkişaf mərhələsindədir, onun böyüməsi və təkmilləşdirilməsi üçün yer var. Buna görə də, hər hansı bir sual, məsləhət və xüsusiyyət sorğularını almaqdan şad olaram.

Layout, canlandırın!