Jak tworzyć tekst usterki i efekty obrazu w CSS

W tym samouczku pokażemy Ci, jak utworzyć efekt tekstu usterki. Efekty specjalne i animacje mogą pomóc w stronę stron internetowych wyróżniać się, tworząc natychmiastowy wpływ na użytkownik, zanim miały okazję dostać się do czytania głównej zawartości. Jeśli Twoja strona główna musi wow odwiedzających, możesz tworzyć tony różnych efektów, używając tylko CSS.

Nasz proces tworzenia tekstu usterki tutaj jest w rzeczywistości dość podobny do pracy z oprogramowaniem animacji. Umieścimy klatki kluczowe w określonych punktach i użyjemy ich do kontrolowania działania. Różnica w ramach klatek kluczowych w CSS jest to, że są napisane jako procenty na osi czasu animacji w kodzie. To nie jest w pobliżu tak trudnego, jak brzmi - gdy spróbujesz, jest stosunkowo prosty, aby osiągnąć dobre wyniki. Chcesz dobre wyniki bez kodowania? Spróbuj A. Kreator strony internetowej . I trzymaj swoją witrynę działa płynnie po prawej stronie hosting usługa.

W samouczku użyto niewielkiej ilości javascript - aby usunąć ekran ładowania po obciążeniu obrazów na stronie - ale głównym skupieniem tutaj jest Animacja CSS. . Użyjemy również Siatka CSS. Aby ustawić elementy na ekranie.

• Pobierz pliki samouczka Z Filesilo (DARMOWE, wymagane logowanie)

01. Ustaw się

Zacząć, otwórz początek folder z Pliki projektu Wewnątrz edytora kodu. Otworzyć index.html. Strona, która zawiera tylko stronę szkieletu Bareceon HTML. W sekcji głowy czcionki wymagają połączenia, aby wyświetla się projektowanie poprawnie. Dodaj link stylu do czcionek.

<link href="https://fonts.googleapis.com/css?family=IM+Fell+English|Playfair+Display:900"rel="stylesheet">

02. Połącz CSS

Podstawowy układ w CSS został uruchomiony w Site.csss. Plik, ale wszystkie ważne części odnoszące się do efektu usterki zostaną dodane później. W sekcji głowy dokumentu łączy CSS, dzięki czemu podstawowa konstrukcja strony jest na miejscu.

 łącznik rel = "arkusz stylowy" Type = "Tekst / CSS"
href = "css / site.css" / & gt; 

03. Ustaw ekran ładowania

Teraz przejdź do części ciała strony. Zawiera wszystkie widoczne elementy strony, która pojawiają się w przeglądarce. Tutaj dodaj w Div, który będzie przechowywać "ekran preloader", aż na stronie załadowano wszystko na stronie. Spowoduje to wyświetlenie logo na środku strony.

 & LT; DIV ID = "Loader" Class = "Loading" & GT;
       & lt; div Class = "Loading-Logo" & GT; & LT; IMG SRC = "img / logo.Svg" Class = "Logo" & GT; & LT;
   & lt; / div & gt; 

04. Dodaj pasek nagłówka

Wzdłuż góry ekranu będzie mały nagłówek zawierający logo SVG dla witryny po lewej stronie z nagłówkiem tekstowym. Następnie po prawej stronie ekranu menu inline będzie na miejscu dla łatwej nawigacji. Struktura kodu tutaj dodaje te elementy na stronie.

05. Dodaj obrazy

Teraz następuje sekcja zawiera kilka wersji tego samego obrazu w glitchit. klasa. Co to zrobi, ma różne części tych obrazów włączonych i wyłączanych w różnych czasach, aby dać efekt usterki. Poniżej znajduje się tekst, który usiadł na szczycie obrazów.

& lt; div Class = "Content" & GT;
       & lt; div class = "glitch" & gt;
            & lt; div Class = "Glitchit" & GT; & LT;
            & lt; div Class = "Glitchit" & GT; & LT;
            & lt; div Class = "Glitchit" & GT; & LT;
            & lt; div Class = "Glitchit" & GT; & LT;
            & lt; div Class = "Glitchit" & GT; & LT;
       & lt; / div & gt;
       & lt; div Class = "Speedection" & GT;
       & LT; H2 Class = "ContentTitle" & GT; Hacker & LT; Span & GT; Con & LT; / H2 & GT;
          & lt; p Class = "ContentText" & GT; Dodaj opis 

06. Wyzwalaj efekt tekstu usterki

