Jak stworzyć efekt animacji zanikania z JavaScript i CSS

Animacje, przejścia i efekty 3D są niczym innym jak przyciągnięciem wzroków. Ilekroć budujesz swoją stronę internetową lub projekt, nie chcesz, aby zgubiła się w klastrze milionów stron internetowych dostępnych w Internecie. Chcesz, żeby się wyróżniało, chcesz, aby rozbawił swoich użytkowników i przechowywał w podświadomości. Aby Twoje strony internetowe są bardziej intrygujące, musisz wykorzystać różne animacje i efekty przejścia strony.

Jednym z popularnych i niezwykle interesujących efektów animacji jest Fade-in I Zanik animacja, którą można zaimplementować za pomocą JavaScript i HTML \ CSS.

Krok 1: Skonfiguruj stronę podstawową

Utwórz nowy HTML w preferowanym edytorze kodu, utwórz skrypt.plik JS i styl.Plik CSS, jak pokazano:

W pliku HTML połącz plik CSS i skrypt.plik JS za pomocą następujących wierszy przed tagiem nadwozia:

Teraz zamierzamy zaimplementować znikniętą animację na obrazie, a dla obrazu będziemy używać obrazu bez królestwa od Unsplash. Możesz utworzyć znacznik obrazu i przycisk, którego użyjemy, aby zniknąć i zniknąć obraz za pomocą następujących wierszy:

id = "image" src = "https: // obrazy.Unsplash.COM/Photo-1640273837947-EA830D50C191?IXLIB = RB-1.2.1 i ixid = MnWXMJA3FDB8MHXWAG90BY1WYWDLFHX8FGVUFDB8FHX8 & AUTO = FORMAT & FITE = Crop & W = 2072 & Q = 80 "
alt = ""
/>


Efekt zanikania

Zauważ, że podaliśmy identyfikator "Obraz" do obrazu i identyfikatora „MyButton” do przycisku, który tworzymy.

Ponieważ obraz jest dość duży, ustawimy określoną wysokość i szerokość w pliku CSS przy użyciu następujących wierszy:

#obraz
Wysokość: 200px;
szerokość: 200px;

Twoja strona powinna wyglądać tak:

Mamy nasz obraz na środku ekranu i bezpośrednio pod obrazem, który mamy przycisk.

Krok 2: Modyfikacja pliku CSS

Istnieje wiele sposobów na wdrożenie konkretnej animacji za pomocą CSS i JavaScript, ale w tym konkretnym poście będziemy bawić się klasami i atrybutem krycia CSS. Zmodyfikuj swój plik CSS za pomocą następujących wierszy:

#obraz
Krycie: 1;
przejście: krycie 0.3S łatwy;
Wysokość: 200px;
szerokość: 200px;

#obraz.znikać
Krycie: 0;

Aby wyjaśnić, co robimy w powyższych wierszach: po prostu stawiamy nieprzezroczystość obrazu 100% Na początku i jeśli obraz ma aktywną klasę "znikać" wówczas krycie zmieni się na 0%. Ale ta zmiana krycia nastąpi w przypadku, aby stworzyć efekt podobny do animacji 0.3s.

Teraz musimy tylko napisać skrypt, który przełączy klasę "Znikać" z obrazu

Krok 3: Klasa przełączania z JavaScript

W skrypcie.plik JS, najpierw przyniesiemy element obrazu i przechowywać go w zmiennej, a następnie zamierzamy przełączyć klasę, ale wszystko to powinno być wykonane po naciśnięciu przycisku. Dołącz następujące wiersze w pliku skryptu:

Niech Image = dokument.getElementById („obraz”);
dokument.GetElementById („MyButton”).onClick = function ()
obraz.Lista klas.Toggle („Fade”);
;

W związku z tym powinniśmy być w stanie wdrożyć animację zanikającą i zniknięte przejście.

Krok 4: Testowanie naszej animacji

Ostatnim krokiem jest uruchomienie pliku HTML na naszym komputerze lokalnym i przetestowanie animacji po naciśnięciu przycisku, należy zobaczyć następujące dane wyjściowe:

Jak widać w powyższym gifie, że nasza animacja działa idealnie.

Wniosek

Animacje można łatwo zaimplementować za pomocą JavaScript wraz z HTML i CSS, aby strony internetowe wyglądały na znacznie bardziej atrakcyjne i przyciągające wzrok. W tym poście nauczyliśmy się, jak wykonać zniknięcie i zanikniętą animację na elemencie HTML, przypisując różne właściwości CSS na klasie elementu, a następnie przełączając klasy za pomocą JavaScript.