Salam. Nəzərinizə çatdırım ki, mən artıq yazmışdım, amma bunlar sadəcə əsas prinsiplər idi. İndi mən sizə bir animate.css faylında hazır animasiya xassələri dəsti ilə tanış olmağı təklif edirəm. Bu generator deyil, bütün populyar brauzerlərdə olduqca düzgün işləyən bir kitabxanadır. Və bu nümunələrə baxa bilərsiniz.

Animate.css qoşulur

Əgər siz vebsayt üçün təsvirin, mətnin və ya düymələrin CSS animasiyasını etmək və bütün bunları Javascript-dən istifadə etmədən həyata keçirmək istəyirsinizsə, sadəcə olaraq yuxarıda qeyd olunan bir faylı standart şəkildə birləşdirməlisiniz, yəni. baş etiketləri arasında.

Obyektlərin animasiya xassələri belə təyin olunur. , animasiya tələb olunur və tada effektlərdən biridir. Ancaq dövrün özünə ehtiyacımız var və indi bunu edəcəyik. Bu, yeni bir sinif yaratmaq və ona və ya mövcud olana xüsusi xüsusiyyətlər təyin etməklə edilə bilər.

Döngü animasiyası Animate.css

.new ( animasiya-iterasiya-count : sonsuz ; )

Yeni(animasiya-iterasiya-sayı: sonsuz;)

Burada nəyi izah etməyə çalışdığımı daha da aydınlaşdırmaq üçün bunun necə işlədiyini real bir nümunə ilə açıq şəkildə nümayiş etdirdiyim bu videoya baxın, həmçinin üslubların özlərini yükləyin.

Getdikcə bir çox açılış səhifələrində və ya promo səhifəsində müxtəlif animasiya effektləri tapa bilərsiniz. Axı onlar səhifəni daha maraqlı və cəlbedici edir.

Əsasən, bu effektlər ya hansısa hadisəyə (klikləyin və ya elementin üzərinə sürüşdürün) və ya səhifəni sürüşdürən zaman təyin edilir. Düşünürəm ki, belə saytlarla rastlaşmısınız, səhifəni sürüşdürəndə müxtəlif elementlər rəvan və gözəl görünür.

Əvvəllər bu effektləri həyata keçirmək üçün yalnız JS-dən istifadə etməli idiniz, lakin inkişaf hələ də dayanmır və CSS3-ün buraxılması ilə bütün bu effektlər onun üzərində həyata keçirilə bilər.

Bu dərsdə sizi animate.css adlı çox maraqlı alətlə tanış edəcəyik. Bu, arsenalında 50-dən çox müxtəlif effektə malik olan hazır CSS üslub cədvəlidir və bütün bu effektlər CSS3-də həyata keçirilir.

Onu istifadə etmək üçün sadəcə tələb olunan element üçün müəyyən bir sinif təyin etməlisiniz və bu elementə animasiya effekti tətbiq olunacaq. Daha əvvəl dediyim kimi, bu animasiya CSS3-də həyata keçirilir, ona görə də bu effektlər bütün müasir brauzerlərdə işləyəcək.

İndi animate.css-ə daha yaxından nəzər salaq.

Əsas HTML işarələməsi

Video təlimatına baxın

• sıçrayış
• flaş
• nəbz
• rezin bant
• silkələmək
• yelləncək
• yelləmək
• bounceIn
• bounceInDown
• BounceInLeft
• bounceInRight
• bounceInUp
• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp
• solmaq
• fadeInDown
• fadeInDownBig
• solğun sol
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• solmaq
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• flipInX
• flipInY
• flipOutX
• flipOutY
• lightSpeedIn
• lightSpeedOut
• döndərmək
• fırlatmaqInAşağıSola
• fırlatmaqInAşağıSağa
• fırlatmaqInUpSola
• fırlatmaqInUpRight
• rotateOut
• OutDownSola döndürün
• fırlatmaqOutDownSağa
• rotateOutUpSola
• rotateOutUpRight
• menteşe
• rollIn
• gəzmək
• yaxınlaşdırma
• zoomInAşağı
• Sola yaxınlaşdırın
• zoomInRight
• böyütmək
• kiçilt
• böyüdün
• zoomOutSola
• zoomOutSight
• zoomUp
• slideInDown
• slideInLeft
• slideInRight
• slideInUp
• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutUp

Sonsuz animasiya

Hər şeyi yuxarıda göstərildiyi kimi etmisinizsə, səhifə yükləndikdə bu effekt elementə tətbiq olunacaq və bu, animasiya orada bitəcək.

Bəs dayanmadan davam etmək üçün animasiyaya ehtiyacınız varsa nə etməli?

Bunu etmək üçün animasiya elementimizə başqa bir sinif əlavə etmək kifayətdir. Bu sinif sonsuzdur.

Başlıq

Siçanı elementin üzərinə gətirdiyiniz zaman animasiya qurun

Video təlimatına baxın

Əvvəllər təsvir edilən bütün nümunələr animasiyanı səhifə yükləndikdən dərhal sonra təyin edir, lakin praktikada buna nadir hallarda ehtiyac duyulur. Təcrübədə, çox vaxt elementin üzərinə keçərkən animasiya qurmaq lazımdır və buna görə də aşağıda bu tətbiq üçün hazır kodu təqdim etdim.

HTML

HTML işarələməmiz bir az dəyişdi, indi müəyyən bir animasiya üçün cavabdeh olan bir sinif göstərməyə ehtiyac yoxdur. Bu dəyəri xüsusi data-effekt atributunda göstərməliyik. Xahiş edirəm buna diqqət yetirin, bu çox vacibdir.

Başlıq

Budur, siçanın üzərinə sürüşmə hadisəsini izləyəcək kiçik bir jQuery kodu və bu hadisə baş verərsə, skript ona dəyəri data-effekt atributunda göstərilən bir sinif əlavə edəcəkdir. Bu sinfi əlavə etməklə animasiya tətbiq olunacaq.

