Fantazyjne animacje polegające na najeżdżaniu kursorem na obrazy, które wymagały obsługi JavaScript. Już nie! CSS jest tutaj, aby ożywić Twoje miniatury i galerie.
Efekty najechania na obraz mogą dodać dodatkowy poziom dopracowania Twojej witryny. Tworzą płynny efekt, uprzyjemniając poruszanie się po galeriach zdjęć czy karuzelach. Najlepsze jest to, że możesz tworzyć te efekty za pomocą samego CSS i bez JavaScript.
Możesz tworzyć różne style animacji na swoich obrazach. Obejmują one rozmycie lub powiększenie tła, zanikanie lub przesuwanie tekstu oraz zmianę koloru tła.
Tworzenie HTML dla obrazów
Zacznij od utworzenia indeks.html plik w pustym folderze na komputerze, a następnie otwórz plik za pomocą edytora tekstu. Wewnątrz pliku utwórz szkielet HTML i dodaj następujące znaczniki wewnątrz otwierającego i zamykającego tagu treści:
<dzklasa="siatka">
<dzklasa=„opakowanie obrazu”>
<imgklasa="plama"źródło=" https://picsum.photos/500?random=1"alt=""><dzklasa=„zanikanie treści”>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reklama Soluta
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
dz>
dz><dzklasa=„opakowanie obrazu”>
<imgklasa=„rozmycie w powiększeniu”źródło=" https://picsum.photos/500?random=2"alt=""><dzklasa=„zanikanie treści”>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reklama Soluta
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
dz>
dz><dzklasa=„opakowanie obrazu”>
<imgklasa="plama"źródło=" https://picsum.photos/500?random=3"alt=""><dzklasa=„przesuń zawartość w lewo”>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reklama Soluta
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
dz>
dz><dzklasa=„opakowanie obrazu”>
<imgklasa="szary"źródło=" https://picsum.photos/500?random=3"alt="">
<dzklasa=„przesuń zawartość w lewo”>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reklama Soluta
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
dz>
dz>
dz>
To jest kontener siatki z czterema opakowaniami obrazu. Elementy div z opakowanie obrazu class służą jako opakowanie dla obrazu i odpowiadającego mu tekstu. Do obrazu i zawartości każdej sekcji dodano unikalny zestaw klas.
Wewnątrz arkusza stylów będziesz kieruj te elementy według ich nazw klas i zastosuj różne efekty stylizacji i animacji. Tekst nie będzie domyślnie wyświetlany; pokażesz go tylko wtedy, gdy najedziesz kursorem na opakowanie obrazu, a obraz będzie podlegał różnym efektom w tym procesie.
Dodanie podstawowego CSS
Po utworzeniu kodu HTML nadszedł czas, aby nadać mu styl za pomocą CSS. Stwórz styl.css plik i łącze do tego arkusza stylów z pliku HTML w pliku Sekcja:
<połączyćrel=„arkusz stylów”href="styl.css">Wewnątrz twojego styl.css plik, pierwszą rzeczą, którą musisz zrobić, to zresetować margines na ciele do zera i ustawić dolny margines:
ciało {
margines: 0;
margines-dolny: 20Rem;
}Następnie musisz zamienić najbardziej zewnętrzny pojemnik w Siatka CSS, której możesz użyć do ułożenia elementów w dwóch wymiarach. Poniższy kod tworzy siatkę z odpowiednią liczbą pasujących kolumn lub wierszy. Minimalny rozmiar każdej kolumny to 300px, a maksymalny to 1 ułamek kontenera:
.siatka {
wyświetlacz: siatka;
kolumny szablonu siatki: powtarzać(automatyczne dopasowanie, minimum maksimum(300piks, 1fr));
}Ponieważ chcesz ustawić tekst względem jego pojemnika, musisz ustawić pozycję względem opakowania obrazu:
.image-wrapper {
pozycja: względny;
przelewowy: ukryty;
}
Następnym krokiem jest stylizacja obrazu. Wyświetl obraz jako element blokowy, spraw, aby obejmował szerokość całego kontenera i umieść go dopasowanym na środku kontenera:
.image-wrapper > img {
wyświetlacz: blok;
szerokość: 100%;
współczynnik proporcji: 1 / 1;
dopasowanie do obiektu: okładka;
pozycja obiektu: Centrum;
}
Jeśli chodzi o tekst, umieść go centralnie i nadaj przezroczystemu, jasnoszaremu kolorowi tła:
.image-wrapper > .treść {
pozycja: absolutny;
wstawka: 0;
rozmiar czcionki: 2Rem;
wyściółka: 1Rem;
tło: rgba(255, 255, 255, .4);
wyświetlacz: przewód;
wyrównaj elementy: Centrum;
uzasadnij treść: Centrum;
}
Zapisz plik CSS i otwórz indeks.html w Twojej przeglądarce. Powinieneś znaleźć stronę podobną do tej na obrazku poniżej.
Ustawianie przejścia na obrazach i tekstach
Teraz, gdy zastosowałeś podstawowe style do obrazów, następnym krokiem jest dodanie do nich animacji. Zacznij od dodania przejścia do obu obrazów i odpowiadającego im tekstu:
.image-wrapper > img,
.image-wrapper > .treść {
przemiana: 200SMłatwość wsiadania;
}
Oznacza to, że wszystkie efekty przejścia (tj. zanikanie, powiększanie i rozmycie) będą trwały 200 milisekund i będą miały taką samą krzywą czasową.
Animacja przenikania i rozmycia
Pierwszy styl animacji zanika w tekście. Po najechaniu kursorem na określone opakowanie obrazu zawartość, która ma znikać class będzie miał zastosowany ten efekt (animacja pojawiania się i zanikania). Osiągasz to, ustawiając krycie na zero i zmieniając je na 1, gdy mysz unosi się nad określonym opakowaniem obrazu:
.image-wrapper > .treść.znikać {
nieprzezroczystość: 0;
}
.image-wrapper:unosić się > .treść.znikać {
nieprzezroczystość: 1;
}
Jeśli zapiszesz plik i sprawdzisz przeglądarkę, zobaczysz efekty animacji narastania. Ale możesz również zauważyć, że tekst jest trochę trudny do odczytania (jeśli obraz jest ostry i ma duży kontrast). Przypomnij sobie, że wszystkie obrazy mają również nazwę klasy plama. Ma to na celu rozmycie obrazów w celu dodania bardzo potrzebnego kontrastu między nimi a tekstem:
opakowanie obrazu:unosić się > img.plama {
filtr: plama(5piks)
}
Teraz, gdy najedziesz kursorem na obraz, zobaczysz, że po prostu się rozmyje. Możesz zwiększyć wartość piksela, aby rozmycie było wyraźniejsze na obrazach, zwiększając w ten sposób kontrast między nim a tekstem.
Dodawanie innych efektów
Inne efekty to przesuwanie tekstu od lewej strony, powiększanie obrazu i dodawanie skali szarości do obrazu. Oto kod umożliwiający osiągnięcie wszystkich trzech efektów:
.image-wrapper > .treść.przesuń w lewo {
przekształcać: przetłumaczX(100%)
}.image-wrapper:unosić się > .treść.przesuń w lewo {
przekształcać: przetłumaczX(0%)
}.image-wrapper:unosić się > img.szary {
filtr: skala szarości(1)
}.image-wrapper:unosić się > img.plama {
filtr: plama(5piks)
}
.image-wrapper:unosić się > img.Powiększenie {
przekształcać: skala(1.1)
}
Zapisz plik, a następnie przejdź do przeglądarki i najedź kursorem na każdy obraz. Powinieneś zobaczyć różne efekty w akcji.
Aby uzupełnić efekty wsuwania, możesz utworzyć trzy kolejne opakowania obrazu, z których każdy zawiera obraz i tekst. Każdy fragment tekstu miałby nazwę klasy wślizgiwać się, zjechać w dół, Lub lekko w prawo. Następnie przekazałbyś odpowiednią wartość piksel, em lub rem, w środku przekształcać() aby utworzyć wszystkie trzy efekty.
Siatka CSS i Flexbox
CSS Grid i Flexbox to dwie funkcje, które pozwalają tworzyć fantastyczne układy dla Twojej witryny. Możesz z łatwością stworzyć praktycznie dowolny układ i dostosować wiersze i kolumny do własnych upodobań. Kolumny również będą domyślnie responsywne. Nauczenie się, kiedy używać jednego zamiast drugiego, pomoże ci zostać jednym procentem najlepszych programistów CSS.
