jQuery-də hamar "Back to Top" düyməsi. Səhifənin yuxarısına animasiyalı keçid Səhifənin yuxarısına necə keçmək olar
Sayt üçün “yuxarı” düyməsi kimi funksiya internet resursunu ziyarətçiləri üçün daha rahat edir. Səhifənin istənilən yerindən səhifənin yuxarısına asanlıqla keçməyə kömək edir. Bu, uzun müddət aşağı sürüşməyi tələb edən böyük məqalələri olan onlayn mağazalar və saytlar üçün zəruridir.
Bu niyə lazımdır?Hazırda əksər saytlarda “yuxarı” düyməsi kimi funksiya yoxdur və bununla bağlı kritik heç nə yoxdur. Lakin onun istifadəsi həm internet resursu, həm də onun ziyarətçiləri üçün bir çox üstünlüklər gətirə bilər.
Ziyarətçilər üçün üstünlüklərBu, tez-tez İnternet resursunun səhifəsi məlumatla çox yükləndikdə, məlumat məqaləsi çox yer tutduqda və siçan təkərindən istifadə edərək səhifəni aşağı sürüşdürməli olduqda baş verir. Bundan əlavə, məqalənin sonunda bu barədə çoxlu şərhlər ola bilər.
Ziyarətçi məqaləni oxuyanda səhifəni aşağı sürüşdürməkdə yorucu bir şey yoxdur, ancaq mətn sona çatdıqda və yuxarı qalxmaq lazım olduqda, bir az yorucu olmağa başlayır. Əksər insanlar sadəcə olaraq uzun müddət sürüşmək üçün çox tənbəl olacaqlar və onun genişliklərində dolaşmaq əvəzinə saytı bağlayacaqlar.
Dərhal səhifənin yuxarısına keçmək üçün düymədən istifadə etmək saytda vaxtınızı daha rahat edir.
İnternet resursu üçün faydaResursun özü üçün müsbət cəhətlər keçmiş amillərdən irəli gəlir, çünki sayt ətrafında sadələşdirilmiş naviqasiya davranış amillərini yaxşılaşdırır, çünki bütün ziyarətçilər öz hərəkətlərində daha aktiv olacaq və digər səhifələrə keçəcəklər.
Beləliklə, məlumatlar bütün axtarış sistemlərinin sayta münasibətinə təsir edir və axtarış nəticələrində onun yerini yaxşılaşdırmağa səbəb olur.
Bir veb saytında "yuxarı" düyməsini necə etmək olar
- bir görüntü yaratmaq;
- skript yaratmaq;
- düymə üslubunun yaradılması;
- sayta əlavə olunur.
Saytda "yuxarıya qayıt" düyməsini əlavə etmək üçün əvvəlcə ikonanın özünü düzəltməlisiniz ki, bu da kliklədikdə istifadəçini səhifənin yuxarısına aparacaq. Bunu etmək üçün hazır variantlardan istifadə edə bilərsiniz, bunların arasında həmişə ən uyğununu seçə bilərsiniz.
Düymənin görünüşünü yaxşılaşdırmaq üçün bəzi təkmilləşdirmələr etmək lazımdır, yəni CSS-ə əsaslanan fon şəkillərini birləşdirməyə və bununla da onlardan animasiya yaratmağa imkan verən sprite etmək lazımdır.
Qrafik iş üçün istənilən redaktordan istifadə edə bilərsiniz. Ancaq ən əlverişli seçim PIXLR onlayn xidməti olacaq, çünki burada heç bir şey yükləməyinizə ehtiyac yoxdur və onu birbaşa brauzerinizdə istifadə edə bilərsiniz.
Başlamaq üçün görünən redaktor pəncərəsində "Şəkli kompüterdən yüklə" sahəsini seçməlisiniz. Nümunə olaraq raket şəklini götürək.
Seçilmiş simvolun ölçüləri çox böyükdürsə, kiçik ölçülü düzəliş etməlisiniz. Bunu etmək üçün yuxarı menyuya keçib "Düzəliş" sahəsini seçməlisiniz və "Pulsuz çevrilmə..." dən sonra.
Sonra, şəklin yanında xüsusi markerlər görünür, onları hərəkət etdirərək, şəklin ölçüsünü dəyişə bilərsiniz. Proporsiyaları qorumaq üçün Shift düyməsini istifadə edə bilərsiniz, onu tutarkən mavi markerləri hərəkət etdirməlisiniz. Bu hərəkətlərin sonunda bir raket şəkli əldə edilir.
Növbəti addım qatın surətini yaratmaqdır.
İndi raket şəklini yeni təbəqədən bir az yuxarıya köçürməlisiniz. Bunun üçün sol menyunun ikinci sütununda yerləşən hərəkət alətindən və klaviaturada yuxarı oxundan istifadə etmək rahat olacaq.
İndi yuxarıdakı təsviri ağ-qara etmək lazımdır. Bu, yuxarı menyuda "Düzəliş" - "Rəng/Doyma" elementindən istifadə etməklə edilə bilər. Tam desaturasiya üçün Doyma slayderi -100-ə təyin edilməlidir. Bu hərəkət sizə "Yuxarı" düyməsinin üzərinə gətirdiyiniz zaman qara-ağdan rəngə çevriləcəyi effekt yaratmağa imkan verəcək.
Son toxunuş iki şəkil ətrafındakı əlavə boşluğu aradan qaldırmaqdır. Bunu etmək üçün sol menyudan "Kəsmə" maddəsini seçin və düzbucaqlıda yalnız iki raket seçin. Kəsmə yerinə yetirmək üçün Enter düyməsini basın.
Nəticə əlavə boş yerin olmadığı bir şəkildir. Yaranan şəklin enini və hündürlüyünü yazmalısınız, çünki bu məlumatlar növbəti addımda faydalı olacaqdır.
Saxlamaq üçün "Fayl" - "Saxla" düyməsini sıxmalısınız, burada "Kompüterim" sol bəndində şəklin adını yazırıq (yalnız İngilis dili düzeni), formatı seçin (bu halda - PNG) və "Bəli" düyməsini basın.
Yuxarı düymə skript faylıBu halda skript yazmağa ehtiyac yoxdur. Hazır kodda bəzi düzəlişlər etməklə ictimaiyyətə açıq olan variantdan istifadə etmək mümkün olacaq.
Bunun üçün hər hansı kod redaktorunu yükləməli olacaqsınız. Ən populyar və eyni zamanda pulsuz seçim Notepad++-dır. Quraşdırdıqdan sonra bütün bu kodu kopyalayıb ona yapışdırmalısınız:
| $(sənəd).ready(funksiya())( $(pəncərə).scroll(funksiya () (əgər ($(bu).scrollTop() > 0) ($("#scroller").fadeIn();) else ($("#scroller").fadeOut();))); $("#scroller").click(funksiya () ($("body,html").animate((scrollTop: 0), 400 ) ; yalanı qaytarın ;)); )); |
Sayt üçün yuxarı sürüşdürmə düyməsini quraşdırmaq üçün kodu lazımi yerə yerləşdirmək lazımdır. Onu etiketdən əvvəl daxil etməlisiniz .
CSS-də Düymənin DizaynıÇox vaxt sayt üçün "yuxarı" düyməsi aşağıda ("altbilgi") yerləşir.
Saytın style.css faylına aşağıdakı kodu əlavə etməlisiniz:
Bu halda, təsvirin eni və hündürlüyü üçün məlumatlara ehtiyacınız olacaq. Yalnız alınan məlumatları koda daxil etmək qalır və sayt üçün "yuxarı" düyməsi hazır olacaq! Başqa?
Wordpress saytı üçün yuxarı düymə
Bu CMS üçün “Üst” düyməsi həm plaginlərdən istifadə etməklə, həm də müstəqil olaraq yaradıla bilər.
Plugin metodu quraşdırmaq üçün ən rahat və ən asandır, çünki quraşdırma düyməsini sıxmaq və plagin menyusundakı bütün funksiyaları konfiqurasiya etmək kifayətdir.
Sonuncunun seçiminə ehtiyatla yanaşmaq lazımdır, çünki onunla birlikdə sayt üçün asanlıqla virus ala bilərsiniz. Ən populyar və sübut edilmiş variant Scroll Back To Top adlı plagindir. Standart Wordpress plagin axtarışından istifadə edərək onu yükləyə bilərsiniz.
Bu genişləndirmə çoxlu funksionallığa malikdir və Wordpress saytı üçün "yuxarıya qayıt" düyməsini fərdiləşdirmək çox asan olacaq. Bütün dəyərləri dəyişdirmək lazım deyil, yalnız sayt səhifəsində düymənin görünüşünü və yerini konfiqurasiya etməlisiniz.
Gördüyünüz kimi, plaginlərdən istifadə edərək "yuxarı" düyməsini quraşdırmaq çox sadədir. Ancaq bir vacib nüans var ki, hər bir quraşdırılmış plagin CMS-i yükləyir. Bu, internet resursunun sürətinə təsir edə bilər. Buna görə əksər veb sayt sahibləri üçüncü tərəf uzantılarından istifadə etmədən bütün dəyişiklikləri birbaşa kodda etməyə çalışırlar. Siz HTML-də vebsayt üçün “yuxarı” düyməsi yarada bilərsiniz ki, bu da istehlak olunan resursları minimuma endirəcək.
Bütün Wordpress sistem fayllarını dəyişməzdən əvvəl onların ehtiyat nüsxəsini çıxarmalısınız. Sonra, yuxarıda təsvir olunan öz düymənizi yaratmaq üçün bütün addımları izləyə bilərsiniz.
Joomla üçün yuxarı düymə
CMS Joomla həmçinin Wordpress kimi plaginlərin quraşdırılmasını dəstəkləyir. Joomla 3-də sayt üçün "yuxarı" düyməsinin ən uğurlu versiyası Səhifənin Üstü adlı genişlənmədir.
Bu CMS-də istənilən plagin “Genişləndirmə meneceri” vasitəsilə quraşdırıla bilər. Bunu etmək üçün sizə lazımdır:
- plagini internetdən yükləyin;
- genişləndirmə menecerində "Gözdən keçir" düyməsini basın;
- yüklənmiş arxivi seçin;
- "Yükləmə" düyməsini basın və quraşdırın.
İndi onu Plugin Manager-də aktivləşdirməlisiniz. Bunu etmək üçün bu bölməyə getməli, plagini tapmalı və statusunu "aktiv" vəziyyətinə keçirməlisiniz.
Səhifənin yuxarı hissəsi aşağıdakı funksiyalara malikdir:
- Run in/ administrator - seçimi yalnız İnternet resursunda deyil, həm də Joomla CMS panelində aktivləşdirir.
- Düyməni Açıqlama Vəzifəsi - “yuxarı” düyməsinin görünməsi üçün istifadəçi neçə piksel geri çəkməlidir.
- Omit Button Text - düymədə mətnin olması.
- Həmişə Yuxarıda - sayt səhifəsi həmişə əvvəldən göstəriləcək. Səhifədə müəyyən bir yerə keçmək üçün lövbərlərdən istifadə edərkən bu seçimi aktivləşdirmək lazım deyil.
- Smooth Scroll - səhifənin sürüşməsini daha hamar edir.
- Sürüşdürmə müddəti - səhifənin tamamilə başlanğıca keçəcəyi vaxt.
- Scroll Transition - sürüşməyə əla vizual effektlər əlavə edir.
- Transition Asing - səhifənin yuxarısına doğru hərəkəti "azaltma".
- Bağlantı yeri - nişanın yeri. Standarta görə, düymə sağ alt küncdə yerləşir.
- Üslublardan istifadə edin - aşağıdakı sahədə təyin edilə bilən fərdi düymə üslubu. Mənfi dəyərə keçsəniz, bütün üslub parametrləri aktiv sayt mövzusundan götürüləcək.
- Link Style - düymə tərzi parametrlərinizi daxil etmək üçün sahə.
“Yuxarı” düyməsinin üslubunu özünüz fərdiləşdirmək üçün CCS haqqında ən azı minimal məlumatınız olmalıdır. Əks halda, sondan əvvəlki parametrin dəyərini “Xeyr”ə dəyişməlisiniz.
Digər mühüm nüans odur ki, ikonadakı adi yazıda ingiliscə mətn var: Yuxarıya qayıt. Bu cür mətn rusdilli saytda mövcud ola bilməz, ona görə də sadəcə plagin parametrlərində onu söndürməli və ya rus dilinə dəyişdirməlisiniz.
Bu yazını dəyişdirmək üçün FTP və ya hostinqdə quraşdırılmış fayl menecerindən istifadə edərək sayt serverinə daxil olmalısınız. Sonra, “/administrator/language/en-GB/” kataloqunda “en-GB.plg_system_topofthepage.ini” adlı fayl tapmalısınız.
Mətni dəyişdirməzdən əvvəl bu sənədin kodlamasını UTF-8-ə dəyişməlisiniz. Bu, rus hərflərinin normal göstərilməsinə imkan verəcəkdir.
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Yuxarıya qayıt" " |
və dırnaq içərisindəki ifadəni rus dilinə dəyişin. “Yuxarıya!”, “Başına!” kimi ifadələrdən istifadə edə bilərsiniz. və ya "Yuxarı!"
Ucoz üçün yuxarı düymə
Ucoz-da sayt üçün "yuxarı" düyməsi kod inyeksiyasından istifadə etməklə yerinə yetirilməli olacaq, çünki bu CMS üçün plaginləri birləşdirmək mümkün deyil. Bununla belə, bu, sistem fayllarının uzun müddət öyrənilməsini və lazımi sətirlərin axtarışını tələb etmir, yalnız tələb olunan yerə kiçik bir kod daxil etməlisiniz.
Quraşdırma üçün bizə lazım olacaq:
- “İdarəetmə Paneli -> Dizayn -> Dizayn İdarəetmə (şablonlar) -> Saytın aşağı hissəsinə keçin;
- skripti daxil edin (layihənin rəsmi saytında və üçüncü tərəf resurslarında tapa bilərsiniz).
Bundan sonra, aşağı sağ küncdə istifadəçini səhifənin ən yuxarı hissəsinə aparan bir simge görünəcək.
Gördüyünüz kimi, hər hansı bir CMS üçün "Back to Top" düyməsini quraşdırmaq o qədər də çətin deyildi. Siz ya avtomatlaşdırılmış quraşdırma metodundan (pluginlər) və ya əl ilə istifadə edə bilərsiniz. Bununla belə, son seçim ən uyğun olaraq qalır, çünki saytın fəaliyyətinə mənfi təsir göstərmir.
Sayt resurslarının istehlakını minimuma endirmək üçün HTML saytı üçün "yuxarıya qayıt" düyməsini istifadə edə bilərsiniz, çünki çoxlu sayda genişləndirmə resursun işinə mənfi təsir göstərə bilər. Bir "yuxarı" düymə plagini sayt səhifələrinin yüklənmə müddətinə çox təsir etməyəcək, lakin əksər hallarda istifadəçinin CMS-də ən azı onlarla plaginləri var. Bu halda istənilən plagin sayt səhifələrinin işinə mənfi təsir göstərə bilər.
Bir saytda əhəmiyyətli miqdarda məzmun varsa, veb ustaları sözdə "yuxarıya sürüşdürün" düyməsini istifadə edirlər. Bu düymə məzmunu dərhal səhifənin yuxarısına keçməyə imkan verir və bununla da istifadəçini yorucu əl ilə sürüşdürməkdən xilas edir.
Siz bu bloq səhifəsində “yuxarıya sürüşdürün” düyməsinin işinə baxa bilərsiniz.
Düymənin özü png formatında bir şəkil istifadə edir, buna görə də əvvəlcə özünüz üçün şəklin düzgün versiyasını tapmalısınız. Bunun üçün iconfinder adlı yüksək keyfiyyətli ikon xidməti uyğun gəlir.
Düymə çıxışı üçün HTML koduArrowup identifikatoru olan div bloku şablon icra edilə bilən faylının (adətən index.php faylı) ... teqləri arasına daxil edilir. Yootheme studio şablonlarında bu, "layouts" qovluğunda yerləşən theme.php faylıdır.
CSS düymələrinin üslubu
Arrowup sinifinə əlavə edilmiş düymə üslubu CSS kodu şablona daxil olan istənilən CSS faylına yerləşdirilir. Tipik olaraq "css" qovluğunda yerləşən style.css faylından istifadə olunur.
#arrowup (mövqe: sabit; sağ: 30px; /*düymə mövqeyi: sağ abzas*/ aşağı: 30px; /*düymə mövqeyi: aşağı abzas*/ fon: url(/images/arrowup.png); /*buna gedən yol şəkil düymələri*/ eni: 48px; /*düymənin eninin ölçüsü*/ hündürlüyü: 48px; /*düymənin hündürlüyü ölçüsü*/ kursor: göstərici; ekran: heç biri; qeyri-şəffaflıq: 0.8; /*statik şəffaflıq səviyyəsi*/ ) #arrowup :hover (şəffaflıq: 1; /*şəffaflıq səviyyəsi*/ )
Düymənin işləməsi üçün JS koduDüymənin funksionallığını həyata keçirən JavaScript kodu ya şablon icra olunan faylın (index.php) ... teqləri arasında, ya da bağlanma teqindən əvvəl yerləşdirilir.
$(sənəd).ready(funksiya() ( $(pəncərə).scroll(funksiya() ( əgər ($(bu).scrollTop() > 0) ( $("#arrowup").fadeIn(300); / /düymənin yox olma sürəti ) başqa ( $("#arrowup").fadeOut(200); //düymənin görünmə sürəti ) )); $("#arrowup").click(function() ( $) ("body,html" ).animate(( scrollTop: 0 ), 200); //scroll sürəti false qaytarır; ));));
Mobil cihazlarda "yuxarı düyməsini" necə gizlətmək olarBir çox veb ustaları saytı mobil cihazlarda göstərərkən “yuxarı düyməsini” gizlədirlər, çünki bu, lazımsızdır. Mobil cihazlarda "yuxarıya sürüşdür" düyməsini gizlətmək üçün @media css media sorğusundan istifadə edin (hər şey eyni css faylı style.css ilə yazılmışdır):
yalnız @media ekranı və (maksimum en: 568px) ( #arrowup (ekran: heç biri;) )
“Əvvələ qayıt” və ya “ ” düyməsi müasir veb-saytların səhifələrində populyar və faydalı elementdir, xüsusən də bu səhifələrdə çoxlu məzmun varsa.
Əvvəla, bunlar ümumiyyətlə saytın istifadəsini yaxşılaşdırır. İstifadəçi çoxlu məzmunu oxuyanda və saytın yuxarı hissəsinə qayıtmaq üçün səhifənin aşağısına keçdikdə, standart sürüşdürmədən istifadə edir. İstifadəçinin avtomatik olaraq səhifənin yuxarı hissəsinə yönləndirilməsini təmin etmək üçün ziyarətçiləri haqqında düşünən sayt tərtibatçıları və idarəçiləri “Yuxarıya qayıt” düymələrinin müxtəlif variantlarından istifadə edirlər. Bunlar heç bir əlavə kitabxana və ya skriptdən istifadə etmədən, həmçinin genişləndirilmiş funksionallıqla, kitabxananı və kiçik icra skriptini birləşdirən ən sadə həllər ola bilər.
"Back to Top" düymələri müxtəlif üsullarla hazırlanmışdır; bunlar banal mətn keçidləri, klassik görünüşlü düymələr, oxlu dairəvi düymələr və ya müvafiq tipli təsvirdən istifadə edə bilərlər. Çox vaxt bu düymələr statik görünür; bəzən onlar sürüşərkən fon rəngini və şrifti dəyişir; daha az hallarda tərtibatçılar animasiya effektlərindən istifadə edirlər.
Bu gün sadə bir misaldan istifadə edərək, biz “Yuxarıya qayıt” pop-up düyməsinə kiçik bir hərəkət əlavə etmək üçün CSS animasiyasından necə istifadə edə biləcəyinizi nəzərdən keçirəcəyik və eyni zamanda, skriptin özünə də baxacağıq. düymənin işləməsi üçün lazım olan jQuery hadisələri.
Saytınızda bir düyməni aktivləşdirmək üçün səhifənin HTML işarələnməsinə hər hansı teq əlavə etməyə ehtiyac yoxdur. jQuery kitabxanasına qoşulmaq və kiçik icra olunan js yazmaq kifayətdir və düymə işləyəcək. Biz style.css faylını html sənədinə qoşaraq CSS istifadə edərək görünüş və animasiya yaradacağıq.
Beləliklə, əgər saytınızda hələ də jQuery kitabxanası yoxdursa, bu, cari versiyanı birbaşa Google məzmun çatdırılması şəbəkəsindən (CDN) qoşmaqla asanlıqla həyata keçirilə bilər. Bunu etmək üçün bağlama teqindən əvvəl aşağıdakı sətri yazın:
| < script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" > |
Aşağıda, bu xəttin düz altında, düyməmizi müəyyən bir gecikmə ilə göstərəcək və eyni zamanda istifadəçini rəvan şəkildə səhifənin yuxarısına qaytararaq əsas funksiyasını yerinə yetirəcək kiçik bir icra edilə bilən js yerləşdirin.
| < script>jQuery (sənəd). hazır(funksiya ($) ( var //səhifənin yuxarısına sürüşmə sürəti = 500 , //html düymə düzümü $scrollTop = $(" " ) . appendTo("body" ); $scrollTop . click(funksiya (e) ( e. preventDefault() ; $( "html:not(:animated),body:not(:animated)" ) .animate(( scrollTop: 0 ) , sürət ) ; ) ) ; //düymə funksiyasının görünüş rejiminin qurulması show_scrollTop() ( ( $(window). scrollTop() > 300 ) ? $scrollTop . fadeIn(600 ) : $scrollTop . fadeOut (600 ) ; ) $(pəncərə) .scroll( funksiya () ( show_scrollTop() ; ) ) ; show_scrollTop() ; ) ); |
jQuery(document).ready(function($)( var //səhifənin yuxarısına sürüşmə sürəti = 500, //html düymə düzümü $scrollTop = $(" ").appendTo("body"); $scrollTop.click(funksiya(e)( e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate(( scrollTop: 0), speed); )); //düymə funksiyasının görünüş rejiminin qurulması show_scrollTop())( ($(window).scrollTop() > 300) ? $scrollTop.fadeIn(600) : $scrollTop. fadeOut(600) ; ) $(pəncərə).scroll(funksiya())( show_scrollTop(); )); show_scrollTop(); ));
Daha yaxşı başa düşmək üçün ssenariyə bəzi şərhlər əlavə etdim. Yuxarıda yazdığım kimi, bu üsul HTML səhifə işarələnməsinə hər hansı bir teq əlavə etmək ehtiyacını aradan qaldırır; skript bunu mükəmməl edir. İstifadəçi səhifəni 300 piksel aşağı sürüşdürdükdə, plagin bir düymə etiketi yazacaq, bizim vəziyyətimizdə bu:
| < a href= "#" title= "Tez zirvəyə qayıdın" class = "scrollTop" >< i class = "fa fa-angle-double-up" > |
səhifənin əsas hissəsində, hamısı bağlanma etiketindən əvvəl eyni yerdə.
Düymənin rəvan görünməsi və gizlədilməsi üçün biz verilmiş 600 millisaniyəlik sürətlə .fadeIn () və .fadeOut () funksiyalarından istifadə edirik. Səhifənin yuxarısına sürüşmə sürəti 500 millisaniyə olaraq təyin edilmişdir.
| < link href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel= "stylesheet" type= "text/css" > |
Font Awesome-ə qoşulduqdan sonra siz onları HTML kodunda və ya bizim vəziyyətimizdə js-də olduğu kimi, xüsusi siniflərdən, əsas fadan və müəyyən bir simvol növü üçün sinifdən istifadə edə bilərsiniz, bizim vəziyyətimizdə bu, fa-angle-double-up-dır. . Müəyyən bir simvolun sinfini veb saytında tapa bilərsiniz.
Simge konteynerinin görünüşü, fon ölçüsü və rəngi, yerləşdirmə, şriftin rəngi və ölçüsü, bütün bunlar birbaşa css-də müəyyən edilir, diqqət mərkəzində selektor.scrollTop i.
| /* düymənin gövdəsini, mövqeyini və keçid effektini yaradır */ .scrollTop ( /* defolt olaraq gizlənir */ displey : heç biri ; /* yuvarlaq künclər */ -webkit-border-radius: 100% ; -moz-border-radius: 100% ; -ms-border-radius: 100% ; sərhəd radiusu: 100% ; /* düymənin mövqeyini düzəldin */ mövqe: sabit; /* düymənin ölçüləri */ eni: 60px ; hündürlük: 60px ; /* düymənin mövqeyi * / sağ : 1rem ; alt : 1rem ; /* kursor görünüşü */ kursor : göstərici ; /* iki düymə vəziyyəti arasında keçid effekti */ -webkit-keçid: alt 0.2s kub-bezier (0.42 , 0 , 0.58 , 1 ) ; -moz-keçid: alt 0.2s kub-bezier (0.42 , 0 , 0.58 , 1 ) ; -ms-keçid: alt 0.2s kub-bezier (0.42 , 0 , 0.58 , 1 ) ; -o-keçid: alt 0.2 s kub-bezier (0.42 , 0 , 0.58 , 1 ); keçid : alt 0.2s kub-bezier (0.42 , 0 , 0.58 , 1 ) ) /* hoverdə düyməni yuxarı sürüşdürün */ .scrollTop : hover2m ) / * əlavə düymə dizayn elementləri */ .scrollTop : əvvəl , .scrollTop : sonra ( məzmun : "" ; yuxarı: 0; sol: 0; fon rəngi: #766DCC ; eni: 60px; hündürlük: 60px; -webkit-border-radius: 100% ; -moz-sərhəd-radius: 100% ; -ms-border-radius: 100% ; sərhəd radiusu: 100%; -webkit-animasiya-doldurma rejimi: hər ikisi; -moz-animasiya-doldurma rejimi: hər ikisi; animasiya doldurma rejimi: hər ikisi; mövqe: mütləq; qeyri-şəffaflıq: 0; ) /* animasiyanın adını, növünü və sürətini təyin edin llya:əvvəl */ .scrollTop : əvvəl ( background-color : #736cad ; -webkit-animation: clickMe 1.8s 333ms sonsuz rahatlıq; -moz-animation: clickMe 1.8s 333ms sonsuz rahatlıq; animasiya : clickMe 1.8s 333ms sonsuz asanlıq ) /* animasiyanın adını, növünü və sürətini təyin edin llya:sonra */ .scrollTop : after ( -webkit-animation: clickMe 1.8s 777ms sonsuz rahatlıq; - moz-animasiya: clickMe 1.8s 777ms sonsuz rahatlıq; animasiya: clickMe 1.8s 777ms sonsuz rahatlıq ) /* işarənin görünüşünü yaradır */ .scrollTop i ( en : 30px ; hündürlük : 30px ; displey : blok ; fon : rgba (28, 144, 243, 0.61); rəng: #fff; mətni align: mərkəz; xətt hündürlüyü: 30px; şrift ölçüsü: 1.3rem; fon ölçüsü: 12px; - webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; sərhəd-radius: 100%; mövqe: mütləq; sol: 15px; üst: 15px; z-index : 100 ) /* animasiya */ @-webkit-keyframes clickMe ( 0% ( qeyri-şəffaflıq : 0 ; -webkit-transform: miqyas ( 0 ) ) 5% ( qeyri-şəffaflıq : 1 ) 100% ( qeyri-şəffaflıq : 0 ) ) @-moz-keyframes clickMe ( 0% ( qeyri-şəffaflıq : 0 ; -moz-transform: miqyas ( 0 ) ) 5% ( qeyri-şəffaflıq : 1 ) 100% ( qeyri-şəffaflıq : 0 ) ) @keyframes clickMe ( 0% ( qeyri-şəffaflıq : 0 ; -webkit-transform: miqyas (0 ) ; -moz-transform: miqyas (0 ) ; -ms-transform: miqyas (0 ) ; -o-transform: miqyas (0 ) ; transform : miqyas (0 ) ) 5% ( qeyri-şəffaflıq: 1) 100% (şəffaflıq: 0)) |
/* düymənin gövdəsini, mövqeyini və keçid effektini təşkil edir */ .scrollTop ( /* defolt olaraq gizlənir */ ekran: heç biri; /* yuvarlaq künclər */ -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-sərhəd-radius: 100%; sərhəd-radius: 100%; /* düymənin mövqeyini düzəldin */ mövqeyi: sabit; /* düymənin ölçüləri */ eni: 60px; hündürlüyü: 60px; /* düymənin mövqeyi * / sağ: 1rem; alt: 1rem; /* kursor görünüşü */ kursor: göstərici; /* iki düymə vəziyyəti arasında keçid effekti */ -webkit-keçid: alt 0.2s kub-bezier(0.42, 0, 0.58, 1) ; -moz-keçid: alt 0,2s kub-bezier(0,42, 0, 0,58, 1); -ms-keçid: alt 0,2s kub-bezier(0,42, 0, 0,58, 1); -o-keçid: alt 0,2 s kub-bezier(0.42, 0, 0.58, 1); keçid: alt 0.2s kub-bezier(0.42, 0, 0.58, 1) ) /* hoverdə düyməni yuxarı sürüşdürün */ .scrollTop:hover ( alt: 2rem ) / * əlavə düymə dizayn elementləri */ .scrollTop:əvvəl, .scrollTop:after ( məzmun: ""; yuxarı: 0; sol: 0; fon rəngi: #766DCC; eni: 60px; hündürlük: 60px; -webkit-border-radius: 100%; -moz-sərhəd-radius: 100%; -ms-border-radius: 100%; sərhəd radiusu: 100%; -webkit-animasiya-doldurma rejimi: hər ikisi; -moz-animasiya-doldurma rejimi: hər ikisi; animasiya doldurma rejimi: hər ikisi; mövqe: mütləq; qeyri-şəffaflıq: 0; ) /* animasiyanın adını, növünü və sürətini təyin edin llya:before */ .scrollTop:before ( background-color: #736cad; -webkit-animation: clickMe 1.8s 333ms sonsuz rahatlıq; -moz-animation: clickMe 1.8s 333ms sonsuz rahatlıq; animasiya: clickMe 1.8s 333ms sonsuz asanlıq ) /* animasiyanın adını, növünü və sürətini təyin edin llya:after */ .scrollTop:after ( -webkit-animation: clickMe 1.8s 777ms sonsuz rahatlıq; - moz-animasiya: clickMe 1.8s 777ms sonsuz rahatlıq; animasiya: clickMe 1.8s 777ms sonsuz rahatlıq ) /* işarənin görünüşünü yaradır */ .scrollTop i ( en: 30px; hündürlük: 30px; ekran: blok; fon: rgba (28, 144, 243, 0.61); rəng: #fff; mətn hizalanması: mərkəz; xətt hündürlüyü: 30px; şrift ölçüsü: 1.3rem; fon ölçüsü: 12px; - webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; sərhəd-radius: 100%; mövqe: mütləq; sol: 15px; üst: 15px; z- indeks: 100 ) /* animasiya */ @-webkit-keyframes clickMe ( 0% ( qeyri-şəffaflıq: 0; -webkit-transform: miqyas(0) ) 5% ( qeyri-şəffaflıq: 1 ) 100% ( qeyri-şəffaflıq: 0 ) ) @- moz-keyframes clickMe ( 0% ( qeyri-şəffaflıq : 0; -moz-transform: miqyas(0) ) 5% ( qeyri-şəffaflıq: 1 ) 100% ( qeyri-şəffaflıq: 0 ) ) @keyframes clickMe ( 0% (şəffaflıq: 0; -webkit-transform: miqyas(0); -moz-transform : miqyas(0); -ms-transform: miqyas(0); -o-transform: miqyas(0); çevirmək: miqyas(0) ) 5% ( qeyri-şəffaflıq: 1 ) 100% ( qeyri-şəffaflıq: 0 ) )
Animasiyanın özünü nəzərdən keçirmək qalır. Animasiya effekti bütün düyməyə deyil, əlavə psevdo elementlərə:sonra və:əvvəl tətbiq edilir. CSS animasiyasını yaratmaq üçün bu elementlərin üslublarına animasiya xassəsini əlavə etməlisiniz ki, bu da sizə adı müəyyən etməyə, animasiyanın sürətini və müddətini, habelə animasiyanın necə axması lazım olduğunu tənzimləməyə imkan verəcək. Animasiyanın görünüşü @keyframes, animasiya çərçivələrini konfiqurasiya edən düymələr dəsti istifadə edərək konfiqurasiya edilir.
Nümunəmizdə animasiya adı belədir: clickMe , müddət: 1.8s , gecikmə: 333ms for:fore və 777ms psevdoelement: after . Başlanğıcda animasiyanın təkrar sayını - sonsuz sonsuz və animasiyanın asanlaşma növünü - sürətləndirməni də müəyyənləşdiririk.
Animasiyanın müvəqqəti xassələrini qurduqdan sonra animasiyanın görünüşünü müəyyən etmək qalır, bu @keyframes blokunun daxilində edilir. Əvvəlcə animasiyanın adı verilir, sonra onun addımları əyri mötərizələrin içərisində təsvir edilir. Kod nümunəsindən görə bilərsiniz ki, qeyri-şəffaflıq xassəsinin çərçivələrindən (şəffaflıq) və transform elementinin miqyas funksiyası ilə çevrilməsindən - elementin miqyasından istifadə olunur. Animasiya addımları faizlərdən istifadə etməklə müəyyən edilir.
CSS xassələrinin animasiyası bu veb brauzerlərdə animasiyanın səhv göstərilməsinin qarşısını almaq üçün webkit brauzerləri @-webkit-keyframes və Mozilla Firefox brauzeri @-moz-keyframes üçün ayrıca təsvir edilmişdir.
Hamısı budur. Bir daha “Back to Top” düyməsinin necə işlədiyinə dair canlı nümunəyə baxın və sizə lazım olarsa, arxivdə qablaşdırılan və Y.Disk-də buludda yerləşdirilən mənbələri endirin.
Bütün hörmətlə, Endryu
Bir sayt üçün "Back to Top" düyməsi 2010-cu ildən etibarən bir çox vebsayt və bloqlarda görünməyə başladı. Bu düymə faydalıdır və istifadəçilər bundan istifadə edirmi? İstifadə edirlər, amma çox deyil. Buna görə də, bu düymə adətən saytın kənarında bir yerə əlavə olunur (ən çox sağ altda).
Üst düymənin üç tətbiqi var. Təbii ki, onların hər birini daha da bəzi incəliklərə bölmək olar, lakin üç əsas fikir var. Onların hər birinə baxıb öz qiymətimizi verəcəyik.
Yuxarıya qayıt düyməsini həyata keçirməyin yollarıMən ən yaxşı üsulla başlayacağam (həyata keçirmə mürəkkəbliyi orta səviyyədədir).
1. JavaScript və AJAX (JQuery) əsasındaAşağıda təsvir edilən nümunə bu saytda həyata keçirilir.
Bu üsulda aşağıdakı xüsusiyyətlərə malik əla düyməni almalıyıq:
- düyməni basmaq səhifənin yuxarı hissəsinə hamar bir keçid təmin edəcək;
- düymə şəffaf olacaq;
- düymə görünəndə hündürlüyü piksellərlə təyin etmək mümkündür;
Hər şeyi təlimatlara uyğun olaraq etsəniz, düyməni yaratmaqda heç bir problem olmamalıdır. Beləliklə, addım-addım təlimat:
A. js faylının yaradılması
İstənilən notepad açın (Notepad++ tövsiyə edirəm) aşağıdakı kodu yapışdırın və onu .js genişlənməsi ilə yadda saxlayın (məsələn, gototop.js):
B. Üslub Parametrləri
Stil faylına aşağıdakı kodu əlavə edin (stil faylı .css uzantılı fayldır). Çox vaxt onun adı main.css və ya style.css-dir:
top.png əvəzinə şəklinizin tam və ya nisbi ünvanını daxil etməlisiniz. 0px 0px və -56px 0px əvəzinə ofsetlərinizi daxil etməlisiniz. Və ya ofsetlərdən istifadə etməyin, sadəcə kliklədikdə fərqli bir şəkil istifadə edin.
C. Skriptlərin sayta qoşulması
Yuxarıdakı nümunədə biz AJAX texnologiyasından istifadə etdik, ona görə də jQuery kitabxanasını daxil etməliyik. Siz həmçinin birinci abzasda yaratdığınız gototop.js faylını daxil etməlisiniz:
Və saytın ən aşağı hissəsində (bədən etiketindən əvvəl) sətir əlavə edin:
Bunun üçün lazım olan bütün faylları arxivdə topladım: gototop.rar
2. AJAX olmadan düyməBu metodun tətbiqi çox sadədir, daha doğrusu, daha sadə ola bilməzdi. Üstəlik, mən hətta bu üsulu iki alt metoda bölərdim.
2.1. Bir keçid ankerindən istifadəSaytın yuxarı hissəsində bəzi element üçün id yazırıq. Başlıq üçün yazmaq məntiqli olardı, çünki bu məzmunun başlanğıcıdır. Və aşağıda lövbərə bir keçid yerləşdirə bilərsiniz. Kod belə bir şeydir:
... Məqalənin başlığı...Bu metodun çatışmazlıqları əhəmiyyətlidir:
- İstifadəçi artıq yuxarıda olsa belə, yuxarıdan yuxarı düymə həmişə görünəcək
- Çapa qeydiyyatdan keçmək lazımdır. Bu həmişə əlverişli olmaya bilər
- Yuxarıya keçid kəskindir (hamar hərəkət yoxdur)
Bir üstünlük var: skriptlərdən istifadə etməyə ehtiyac yoxdur.
2.2. JavaScript-dən istifadəJavaScript metodu əvvəlki ilə çox oxşardır. Eyni düymə, yalnız bu dəfə bütün səhifələrə lövbər əlavə etmək lazım olmayacaq. Budur kod:
...Üslub 2.1-ci misaldakı kimi yazıla bilər.
Hesab edirəm ki, hələ də 1-ci üsuldan istifadə etmək daha yaxşıdır, çünki bu yaşda çox vacib olan istifadəçilər üçün daha xoş vizual effekt verir.
Bu yazıda biz “Yuxarı” düyməsi edəcəyik, onun mahiyyəti ondan ibarətdir ki, sayt aşağı sürüşdürüldükdə görünəcək və üzərinə kliklədikdə istifadəçini cari səhifənin yuxarı hissəsinə göndərəcək. Düşünürəm ki, bunu çox izah etməyə dəyməz; hamımız bir çox saytlarda oxşar “yuxarıya qayıt” düymələrini görmüşük.
“Yuxarıya qayıt” düyməsini yaratmağı planlaşdırın1. Bu düymə üçün html strukturu yaradaq.
2. Gəlin onu üslub edək. Onu görünməz edək və sayt səhifəsinin kənarına nisbətən sağa yerləşdirək.
3. Gəlin, sürüşdürdükdən sonra düyməni göstərəcək bir skript yazaq və istifadəçinin “Back to Top” düyməsinin özünə kliklənməsini emal edək.
Beləliklə, yuxarıya bir düymə yaratmaq üçün fəaliyyət planı ilə hər şey aydındır, onu həyata keçirməyə başlayaq :)
1. “Back to Top” düyməsi üçün html strukturu yaradaqDüymə kodunu bağlama etiketindən əvvəl qoyun
2. “Bax to top” düyməsi üçün üslublarDüyməni sağ alt küncdə sabit bir mövqe ilə etmək qərarına gəldim. Simgeyə sabit ölçü, fon rəngi və yuvarlaq künclər verdim.
Mən həmçinin hover hadisəsi üçün üslubu düzəltdim və keçid xüsusiyyətindən istifadə edərək hamar keçid etdim.
/* Yuxarıya qayıt düyməsi */ #back-to-top( mövqe:sabit; z-indeks: 999; displey:yox; alt:70px; sağ:15px; kursor:göstərici; ) #yuxarıya geri i( en: 50px; hündürlük: 50px; displey: blok; rəng: #fff; fon: #26ADE4; mətni align: mərkəzə; şrift ölçüsü: 16px; xətt hündürlüyü: 50px; sərhəd radiusu: 5px; -webkit-keçid : .3s hamısı; -moz-keçid: .3s hamısı; -ms-keçid: .3s hamısı; -o-keçid: hamısı .3s; keçid: .3s hamısı; ) #yuxarıya geri i:hover(arxa fon :#333;)
3. “Yuxarıya qayıt” düyməsi üçün skriptƏvvəlcə bir neçə dəyişən elan edək. Birinci hədd ekran hündürlüyünün 1/3 dəyərini ehtiva edəcək və “Bax to Top” düyməmizin görünməsi üçün şərt kimi xidmət edəcəkdir.
İkinci backToTop, bir neçə dəfə daxil olmamaq üçün jQuery-nin düyməmizin seçimini saxlayacaqdır.
Var limiti = $(window).height()/3, $backToTop = $("#back-to-top");
Düyməmizin görünməsi və itməsi üçün bir şərt yazaq. Bizim vəziyyətimizdə şərt istifadəçinin ekranın üçdə birini fırladıb-fırlatmadığını yoxlamaq olacaq.
Əgər sürüşdürmüsünüzsə, “Back to Top” düyməsi görünəcək, əgər yoxsa və ya ən yuxarıya qayıtsanız, o, yox olacaq.
$(pəncərə).scroll(funksiya () ( if ($(this).scrollTop() > limit) ( $backToTop.fadeIn(); ) else ( $backToTop.fadeOut(); ) ));
Son toxunuş, klik hadisəsini "Başa qayıt" düyməmizə bağlamaqdır. Düyməni kliklədikdə, cari səhifənin əvvəlinə aparılmalıyıq. Bunu bir neçə sətir kodla edəcəyik:
// kliklə $backToTop.click(funksiya () ( $("body,html").animate(( scrollTop: 0 ), 1500); false qaytarın; ));
Bütün kodun göründüyü budur
Var limiti = $(window).height()/3, $backToTop = $("#back-to-top"); $(pəncərə).scroll(funksiya () ( if ($(this).scrollTop() > limit) ( $backToTop.fadeIn(); ) else ( $backToTop.fadeOut(); ) )); // kliklə $backToTop.click(funksiya () ( $("body,html").animate(( scrollTop: 0 ), 1500); false qaytarın; ));
NəticəBeləliklə, biz “Başa qayıt” düyməsini yaratmaq üzərində işi başa çatdırdıq. Bu, bu yazının CSS hissəsinə dəyişiklik etməklə şaxələndirə biləcəyiniz variantlardan yalnız biridir.
Demo məqalədə bu yazıda təsvir olunan CSS effektlərindən istifadə edilmişdir