Function animate(elem)( var effect = elem.data("effect"); if(!effect || elem.hasClass(effect)) return false; elem.addClass(effect); setTimeout(function())( element. removeClass (effekt , 1000); $(".animated").mouseenter(funksiya() ( animate($(this)); ));

Təbii ki, siz bu skripti istədiyiniz kimi dəyişə bilərsiniz, məsələn, klikləmək üçün siçan daxiletmə hadisəsini dəyişə bilərsiniz. Sonra bu halda animasiya siçan elementin üzərinə getdiyi anda deyil, klikləmə anında baş verəcəkdir.

Səhifəni sürüşdürərkən animasiya etmək

Video təlimatına baxın

Və nəhayət, animate.css-dən asanlıqla istifadə edə biləcəyiniz başqa bir nümunəyə baxaq.

Məhz, səhifəni sürüşdürərkən elementlər üçün müxtəlif effektlər təyin edə bilərsiniz. Bu məqsədlər üçün animate.css ilə yanaşı, xüsusi wow.js skriptinə də ehtiyacımız olacaq.

| 18.02.2016

CSS3 UI dizaynerləri üçün qeyri-məhdud imkanlar açır və əsas üstünlüyü ondan ibarətdir ki, demək olar ki, istənilən ideya JavaScript-dən istifadə etmədən asanlıqla həyata keçirilə və həyata keçirilə bilər.

Təəccüblüdür ki, sadə şeylər adi veb səhifəni necə canlandırır və onu istifadəçilər üçün daha əlçatan edir. Söhbət CSS3 keçidlərindən gedir, onun köməyi ilə siz elementə üslubu çevirməyə və dəyişməyə icazə verə bilərsiniz, məsələn, hover üzərində. Aşağıda mövcud olan doqquz CSS3 animasiya nümunəsi saytınızda həssaslıq yaratmağa, həmçinin gözəl, hamar keçidlərlə səhifənin ümumi görünüşünü yaxşılaşdırmağa kömək edəcək.

Daha ətraflı məlumat üçün arxivi faylları ilə yükləyə bilərsiniz.

Bütün effektlər keçid xüsusiyyətindən istifadə edərək işləyir. keçid- "keçid", "çevrilmə") və psevdo-sinif: siçan kursoru onun üzərinə getdikdə elementin üslubunu müəyyən edən hover (dərsliyimizdə). Nümunələrimiz üçün 500x309 px div, ilkin fon rəngi #6d6d6d və 0,3 saniyəlik keçid müddətindən istifadə etdik.

Bədən > div ( en: 500px; hündürlük: 309px; fon: #6d6d6d; -webkit-keçid: hamısı 0.3s asanlıq;; -moz-keçid: hamısı 0.3s asanlıq;; -o-keçid: hamısı 0.3s asanlıq;; keçid: bütün 0.3s asanlığı)

1. Hover üzərində rəng dəyişdirin

Bir zamanlar belə bir effektin həyata keçirilməsi müəyyən RGB dəyərlərinin riyazi hesablamaları ilə kifayət qədər əziyyətli iş idi. İndi sizə lazım olan yeganə şey CSS üslubu yazmaqdır ki, orada selektora psevdo-sinif əlavə etməlisiniz: hover və blokun üzərinə gətirdiyiniz zaman orijinal fon rəngini rəvan (0,3 saniyə ərzində) əvəz edəcək fon rəngi təyin edin. :

Rəng: hover (fon:#53ea93; )

2. Çərçivənin görünüşü

Maraqlı və heyrətamiz çevrilmə, siçan üzərinə gətirdiyiniz zaman rəvan görünən daxili çərçivədir. Müxtəlif düymələri bəzəmək üçün yaxşı uyğun gəlir. Bu effekti əldə etmək üçün biz psevdo-class:hover və daxil edilmiş parametrlə qutu-kölgə xassəsindən istifadə edirik (elementin daxilində kölgə təyin edir). Bundan əlavə, kölgə uzanmasını (bizim vəziyyətimizdə 23px) və rəngini təyin etməlisiniz:

Sərhəd: hover ( qutu-kölgə: daxil edin 0 0 0 23px #53ea93; )

3. Yelləncək

Bu CSS animasiyası istisnadır, çünki burada keçid xüsusiyyətindən istifadə edilmir. Bunun əvəzinə istifadə etdik:

• @keyframes, sizə deyilənləri etməyə imkan verən kadr-kadr CSS animasiya yaratmaq üçün əsas direktivdir. storyboard və animasiyanı əsas məqamların siyahısı kimi təsvir edin;
• animasiya və animasiya-iteration-count - animasiya parametrlərini (müddəti və sürəti) və dövrlərin sayını (təkrarlar) təyin etmək üçün xüsusiyyətlər. Bizim vəziyyətimizdə 1-i təkrarlayın.

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(9px); transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px); transform: translateX(3px) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: translateX() 9px); transform: translateX(9px); 30% (-webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% (-webkit-transform: translateX(6px); transform : translateX (6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit-transform: translateX(3px); transform: translateX(3px); ) 100 % ( -webkit-transform: translateX(0); transform: translateX(0); ) ) .yelləncək:hover ( -webkit-animasiya: yelləncək 0,6s asanlıq; animasiya: yelləncək 0,6s rahatlığı; -webkit-animasiya-iterasiya sayı: 1; animasiya-iteration-count: 1; ) 4. Zəifləmə

Solğun effekt mahiyyətcə elementin şəffaflığında sadə dəyişiklikdir. Animasiya iki mərhələdə yaradılır: əvvəlcə ilkin şəffaflıq vəziyyətini 1-ə, yəni tam qeyri-şəffaflığa, sonra isə siçanla hərəkət edərkən onun dəyərini təyin etməlisiniz - 0,6:

Solğunluq ( qeyri-şəffaflıq: 1; ) .solğunluq: hover ( qeyri-şəffaflıq: 0.6; )

Əks nəticə üçün dəyərləri dəyişdirin:

5. Böyütmə

Üzərinə gətirildikdə bloku böyütmək üçün transform xassəsindən istifadə edəcəyik və onu miqyasda (1.2) təyin edəcəyik. Bu halda blok öz nisbətlərini qoruyaraq 20 faiz artacaq:

Grow:hover ( -webkit-transform: miqyas(1.2); -ms-transform: miqyas(1.2); transform: miqyas(1.2); )

6. Azaldılması

Bir elementi kiçik etmək, onu böyütmək qədər asandır. Beşinci nöqtədə miqyası artırmaq üçün 1-dən böyük bir dəyər təyin etməmiz lazım idisə, bloku azaltmaq üçün sadəcə birdən az olacaq bir dəyəri göstərəcəyik, məsələn, miqyas(0.7) . İndi, siçan üzərinə hərəkət edərkən, blok proporsional olaraq orijinal ölçüsünün 30 faizi qədər kiçiləcək:

Büzülmə: hover ( -webkit-transform: miqyas(0.7); -ms-transform: miqyas(0.7); çevirmək: miqyas(0.7); )

7. Dairəyə çevrilmə

Tez-tez istifadə olunan animasiyalardan biri də üzərinə sürüldükdə dairəyə çevrilən düzbucaqlı elementdir. :hover və keçid ilə birlikdə istifadə edilən CSS border-radius xassəsindən istifadə etməklə buna problemsiz nail olmaq olar:

Dairə:hover ( sərhəd radiusu: 70%; )

8. Fırlanma

Əyləncəli animasiya seçimi elementi müəyyən sayda dərəcə fırlatmaqdır. Bunu etmək üçün yenidən transform xüsusiyyətinə ehtiyacımız olacaq, lakin fərqli bir dəyərlə - rotateZ(20deg) . Bu parametrlərlə blok Z oxuna nisbətən saat əqrəbi istiqamətində 20 dərəcə fırlanacaq:

Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )

9. 3D kölgə

Dizaynerlərin fikirləri bu təsirin düz dizaynda uyğun olub-olmaması ilə bağlı fərqlidir. Bununla belə, bu CSS3 animasiyası kifayət qədər orijinaldır və veb səhifələrdə də istifadə olunur. Artıq tanış qutu-kölgə xüsusiyyətlərindən istifadə edərək üçölçülü effekt əldə edəcəyik (çox qatlı kölgə yaradacaq) və translateX(-7px) parametri ilə transformasiya edəcəyik (blokun üfüqi olaraq sola 7 piksel sürüşməsini təmin edəcək) ):

Üç: hover ( qutu-kölgə: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 6px #53ea93, 7px 7px #:Xte-form 7px; -7px); çevirmək: translateX(-7px)

Brauzer dəstəyi

Aşağıdakı brauzerlər hazırda keçid xüsusiyyətini dəstəkləyir:

Masa üstü brauzerlər

internet Explorer	IE 10 və yuxarı versiyalar tərəfindən dəstəklənir
Chrome	26-cı versiyadan dəstəklənir (25-ci versiya -webkit- prefiksi ilə işləyənə qədər)
Firefox	16-cı versiyadan dəstəklənir (4-15-ci versiyalarda -moz- prefiksi ilə işləyir)
Opera	12.1 versiyasından dəstəklənir
Safari	6.1 versiyasından dəstəklənir (3.1-6 versiyalarında -webkit- prefiksi ilə işləyir)

Bu nümunələrdə istifadə olunan qalan xüsusiyyətlər, məsələn, transform , box-shadow və s., həmçinin demək olar ki, bütün müasir brauzerlər tərəfindən dəstəklənir. Bununla belə, bu ideyaları layihələriniz üçün istifadə edəcəksinizsə, brauzerlər arası uyğunluğu iki dəfə yoxlamağı şiddətlə tövsiyə edirik.

Ümid edirik ki, bu CSS3 animasiya nümunələrini faydalı tapdınız. Sizə yaradıcılıq uğurları arzulayırıq!

Bu yazıda biz animasiyadan istifadənin nüanslarını öyrənməyə davam edəcəyik, animasiyanın dayandırılması, animasiya istiqaməti kimi CSS xüsusiyyətlərini öyrənəcəyik, animasiya oynanılmadıqda element üçün üslubun necə təyin ediləcəyinə baxacağıq, baxacağıq. animasiya yaratmaq üçün universal xassədən necə düzgün istifadə etmək olar, biz qoşulub kitabxanadan necə istifadə edəcəyimizi öyrənəcəyik Animate.css .

Diqqətinizi ona yönəldirəm ki, bu materialı öyrənmək üçün əvvəlki "" məqaləsində əldə etməli olduğunuz biliyə ehtiyacınız olacaq.

Animasiya vəziyyəti

Baxacağımız növbəti sadə xüsusiyyət animation-play-statedir, o, animasiya vəziyyətini müəyyən edir. Bu xüsusiyyət iki mümkün açar sözdən biri ilə ötürülür:

• çalışan - animasiya oynanılır (standart dəyər).
• dayandırıldı - animasiya dayandırıldı.

Animasiyanı dayandırın və başlayın .test ( en : 100px ; /* element eni */ hündürlük : 100px ; /* element hündürlüyü */ rəng : ağ ; /* şrift rəngi ağ */ fon : yaşıl ; /* fon rəngi */ mövqe : nisbi ; /* nisbi yerləşdirmə elementi */ animation-name : iliketomoveit ; dövlət : çalışır ; /* animasiya oynayır (standart) */ .test:hover ( animation-play-state : paused ; /* siçan elementin üzərinə getdikdə animasiyanın dayandırıldığını təyin edin */ ) @keyframes iliketomoveit ( 0% ( sol : 0px ;) /* animasiya dövrünün başlanğıcı */ 25% ( sol : 400px ;) /* animasiya müddətinin 25%-i */ 75% ( sol : 200px ;) /* animasiya müddətinin 75%-i */ 100 % ( sol : 0px ;) /* animasiya dövrəsinin sonu */ ) mənə işarə edin

Bu nümunədə biz nisbi yerləşdirilmiş elementi cari mövqenin sol kənarına nisbətən köçürmək üçün CSS sol xassəsindən istifadə etdiyimiz sadə animasiya yaratdıq.

Siçan kursoru (:hover() psevdo-sinif) ilə elementin üzərinə apararkən, animasiya-play-state xassəsini paused olaraq təyin etməklə animasiya dayandırılır və kursor elementi tərk etdikdə animasiya davam edir.

Nümunəmizin nəticəsi:

Animasiya istiqaməti

Ümumi animasiya xassəsindən istifadə edərək, aşağıdakı animasiya parametrlərini təyin etdik:

• Animasiya adı- iliketomoveit.
• Animasiya müddəti- 4 saniyə.
• Sürət əyrisi- addım animasiya addımları (3, başlanğıc) . Açar çərçivənin hər bir hissəsi üçün o istehsal olunacaq 3 addım.
• Animasiya gecikməsi- 500 millisaniyə.
• Dövrlərin sayı- sonsuz (sonsuz).
• Animasiya istiqaməti- tərs (əks istiqamətdə).

Nümunəmizin nəticəsi:

Aşağıdakı nümunəni nəzərdən keçirin

CSS gövdəsində animasiya yüklənir ( margin : 0 ; /* padding */ padding : 0 ; /* padding */ ) .container ( en : 100px ; /* element width */ padding-top : 100px ; /* padding top */ margin : 0 auto ; /* elementi xarici kənarlarla mərkəzləşdirin */ ) div > div ( display : inline-block ; /* inline elements set as block-line (lineed) */ width: 10px ; /* en element */ hündürlük : 10px ; /* elementin hündürlüyü */ margin : 0 auto ; 1) ( fon : narıncı ; /* fon rəngi */ animasiya : yuxarı 1s xətti 1s sonsuz ; .item:nth-child(2) ( fon : violet ; /* fon rəngi */ animasiya : yuxarı 1s xətti 1.2s sonsuz ; /* ad müddəti timing-funksiya gecikməsi iterasiya sayı */ ) .item:nth-child(3) ( fon : magenta ; /* fon rəngi */ animasiya : up 1s linear 1.4s infinite ; /* ad müddəti timing funksiyası gecikmə iterasiya sayı */ ) .item:nth-child(4) ( fon : lightseagreen ; /* fon rəngi */ animasiya : up 1s linear 1.6s infinite ; /* ad müddəti timing- funksiyası gecikmə iterasiya sayı */ ) .item:nth-child(5) ( fon : forestgreen ; /* fon rəngi */ animasiya : up 1s linear 1.8s infinite ; /* ad müddəti timing-funksiya gecikməsi iteration-count * / ) @keyframes up ( 0%, 100% ( /* animasiya dövrəsinin başlanğıcı və sonu */ transform : translateY(-15px) ; /* elementi Y oxu boyunca sürüşdürün */ ) 50% ( /* animasiyanın ortası */ transform : translate(5px, 0) /* elementi X oxu boyunca 5px sürüşdürün, Y oxu boyunca sürüşdürün */ ) )

Bu misalda biz bir neçə animasiya yaratdıq ki, burada xassədən istifadə edərək iç-içə elementlər ox boyunca yerdəyişdirilir. X(üfüqi ox) və Y oxu (şaquli ox). Hər bir elementdə 1 saniyədən 1,8 saniyəyə qədər fərqli animasiya gecikməsi var idi. Hər bir element animasiyası aşağıdakı parametrləri ehtiva edir:

• Animasiya adı-yuxarı.
• Animasiya müddəti- 1 saniyə.
• Sürət əyrisi- xətti (bütün animasiya boyu eyni sürət).
• Animasiya gecikməsi- 1 saniyədən 1,8 saniyəyə qədər.
• Dövrlərin sayı- sonsuz (sonsuz).

Elementin şəffaflığını dəyişən kitabxanadan sadə animasiyaya baxaq:

@keyframes fadeIn ( /* animasiya dövrünün başlanğıcından (0%) */ qeyri-şəffaflıq : 0 ; /* element tamamilə şəffafdır */ ) ( /* animasiya dövrünün sonuna (100% ilə eyni) * / qeyri-şəffaflıq : 1 ; /* element qeyri-şəffafdır */ ) .fadeIn ( animasiya adı : fadeIn ; /* animasiya adı (@keyframes qaydasındakı ada uyğundur) */ )

Bu açar kadrlar elementin qeyri-şəffaflığını tam şəffafdan qeyri-şəffaflığa dəyişmək üçün xassədən istifadə edir.

Lakin bu, sizi maraqlandıran Animate.css kitabxanasının animasiyasını işə salmaq üçün hələ kifayət deyil. Animasiyaya başlamaq üçün layihənin müəllifi tərəfindən yaradılmış aşağıdakı siniflərdən istifadə edə bilərsiniz, lakin tələb olunmur:

/* animasiyanı bir dövr üçün işlətməyə imkan verən əsas sinif */ .animated ( animasiya müddəti : 1s ; /* animasiya müddəti 1 saniyə */ animation-fill-mode : hər ikisi ; /* element üçün üslubu təyin edir: animasiya oynanılmır (animasiya tamamlandıqdan sonra və başlamazdan əvvəl - gecikmə zamanı).*/ ) /* .infinite sinfinin .animasiya dəsti olan elementə əlavə edilməsi animasiyanın qeyri-müəyyən müddətə oynamasına imkan verəcək */ .animated.infinite ( animasiya-iteration-count : sonsuz ; /* animasiya sonsuz oynayacaq */ )

Nəzərə alın ki, siz animasiya prosesinə nəzarət edəcək öz siniflərinizi yarada bilərsiniz. Bir qayda olaraq, bu və ya digər elementə siniflərin əlavə edilməsi dildən istifadə etməklə baş verir JavaScript istifadəçi hərəkətlərindən və ya müəyyən hadisələrdən asılı olaraq. Biz yalnız Animate.css kitabxanasındakı siniflərdən istifadə edəcəyimiz və yalnız kaskad stil cədvəllərindən istifadə edərək animasiya quraşdıracağımız bir nümunəyə baxacağıq.

Bir misala baxaq:

Animate.CSS kitabxanasından istifadə edərək animasiya

Bu misalda biz Animate.css kitabxanasını teqdən istifadə edərək birləşdirdik və kitabxanadan aşağıdakı 3 sinfi bağladığımız (boşluqla ayrılmış) şəkli yerləşdirdik.

Bu kombinasiyadan istifadənin ən sadə nümunəsi bu səhifədə aşağıda göstərilə bilər. Ən maraqlısı odur ki, bu gözəllik (sürülən animasiya) jQuery OLMADAN işləyir. Belə çıxır ki, bu ssenari üçün bütün qapılar açıqdır...Və misal olaraq aşağı diyirləyin...Cəsarətli olun...

Mən sizə əminliklə deyə bilərəm ki, indi fırlanan animasiya ÇOX populyarlaşır və siz tez-tez bu effekti uğurlu internet sahibkarlarının satış saytlarında tapa bilərsiniz. Bu kimi “hiylələr” saytlara çoxlu həyat əlavə edir və həmçinin ziyarətçinin diqqətini ilk olaraq diqqətinizi cəlb etmək istədiyiniz vacib məqamlara yönəltməyə kömək edir.

Sürüşən animasiya: birləşmə
"WOW.js" və "Animate.css"
WordPress-də...

* animasiyanı təkrarlamaq üçün səhifəni yenidən yükləyin.

Necə qurmaq olar?

ADDIM 1
Başlamaq üçün bu iki faylı endirin (“WOW.js” və “Animate.css”)

YENİLƏNİB (25 iyul 2019-cu il):
wow.min.js v1.2.1 | animate.min.css v3.7.2
ADDIM 2
“Wow-animation” qovluğunu saytın kök qovluğuna yerləşdirin. Əlbəttə ki, faylların düzgün yolunu göstərdiyiniz müddətcə onu istənilən yerə yerləşdirə bilərsiniz. Hələ də bu qovluğu kök qovluğa yerləşdirmək məsləhətdir: index.html. Əgər bu WordPress-dirsə, qovluğu istədiyiniz yerə qoyun. (əsas odur ki, ona doğru yolu göstərəsiniz).

ADDIM 3
Bu sıraya qoyuruq:

* Təbii ki, biz faylın düzgün yolunu göstəririk. WordPress-də quraşdırırsınızsa, tam yolu göstərməyi məsləhət görürəm, yəni. httpS://YourDomain və s. ilə başlayan. Faylı düzgün birləşdirib-qoşmadığınızı yoxlamaq üçün URL-ni kopyalayın, onu ünvan çubuğuna daxil edin və Enter düyməsini basın. Anlaşılmaz kodu olan bir fayl açılırsa, hər şey qaydasındadır :)

ADDIM 4
Bu sətirləri səhifənin ən aşağısına qoyun:

yeni WOW().init();

* Həmçinin faylın düzgün yolunu göstərin və brauzerdə yoxlayın.

Müəyyən məlumat

ADDIM 6
Qabaqcıl parametrlər. Əlavə funksiyalar:
data-wow-duration : Animasiyanın müddətini dəyişdirin;
data-wow-delay : Animasiya başlamazdan əvvəl gecikmə;
data-wow-offset : Animasiya başlamazdan əvvəl məsafə (brauzer pəncərəsinin aşağı hissəsinə nisbətən);
data-wow-iteration : Animasiyanı “çox dəfə” təkrarlayın.

Müəyyən məlumat Müəyyən məlumat