Na końcu zawartości ciała umieszczono znaczniki JavaScript. Wszystko to robi sprawdzić, czy strona załadowana, a następnie usuwa ekran ładowania, który z kolei uruchamia animację efektu usterki, aby rozpocząć, dodając klasę do ciała, aby wpłynąć na odpowiednie sekcje usterki.

 script & gt;
       Var Loader = Document.getElementByid ("Loader");
       window.addeventlistener ("ładunek",
Funkcja (zdarzenie) {
           loader.classlist.
usuń ("ładowanie");
           loader.classlist.add ("załadowany");
           Dokument.Body.Classlist.
Dodaj ("Imgloaded");
       });
& lt; / script & gt; 

07. Ustaw zmienne CSS

Zapisz stronę teraz i przejdź do Site.csss. Plik w folderze CSS. Jest tutaj już kod, ale tuż nad każdym innym kodem Dodaj w zmiennych poniżej. Te zmienne CSS będą przechowywać kolory i rozmiary, które będą używane później w projekcie.

 Ciało {
   - Kolor-tekst: #fff;
   - Kolor-bg: # 000;
   - Kolor-link: # 555;
   - Kolor-link-hover: # 98fadf;
   - Kolor-info: # F7CFB9;
   - Szerokość: 100vw;
   - oliwitka: 100vh;
   - Gap-poziomy: 10px;
   - Gap-pionowy: 5px;
   - Time-Anim: 4s;
   --Delay-anim: 2s; 

08. Eksperyment ze zmiennymi ustawieniami

Jak zobaczysz, zmienne te są przypisane do tagu ciała, dzięki czemu mogą być używane przez dowolną znacznik na stronie wewnątrz korpusu, który jest zasadniczo wszystkie widoczne strony. Tutaj trybów przezroczystości i mieszania są konfigurowane dla różnych obrazów. Jest pięć zdjęć i można eksperymentować z tymi ustawieniami, aby uzyskać różne wyniki.

 --Blend-Mode-1: Brak;
   --Blend-Mode-2: Nakładka;
   --Blend-Mode-3: Brak;
   --Blend-Mode-4: Brak;
   --Blend-Mode-5: Nakładka;
   --Blend-color-1: przezroczysty;
   --blend-color-2: # 7d948e;
   --Blend-color-3: przezroczysty;
   --Blend-color-4: przezroczysty;
   --Blend-color-5: # AF4949;
} 

09. Wypełnij ekran obrazami

Aby utrzymać kod starannie, przewiń do komentarza, który oznaczają kroki 9 do 13 w pliku CSS, dodając ten kod. Tutaj kod usterki pozycjonuje div. Zawierając wszystkie obrazy, aby wypełnić pełny ekran i być w absolutnie umieszczony w lewym górnym rogu ekranu. UWAGA Dostaje jego szerokość i wysokość z zmiennych CSS.

 .glitch
{
   pozycja: absolutna;
   Top: 0;
   Po lewej: 0;
   Szerokość: var (- szerokość usterki);
   Wysokość: Var (- Wysokość usterki);
   Przepełnienie: Ukryte;
} 

10. Dostosuj pozycjonowanie obrazu

Ponieważ efekt usterki składa się z kopii tego samego obrazu, ten kod pozycjonuje każdy div. Na stronie i czyni go nieco większym niż ekran. Ustawia go z góry i pozostawiony, aby uwzględnić go większy, a obraz jest następnie umieszczony w tle, aby wypełnić obraz.

 .glitchit {
   pozycja: absolutna;
   Top: Calc (-1 * Var (- Gap-pionowy));
   W lewo: Calc (-1 * Var (- Gap-poziomy));
   Szerokość: Calc (100% + VAR (- Gap-poziomy) *
2);
   Wysokość: Calc (100% + Var (- Gap-pion) *
2);
   Tło: URL (../ img / main.jpg) bez powtórzeń
50% 0;
   Background-Color: var (- Blend-Color-1);
   Rozmiar tła: okładka;
   Transform: Translate3d (0, 0, 0);
   TRYB TRYB TŁYSKU: VAR (- MOCNO
tryb-1);
} 

11. Wybierz obrazy

Kod tutaj wybiera każdy obraz z wyjątkiem pierwszego obrazu. Dzieje się tak, ponieważ pierwszy obraz pozostaje na stronie, podczas gdy inni włącza się i wyłączają na górze z animacją klatek kluczowych. Te górne obrazy są ukryte, dopóki nie są potrzebne z nieprzezroczystą na zero.

 .glitchit: nth-dziecko (N + 2) {
   nieprzezroczystość: 0;
}
.Mgloaded .glitchit: nth-dziecko (N + 2) {
   Animacja - czas trwania: Var (- Time-Anim);
   Animacja - opóźnienie: var (- opóźnienie-anim);
   Animacja-funkcja rozrządu: liniowa;
   Animacja-Count: Infinite;
} 

12. Dostosuj obrazy dwa i trzy

Drugi i trzeci obraz są ustawione na animowanie w tym kodzie. Dotyczą one odpowiednich trybów mieszanki i kolorów, dzięki czemu pojawiają się inaczej. Największą różnicą tutaj jest to, że otrzymują różne animacje klatek kluczowych, które mają naśladować do mieszania.

 W górę efektów.
.Mgloaded .glitchit: nth-dziecko (2) {
   Kolor tła: Var (- Melnd-Color-2);
   TRYB TRYB TŁYSKU: VAR (- MOCNO
tryb-2);
   animacja nazwa: Glitch-1;
}
.Mgloaded .glitchit: nth-dziecko (3) {
   Background-Color: Var (- Blend-Color-3);
   TRYB TRYB TŁYSKU: VAR (- MOCNO
tryb-3);
   animacja nazwa: Glitch-2;
} 

13. Dostosuj obrazy cztery i pięć

Tym razem kolejne dwa obrazy są ustawione w pobliżu innych, ale tym razem tym razem są różne tryby mieszania i animacje do tych obrazów, aby pokazać się. Klawiatury nie zostały jeszcze stworzone dla niektórych z tych animacji i które będą następne.

 .Mgloaded .glitchit: nth-dziecko (4) {
   Background-Color: Var (- Melnd-Color-4);
   TRYB TRYB TŁYSKU: VAR (- MOCNO
tryb-4);
   Nazwa animacji: Glitch-3;
}
.Mgloaded .glitchit: nth-dziecko (5) {
   Background-Color: Var (- Blend-Color-5);
   TRYB TRYB TŁYSKU: VAR (- MOCNO
tryb-5);
   animacja nazwa: lampa błyskowa;
} 

14. Dodaj pierwszy zestaw klatek kluczowych

Klatki kluczowe działają, chwytając różne sekcje obrazu i wycinanie go, więc tylko będzie widoczne. Krycie jest włączona i wyłączana w różnych momentach, dzięki czemu części obrazu są widoczne w różnych czasach do innych animacji, a zatem tworzą efekt usterki. Obraz jest nieznacznie przesuwany na osi x.

 @keyframes Glitch-1 {
   0% {
       nieprzezroczystość: 1;
       Transform: Translate3d (Var (- Gap-
poziomy), 0, 0);
       Clip-Path: Wielokąt (0 2%, 100% 2%,
100% 5%, 0 5%);
   } 2% {
       Clip-Path: Wielokąt (0 15%, 100% 15%,
100% 15%, 0 15%);
   } 

15. Użyj ścieżki Clip

Ścieżka klipu zajmuje prostokąt, więc pierwsze dwa liczby są po lewej stronie, a następnie po prawej stronie. Następnie następuje prawy dolny i dolny w lewo. Przenosząc te liczby różne części obrazu, stają się widoczne w różnych punktach.

 4% {
       Clip-Path: Wielokąt (0 10%, 100% 10%,
100% 20%, 0 20%);
   } 6% {
       Clip-Path: Wielokąt (0 1%, 100% 1%,
100% 2%, 0 2%);
   } 8% {
       Clip-Path: Wielokąt (0 33%, 100% 33%, 1
00% 33%, 0 33%);
   } 10% {
       Clip-Path: Wielokąt (0 44%, 100% 44%,
100% 44%, 0 44%);
   } 

16. Przyspiesz ruch

Przesuwając ścieżkę klipsów tak szybko przez wiele klatek kluczowych, efekt buduje się i różne części obrazu wydają się błysnąć w melanty sposób. Dodaj również więcej warstw obrazów, a efekt działa bardzo dobrze na tym, co robi.

 12% {
       ścieżka klipu: wielokąt (0 50%, 100% 50%,
100% 20%, 0 20%);
   } 14% {
       Clip-Path: Wielokąt (0 70%, 100% 70%,
100% 70%, 0 70%);
   } 16% {
       Clip-Path: Wielokąt (0 80%, 100% 80%,
100% 80%, 0 80%);
   } 18% {
       ścieżka klipu: wielokąt (0 50%, 100% 50%,
100% 55%, 0 55%);
   } 20% {
       Clip-Path: Wielokąt (0 70%, 100% 70%,
100% 80%, 0 80%);
   } 

17. Wykonaj usterki obrazu

Po 22% obraz jest wyłączony, dopóki animacja odtwarza się ponownie. To kończy Glitch-1. efekt z Glitch-2. i Glitch-3. już dostarczany w kodzie. Następna sekcja ustąpi tekst, który jest również na szczycie obrazu.

 21,9% {
       nieprzezroczystość: 1;
       Transform: Translate3d (Var (- Gap-
poziomy), 0, 0);
   } 22%, 100% {
       nieprzezroczystość: 0;
       Transform: Translate3d (0, 0, 0);
       Clip-Path: Wielokąt (0 0, 0 0, 0 0, 0
0);
   }
} 

18. Jak tworzyć tekst usterki

Ten kod działa wyjątkowo podobnie jak poprzedni kod, z wyjątkiem tego, że odwraca tekst do góry nogami, a następnie go klipsy, aby dać efekt skokowy, który jest radykalnie przesuwany. Po tym, że ścieżka klipu ujawnia tylko mniejsze sekcje, z szybkim ruchem przez klatki kluczowe.

 @keyframes Glitch-Text {
   0% {
       Transform: Translate3d (Calc (-1 *
var (- luki poziomy)), 0, 0) skala3d (-1, -1,
1);
       Clip-Path: Wielokąt (0 20%, 100% 20%,
100% 21%, 0 21%);
   } 2% {
       Clip-Path: Wielokąt (0 33%, 100% 33%,
100% 33%, 0 33%);
   } 4% {
       Clip-Path: Wielokąt (0 44%, 100% 44%,
100% 44%, 0 44%);
   } 

19. więcej przycinania

Efekt kontynuuje w tej sekcji kodu, szybko zmieniając kształt ścieżki przycinającej. The. klip-ścieżka również przychodzi z -Webkit- Prefiks, ale dla zwięzłości nie został to pokazany w żadnym z kodu tutaj. W momencie pisania ścieżka klipu jest obecnie obecnie obsługiwana w IE, Edge lub Opera Mini, ale jest we wszystkich innych przeglądarkach.

 5% {
       ścieżka klipu: wielokąt (0 50%, 100% 50%,
100% 20%, 0 20%);
   } 6% {
       Clip-Path: Wielokąt (0 70%, 100% 70%,
100% 70%, 0 70%);
   } 7% {
       Clip-Path: Wielokąt (0 80%, 100% 80%,
100% 80%, 0 80%);
   } 8% {
       ścieżka klipu: wielokąt (0 50%, 100% 50%,
100% 55%, 0 55%);
   } 

20. Odwróć tekst z powrotem

W ostatecznej animacji usterki tekstowej tekst odwraca się do pierwotnej pozycji i czeka, aż znajdzie się ponownie. Jak widać, wszystkie animacje odbywa się w 10 procent, podczas gdy pozostaje uśpiony przez 90 procent czasu, dając tekst odpowiednią ilość cierpienia i pozwalając na czytelność.

 9% {
       Clip-Path: Wielokąt (0 70%, 100% 70%,
100% 80%, 0 80%);
   } 9,9% {
       Transform: Translate3d (Calc (-1 *
var (- luki poziomy)), 0, 0) skala3d (-1, -1,
1);
   } 10%, 100% {
       Transform: Translate3d (0, 0, 0)
skala3d (1, 1, 1);
       Clip-Path: Wielokąt (0 0, 100% 0, 100%
100%, 0% 100%);
   }
} 

21. Utwórz szybki błysk

Ostatnim krokiem jest to, że jeden obraz otrzymuje animację lampy błyskowej, a ta seria klatek kluczowych wystarczy umieścić obraz na ekranie z dziewiczeniem 20 procent przez krótki okres, aby dać przesunięcie oryginału. Zapisz plik CSS teraz, a efekt powinien rozpocząć odtwarzanie po obciążeniach zawartości w przeglądarce.

 @keyframes Glitch-Flash {
   0%, 5% {
       nieprzezroczystość: 0,2;
       Transform: Translate3d (Var (- Gap-
poziome), var (- Gap-pionowo), 0);
   } 5,5%, 100% {
       nieprzezroczystość: 0;
       Transform: Translate3d (0, 0, 0);
}} 

Mam gdzieś zabezpieczyć, aby zapisać pliki projektowe? Jeśli nie, będziesz potrzebował naszego przewodnika magazyn w chmurze Opcje.

Ten artykuł został pierwotnie opublikowany w kreatywnym projektowaniu stron internetowych projektantów projektowania stron internetowych. Kup problem 281. lub Subskrybuj .

Czytaj więcej:

• Dodaj efekt usterki na swoją stronę
• 10 Amazing New CSS Techniki
• Utwórz efekty kolażu w przeglądarce CSS