Rozpocznij animację podczas przewijania CSS. Wprowadzenie do animacji przewijania jQuery
Cześć drodzy przyjaciele! Długo przygotowywałem materiał do dzisiejszego artykułu i starałem się przedstawić go możliwie szczegółowo. Mam nadzieję, że po przeczytaniu tego nie będziesz już miał żadnych pytań na temat tego, jak robi się CSS.
Od razu ostrzegam: sami nie będziemy pisać skryptów ani nic w tym stylu (blog jest przeznaczony dla początkujących i zależy nam na tym, aby był łatwy w nawiązywaniu kontaktów i działał bez zarzutu).
Do pracy będziemy musieli pobrać kilka narzędzi.
Rozmiar: 0,48 MB
Pobierz źródło
Przede wszystkim jest to plik animate.css – biblioteka, w której zapisywane są style animacji elementów na stronie. Aby wizualnie ocenić i wybrać typ animacji, zwykle korzystam ze strony zasobów http://daneden.github.io/animate.css/
Oznacza to, że proces dodawania animacji do elementu rozpoczyna się od tego, że przechodzę do tego zasobu i wybieram styl animacji z proponowanych opcji. (na szczęście jest w czym wybierać)
Następnie musisz podłączyć arkusz stylów. W tym celu skopiuj plik animate.css do folderu zawierającego arkusze stylów Twojej witryny. Dla mnie ten folder nazywa się „css”. Natomiast w pliku „index.html” pomiędzy tagami head piszemy:
Teraz musimy przypisać klasę do elementu, który chcemy animować, o odpowiedniej nazwie wybranej w poprzednim kroku. Oznacza to, że styl BounceInRight pokazany na powyższym zrzucie ekranu będzie klasą dla elementu, który będziemy animować. A także animowana klasa, dzięki czemu animacja się odtwarza. Mam nadzieję, że jasno to wyjaśniłem? Jeśli nie, skorzystaj z poniższego przykładu – to niezwykle proste!
Na przykład:
Teraz, gdy strona zostanie odświeżona, zostanie odtworzona animacja. Możesz spróbować, naciskając przycisk f5.
Czy to nie fajne? Ale to nie koniec procesu tworzenia animacji, ponieważ musimy zadbać o to, aby animacja odtwarzała się podczas przewijania strony, a nie od razu po jej załadowaniu!
W tym celu będziemy musieli skorzystać z gotowego skryptu wow.js. Należy go umieścić w folderze js głównego katalogu Twojej witryny. Zamieściłem tylko wersję skompresowaną, ponieważ waży mniej i ładuje się szybciej. Można zapoznać się z projektem w całości.
Aby więc animacja elementów wystąpiła podczas przewijania strony należy dodać do pliku Index.html następujące 2 linie pomiędzy tagami head:
nowy WOW().init();
A także w klasie BounceInRight zamiast animacji trzeba dodać wow. To powinno wyglądać tak:
Jak widać pierwsza animacja odtwarza się od razu po załadowaniu strony, a druga dopiero podczas przewijania, gdy użytkownik ją zobaczy. Natomiast ten pierwszy nie zostanie zauważony, jeśli nie znajduje się na pierwszym ekranie.
Możemy stwierdzić, że proces tworzenia takiej animacji sprowadza się do 5 minut straconego czasu. Wszystko, co musisz zrobić, to:
- Dodaj 3 linie kodu pomiędzy otwierającym i zamykającym tagiem head.
- Skopiuj pliki animate.css i wow.min.js do odpowiednich folderów.
- Dodaj klasę wow oraz klasę z nazwą animacji do elementu, który chcemy animować
I to wszystko, Twoja witryna będzie wyglądać znacznie bardziej żywo i efektownie. A w przypadku sprzedaży - droższe.
Istnieją jednak dodatkowe narzędzia do kontroli animacji. Dla każdego elementu można ustawić kilka specjalnych atrybutów w celu dostrojenia:
- data-wow-offset: Odległość od dolnej krawędzi przeglądarki, aby rozpocząć animację;
- data-wow-duration: Zmień czas trwania animacji;
- data-wow-delay: Opóźnienie przed rozpoczęciem animacji;
- data-wow-iteration: Ile razy powtórzyć animację?
Na przykład tak:
To wszystko na dziś, do zobaczenia na smartlandingu. Zostaw swoje komentarze i zadawaj pytania! Do widzenia!
P.s.: Jeśli chcesz, aby animacja była odtwarzana podczas przewijania w obu kierunkach, polecam przeczytać
Internet zmienia się każdego dnia. Niektóre technologie i metody pojawiają się, inne znikają. Z tego powodu projektanci stron internetowych i programiści front-end muszą być na bieżąco z najnowszymi trendami w projektowaniu stron internetowych. Przewijanie paralaksy, stałe nagłówki, płaska konstrukcja, witryny jednostronicowe i animacja CSS to jedne z najgorętszych obecnie trendów internetowych.
W tym samouczku przyjrzymy się tworzeniu animacji i efektów przewijania przy użyciu CSS i jQuery.
Cztery efekty, które stworzymy, można zobaczyć na tej stronie.
Uwaga: kod użyty w tym samouczku można ulepszyć, buforując obiekty i używając animacji CSS zamiast jQuery " animować()", ale dla uproszczenia skupimy się najpierw na pomyśle.
Czym są animacje i efekty podczas przewijania strony?Taka animacja i efekty to nowa, coraz popularniejsza metoda, która daje programistom front-endowym możliwość tworzenia multimedialnych i interaktywnych projektów webowych. Gdy użytkownik przewija stronę w dół, programiści mogą łatwo manipulować obiektami za pomocą CSS i jQuery.
Aby wykryć, czy użytkownik przewija stronę w dół, używamy zdarzenia scroll() jQuery.
Kiedy już wiemy, że użytkownik przewija stronę, możemy uzyskać pionowe położenie paska przewijania za pomocą metody scrollTop() i zastosować pożądane efekty:
if ($(this ) .scrollTop () > 0 ) (
// utwórz efekty i animację
}
}
)
;
Jeśli interesuje nas tworzenie efektów adaptacyjnych (optymalizowanych dla różnych rozdzielczości ekranu), to musimy zdefiniować następujące właściwości:
- Nieruchomość szerokość- szerokość okna przeglądarki.
- Nieruchomość wysokość- wysokość okna przeglądarki.
Bez zdefiniowania tych właściwości stworzymy efekty, które są „statyczne” i nie będą działać poprawnie, jeśli użytkownik zmieni rozmiar okna w poziomie lub w pionie.
Wartości tych właściwości możemy łatwo uzyskać za pomocą metod szerokość() i wysokość().
Poniższy fragment kodu pokazuje wszystkie niezbędne kontrole, które musimy wziąć pod uwagę, aby utworzyć efekty przewijania strony.
$(okno).scroll(funkcja() (
if ($(this).width()<
992
)
{
if ($(this).height() 1000) (
// utwórz efekty
}
}
}
}
)
;
Teraz, gdy omówiliśmy podstawy tworzenia tych efektów, zobaczmy je w akcji na czterech różnych przykładach.
Przykład 1Efekt ten jest wyzwalany, gdy górna pozycja paska przewijania okna przekracza 60 pikseli. W tym przypadku wykonywany jest następujący fragment kodu:
if ($(okno).scrollTop() > 60) (
$(.banner h2") .css („wyświetlanie”, „brak” );
$(.banner .info") .css („wyświetlanie”, „blok” );
) w przeciwnym razie (
$(.banner h2") .css („wyświetlanie”, „blok” );
$(.banner .info") .css („wyświetlanie”, „brak” );
}
Powyższy kod ukrywa element podrzędny h2 wewnątrz elementu z klasą .transparent i pokazuje swój element podrzędny .info, który pierwotnie był ukryty.
Kod ten można również zapisać w następujący sposób:
if ($(okno).scrollTop() > 60) (
$(.baner h2") .hide () ;
$(.baner .info" ) .show () ;
) w przeciwnym razie (
$(".baner h2") .show () ;
$(.baner .info" ) .hide () ;
}
Poniższy efekt zależy nie tylko od górnej pozycji paska przewijania przeglądarki, ale także od szerokości okna. W szczególności przyjmujemy następujące założenia:
Powyższe założenia zostały zaimplementowane w poniższym fragmencie kodu:
if ($(okno).width() 600 ) (
pierwszaAnimacja() ;
}
) else if ($(okno).width() > 480 ) (
// animacja do wykonania
pierwszaAnimacja() ;
}
) w przeciwnym razie (
if ($(okno).scrollTop() > 450 ) (
// animacja do wykonania
pierwszaAnimacja() ;
}
}
Kod zawierający animację, która zostanie wykonana, jest następujący:
var pierwszaAnimacja = funkcja() (
$(.clients .clients-info") .each (
funkcjonować()(
$(to) .delay (500 ) .animate ((
krycie: 1,
wysokość: "180" ,
szerokość: "250"
}
,
2000
)
;
}
)
;
}
;
Powyższy kod animuje właściwości krycia, wysokości i szerokości elementu .klient-info.
Przykład nr 3Trzeci efekt zależy również od górnej pozycji paska przewijania okna i szerokości okna. W szczególności przyjmujemy następujące założenia:
A oto kod:
if ($(okno).width() 1750 ) (
drugaAnimacja() ;
}
) else if ($(okno).width() > 549 && amp; $(okno).width() 1150 ) (
drugaAnimacja() ;
}
) w przeciwnym razie (
if ($(okno).scrollTop() > 850 ) (
drugaAnimacja() ;
}
}
Kod zawierający animację jest następujący:
var drugaAnimacja = funkcja () (
$(".metoda:eq(0)" ) .delay (1000 ) .animate ((
nieprzezroczystość: 1
) , "powolny" ,
funkcjonować()(
}
)
;
$(".metoda:eq(1)" ) .delay (2000 ) .animate ((
nieprzezroczystość: 1
) , "powolny" ,
funkcjonować()(
$(this) .find("h4" ) .css("kolor-tła" , "#b5c3d5" ) ;
}
)
;
$(".metoda:eq(2)" ) .delay (3000 ) .animate ((
nieprzezroczystość: 1
) , "powolny" ,
funkcjonować()(
$(this) .find("h4" ) .css("kolor-tła" , "#b5c3d5" ) ;
}
)
;
$(".metoda:eq(3)" ) .delay (4000 ) .animate ((
nieprzezroczystość: 1
) , "powolny" ,
funkcjonować()(
$(this) .find("h4" ) .css("kolor-tła" , "#b5c3d5" ) ;
}
)
;
}
;
Powyższy kod animuje właściwość sekwencyjnie nieprzezroczystość dla elementów .metoda a następnie zmienia kolor tła elementów podrzędnych h4.
Przykład nr 4Efekt ten zależy również od górnej pozycji paska przewijania i szerokości okna. Bardziej szczegółowo:
Jest to zaimplementowane za pomocą następującego kodu:
if ($(okno).width() 3500 ) (
trzeciaAnimacja() ;
}
) else if ($(okno).width() > 549 && amp; $(okno).width() 2200 ) (
trzeciaAnimacja() ;
}
) w przeciwnym razie (
if ($(okno).scrollTop () > 1600 ) (
trzeciaAnimacja() ;
}
}
Kod animacji jest następujący:
.opóźnienie (2000) .animacja ((krycie: 1,
po prawej: 0
), "powolny"
) ;
$(.blogs") .find ("przycisk") .delay (2500 ) .animate ((
krycie: 1,
dół: 0
), "powolny"
)
;
}
;
Powyższy kod sekwencyjnie animuje właściwości krycia, left, Right i Bottom elementów w P, IMG, PRZYCISK.
WniosekMam nadzieję, że cztery pokazane tutaj przykłady pomogą Ci zrozumieć, w jaki sposób można tworzyć różne efekty i animacje podczas przewijania strony.
Jeśli masz jakieś pytania, zalecamy skorzystanie z naszego
Jestem pewien, że natknąłeś się na strony, na których podczas przewijania strony dodatkowa zawartość, a mianowicie bloki, są ładowane pięknymi i płynnymi efektami. Okazuje się, że jest to bardzo proste przy pomocy prostego skryptu i kilku reguł CSS. Demo będzie miało kilka efektów ładowania, które możesz wybrać dla swojej witryny.
Zobaczmy teraz jak wygląda struktura załadowanych bloków w HTML:
Jak widać, kod jest bardzo prosty.
CSSMamy zatem stronę, na której znajduje się kilka bloków, która powinna ładować się płynnie podczas przewijania w dół. Teraz musimy wymyślić 2 klasy CSS, które zadziałają, jeśli jeden z bloków znajdzie się w widocznym polu przeglądarki:
Ukryty( nieprzezroczystość:0; ) .widoczny( nieprzezroczystość:1; )
jQueryTeraz musimy dodać skrypt, który uruchomi cały ten prosty silnik. To właśnie w tym kodzie wykorzystamy klasę odpowiedzialną za jeden z wielu typów animacji w Animate.css, będzie to np. fadeIn, więc kod będzie wyglądał tak:
JQuery(dokument).ready(function() ( jQuery(.post").addClass("ukryty").viewportChecker(( classToAdd: "widoczne animowane zanikanie", przesunięcie: 100 )); ));
Skrypt ten działa w następujący sposób: jeśli nasz blok znajduje się w niewidocznym polu przeglądarki, zostaje mu przypisana klasa ukryta, która ukrywa nasz blok, gdy nasz blok właśnie dotrze do widocznej części okna, natychmiast zostaje mu przypisana klasa widoczna wzdłuż z klasą z Animate.css, która dodaje piękną animację podczas pojawiania się. To cały sekret :)
Mam nadzieję, że podobała Ci się ta lekcja. Do widzenia:)
Cześć wszystkim. Niektórzy z Was czytali już artykuł na temat... Wielu osobom spodobał się ten materiał, ale faktem jest, że animacja odtwarzała się tylko podczas przewijania w dół. Wiele osób, podobnie jak ja, chciało, aby ta animacja była odtwarzana podczas przewijania w dół i w górę. Przykładowo podczas przewijania w dół jakiś element pojawiał się płynnie, a przy dalszym przewijaniu również płynnie znikał. A w przeciwnym kierunku wszystko działo się w ten sam sposób.
Mówiłem już, że nie znam dobrze JavaScriptu (w trakcie nauki), a sam nie byłem w stanie zaimplementować tej funkcjonalności. Ale na szczęście znalazłem gotowe rozwiązanie na innej stronie. Został wynaleziony przez Artema Anasheva, jednego z autorów bloga loftblog.ru. Tam materiał na ten temat jest prezentowany wyłącznie w formacie wideo, ale postaram się wszystko opisać tekstem i zamieścić moje źródło. Jeśli wygodniej jest Ci obejrzeć materiał wideo, to na końcu artykułu możesz przeczytać oryginał :)
Podobnie jak ostatnim razem pobieramy i podłączamy bibliotekę animate.css, w której możesz także wybrać rodzaj animacji w wygodnym projekcie wizualnym:
W tym artykule będę korzystał z niezoptymalizowanej wersji biblioteki annimate.css, jednak polecam skorzystać z pliku animate.min.css, pobranego z githuba. Ponieważ ta wersja waży mniej, a zatem będzie ładować się szybciej.
Umieściłem go w folderze „css”, więc ostatecznie była to następująca ścieżka:
Teraz musimy podłączyć jquery i wtyczkę waypointów, co pomoże nam przewijać animację w obu kierunkach:
Możesz pobrać Waypointy z tego linku lub pobrać je ze źródła (jak również inne pliki niezbędne do wdrożenia tego efektu).
Podobnie jak w poniższym filmie proponuję wykonać taką konstrukcję, aby trzy elementy umieszczone jeden po drugim (w rzędzie) płynnie pojawiały się z lekkim opóźnieniem, a następnie również płynnie znikały. Stworzyłem mały układ z dużymi ikonami, które będą animowane:
Uwaga! Musisz przetestować efekt na serwerze lokalnym lub zewnętrznym. W przeciwnym razie animacja nie zostanie odtworzona.
Animacja podczas przewijania w obu kierunkach - znaczniki HTML
Stworzyłem klasę „pudełkową”, w której będę przechowywać moje obrazy.
Nie ma tu nic specjalnego, po prostu ustawiam szerokość i wysokość obszaru, w którym będę przechowywać ikony. Robię wcięcie w lewo o wielkości 50 pikseli i wyrównuję je do lewej. Blokada ta jest czysto indywidualna i możesz ją zignorować. Po prostu te parametry najlepiej pasowały do mojego układu. Zacząć robić.
Aby animacja się odtworzyła należy dodać animowaną klasę. Jego właściwości są określone w bibliotece animate.css, którą zamieściliśmy wcześniej.
Aby nasze ikony były w początkowej fazie całkowicie przezroczyste, potrzebna jest klasa boxHidded. Wynika to z logiki naszego scenariusza. Przecież ikony powinny pojawiać się płynnie podczas przewijania, a potem także płynnie znikać.
BoxHidded( widoczność: ukryta; /* Spraw, aby ikony były całkowicie przezroczyste */ ) .fadeInUp, .fadeOutDown( widoczność: widoczne; /* Spraw, aby ikony były całkowicie nieprzezroczyste */ )
Klasy opóźnienia-05s i opóźnienia-1s odpowiadają za opóźnienie odtwarzania animacji odpowiednio o 0,5 sekundy i 1 sekundę. Przyjrzyjmy się właściwościom nadawanym tym klasom:
Delay-05s( -webkit-animation-delay: .5s; -moz-animation-delay: .5s; -o-animation-delay: .5s; animacja-delay: .5s; ) .delay-1s( -webkit- opóźnienie animacji: 1s; -moz-opóźnienie animacji: 1s;
Na tym kończymy pracę z arkuszem stylów, pozostaje nam jedynie umieścić poniższy skrypt przed zamykającym tagiem body
$(.box") .waypoint(function(dir) ( if (dir === "down") $(this) .removeClass("fadeOutDown") .addClass("fadeInUp"); else $(this) . usuńClass("fadeInUp") .addClass("fadeOutDown"); ( offset: "80%" )) .waypoint(function(dir) ( if (dir === "down") $(this) .removeClass( "fadeInUp ") .addClass("fadeOutDown"); else $(this) .removeClass("fadeOutDown") .addClass("fadeInUp" ), ( przesunięcie: -50 ))
Zwróć uwagę na linie:
RemoveClass("fadeOutDown") .addClass("fadeInUp");
W nich dodajemy i usuwamy klasy odpowiedzialne za style animacji, które będą odtwarzane podczas przewijania. W tym przypadku fadeInUp i fadeOutDown. Możesz wybrać dowolne typy animacji prezentowane na oficjalnej stronie biblioteki animate.css.
Aby zmienić moment, w którym animacja powinna rozpocząć odtwarzanie, zmień wartość przesunięcia. W tym przypadku jest ono ustawione na 80%. O ile rozumiem, jest to odległość od górnego punktu ekranu do animowanego bloku.
Kilka razy pytano mnie, czy można ustawić odległość do początku animacji w procentach, ponieważ każdy ma inny monitor. W poprzedniej wersji tego efektu nie można było tego zrobić procentowo. To spowodowało pewne problemy.
W tym przypadku problem ten został rozwiązany. Pierwszy offset odpowiada za uruchomienie animacji. A drugi dotyczy zniknięcia bloków. Oznacza to, że 50 pikseli animowanej treści staje się niewidocznych. Spróbuj! Przykład pomoże Ci wszystko zrozumieć.
dimadv7
// echo get_the_post_thumbnail(get_the_ID(), "powiązana miniatura"); // wyświetlić rozmiar mojej miniatury?>
Pozdrowienia. Dziś dowiemy się jak animować elementy na stronie i wyświetlać animację podczas przewijania strony. W tym samouczku będziemy pracować z bibliotekami animate.css i wow.js. Ta lekcja została również nagrana w formie wideo, a blog ma teraz kanał na YouTube. Dlatego nowym lekcjom będą towarzyszyć materiały wideo. Iść!
Na początek przygotowałem stronę HTML z prostymi elementami (nagłówkami i obrazkami), które będziemy animować. Oto kod HTML strony:
Kierunek jeden 
Nagłówek drugi 
Nagłówek trzeci 
Nagłówek czwarty 
Nagłówek piąty 
I prosty znacznik CSS:
Sekcja ( szerokość: 80%; wyrównanie tekstu: środek; pozycja: względna; margines: 0 auto; górne dopełnienie: 50px; dopełnienie-dół: 50px; ) sekcja h1 (rozmiar czcionki: 32px; waga czcionki: pogrubiona; margines: 20px 0 50px; transformacja tekstu: wielkie litery; sekcja .col ( szerokość: 30%; margines: 0 1% 50px; wyświetlacz: blok inline; )
Jak widać, wszystko jest naprawdę bardzo proste.
Dołączamy plik animate.css. Animowanie elementówPobierz bibliotekę animate.css. Umieściłem plik animate.min.css w folderze /libs obok strony HTML. Łączymy animate.min.css jako zwykły plik css, pomiędzy plikami .
Teraz należy dodać niezbędne klasy stylu CSS do elementów, które mają być animowane. Należy dodać klasę animowaną oraz klasę z nazwą animacji, np. swing. Oto, co otrzymasz dla nagłówka h1:
Kierunek jeden
Teraz ten nagłówek odtworzy określoną animację podczas ładowania strony. W ten sam sposób ustawimy animację dla pozostałych elementów:
Kierunek jeden
Dodaliśmy animowane klasy do nagłówka i każdej kolumny. Teraz po załadowaniu strony zostanie odtworzona animacja. Podobnie możesz dodać animację do innych elementów strony. Ale jest mały problem, cała animacja zostanie odtworzona po załadowaniu strony. A podczas przewijania do elementów znajdujących się poza pierwszym ekranem nie zobaczymy już animacji, ponieważ miała ona już miejsce w momencie ładowania strony. Aby animacja była wyświetlana tylko wtedy, gdy element jest widoczny, należy dołączyć bibliotekę wow.js
Podłączenie biblioteki wow.js do animacji podczas przewijania stronyBiblioteka wow.js została specjalnie stworzona do współpracy z biblioteką animate.css. Działa to w ten sposób, że animacja elementów nie działa w momencie załadowania strony, ale w momencie, gdy te elementy się pojawią, czyli podczas przewijania strony.
Aby połączyć bibliotekę umieściłem plik wow.min.js w pgre/libs obok strony i podłączyłem go jak zwykły skrypt js. Ponadto po podłączeniu należy zainicjować tę bibliotekę. Powinieneś połączyć wow.js po podłączeniu jquery. To konieczność.
nowy WOW().init();
Teraz, gdy biblioteka jest już podłączona, przejdźmy do edycji kodu. Aby zastosować działanie wow.js do elementów, musisz dodać klasę wow. Nawiasem mówiąc, możesz zastąpić nim animowaną klasę. Okazuje się, że tak.
Kierunek jeden
Kierunek jeden
Po zmianie animacji na wow dla wszystkich elementów z animacją, zobaczymy, że teraz animacja elementów jest uruchamiana podczas przewijania strony, a nie podczas jej ładowania.
Biblioteka wow.js zawiera także dodatkowe ustawienia. Można się z nimi zapoznać w dokumentacji na stronie internetowej biblioteki. Na przykład możesz dodać opóźnienie do animacji. Jest ustawiany przez parametr HTML5 data-wow-delay="1s". Zamiast 1s możesz określić własną wartość opóźnienia. Ustawiłem opóźnienie dla elementów pierwszej sekcji tak, aby animacja każdego elementu rozpoczynała się po poprzednim i stało się tak:
Kierunek jeden
To wszystko. Poniżej możesz obejrzeć wideo z tej lekcji, znaleźć linki do wykorzystanych bibliotek, zobaczyć gotowy wynik tego, co się stało i pobrać pliki - archiwum z gotowym układem oraz szablon do ukończenia tej lekcji.
Referencje do lekcji
Biblioteka Animate.css: