Przykład tworzenia dynamicznego banera w html. Responsywny baner reklamowy wykorzystujący HTML5 i CSS3

Generator komponowania kodu do banera. Przygotowanie kodu baneru online to prosta i nieskomplikowana procedura. Dlaczego potrzebujemy banera na stronie?
Do serwisu dodajemy baner w celu reklamy towarów, usług, promocji marki, pokazania naszych towarów.

Dodajemy baner do strony w celu reklamowania towarów, usług, promocji marki i tak dalej.

Umieszczając kod banera na stronie, chcemy coś wyróżnić, tym samym przyciągając uwagę.

Jak banery można wykorzystać w praktyce?
Możliwości wykorzystania reklamy banerowej może być dowolna. Weźmy przykład z życia. Na przykład zarejestrowałeś się w programie partnerskim. W ramach tego programu otrzymujesz linki afiliacyjne, za pomocą których możesz promować swój produkt.

Z reguły wraz z promocją produktu, w celu zwiększenia swoich dochodów, otrzymujesz link polecający, aby przyciągnąć innych partnerów.

Jako materiały w programie afiliacyjnym możesz otrzymać gotowe banery. Tak więc, umieszczając kod banerów w sieci, np. na swojej stronie internetowej, reklamujesz produkt i rekrutujesz własnych partnerów.

Usługa online uzyskania kodu banerowego

Za pomocą tego generatora możesz stworzyć i otrzymać gotowy kod HTML dla swojego przycisku lub banera. Jeśli nie możesz samodzielnie napisać kodu, wypełniając formularz, jednym kliknięciem otrzymasz gotowy kod HTML, który możesz wstawić na strony witryny. Twój adres witryny Przykład wprowadzania: https://strona/wejdź z https: // URL obrazu dla banera lub przycisku Przykład wprowadzania: https: //strona//moibaneri/1703.gif Etykietka po najechaniu na baner lub przycisk (tytuł) Przykład wyskakującego opisu: baner strony bonusowej Szerokość banera lub przycisku (szerokość) Przykład wprowadzania (wprowadź tylko cyfrę

Reklama jest niezbędna w każdej witrynie. Jedynie koszt narzędzi reklamowych jest wyższy niż dochód z niego. Wtedy wielu zaczyna być mądrymi, aby choć trochę zaoszczędzić. Za takie „podchwytliwe” podpowiemy, jak zrobić baner.

Czym są banery

Baner w Internecie to prostokątny obraz reklamy ze statyczną lub dynamiczną (animowaną) treścią. Baner może zawierać zarówno tekst jak i grafikę. Baner jest zazwyczaj wyposażony w link, który aktywuje się po kliknięciu w niego przyciskiem myszy.

Obecny wzrost skuteczności reklamy banerowej związany jest z wykorzystaniem targetowania kontekstowego. Jednocześnie na banerach serwisu reklamowane są tylko te towary i usługi, które są „zgodne” z tematyką zasobu:

Byłoby miło wiedzieć, jak zrobić baner na swoją stronę. Ale najpierw musisz zrozumieć istniejące typy banerów. Istnieją następujące typy:

• Banery statyczne - składają się ze statycznego obrazu. Są to obrazy w formacie JPEG lub PNG. Charakteryzują się niską wagą, co nie wpływa na szybkość ładowania strony.
• Animowane banery - Animacja stworzona za pomocą GIF. Składa się z kilku obrazów zastępujących się z określoną częstotliwością. Waga banera zależy od ilości użytych w nim obrazów.
• Flash - w tym banerze animacja oparta jest na Flashu. Potrafi reagować na działania użytkownika.

Treści interaktywne mogą być prezentowane w formie gry lub ankiety z dodatkiem dźwięku. Rysunki do animacji tworzone są przy użyciu grafiki wektorowej.

Istnieje wiele różnych rozmiarów banerów dla strony internetowej. Ale najpopularniejsze z nich to:

• 88 na 31 pikseli;
• 120 x 60 pikseli;
• 120 x 90 pikseli;
• 120 na 240 pikseli;
• 125 na 125 pikseli;
• 120 x 600 pikseli;
• 160 na 600 pikseli;
• 180 na 150 pikseli;
• 234x60 pikseli;
• 240 na 400 pikseli;
• 250 x 250 pikseli;
• 300 na 600 pikseli;
• 300 na 250 pikseli;
• 336 na 280 pikseli;
• 150 na 150 pikseli;
• 468 na 60 pikseli;
• 728 na 90 pikseli.

Oznaki skutecznego banera reklamowego

Skuteczność banera reklamowego umieszczonego na stronie zależy nie tylko od popularności serwisu. W większym stopniu jej skuteczność zależy od stopnia realizacji samej reklamy. Baner wysokiej jakości musi spełniać kilka podstawowych kryteriów:

• Przyciągnij uwagę użytkownika - ale to nie znaczy, że baner powinien być zbyt jasny i migać. Taka reklama drażni odwiedzającego, a nie uwagę. Treść banera powinna dyskretnie „podpowiedzieć” użytkownikowi o jego obecności. Dlatego przy wyborze obrazu i tekstu do niego należy zawsze brać pod uwagę czynnik psychologiczny;
• Wzbudzaj zainteresowanie – banery na stronę powinny wzbudzać zainteresowanie użytkownika przedmiotem reklamy. Produkt lub usługa musi być zaprezentowana nie tylko ze smakiem, ale także w oryginalny sposób. Zachęcamy do używania lekkiego dowcipu i humoru:

• Zachęta do podążania za linkiem banerowym jest osiągana dzięki efektowi pewnej tajemnicy i niedopowiedzenia,
  osadzone w treści banera.
• Motywacja do zamówienia usługi lub zakupu - zależy przede wszystkim od treści baneru reklamowego. Powinien pokazywać najlepsze aspekty przedmiotu reklamy lub korzyści, jakie użytkownik może uzyskać z jego zakupu.
• Jeżeli baner ma na celu zwiększenie świadomości marki i zwiększenie jej wizerunku, to treść reklamowa powinna wzbudzać zaufanie konsumenta. Ale nie wywołuj jednocześnie negatywnych skojarzeń.

Prawidłowości, które należy wziąć pod uwagę przed umieszczeniem banera na stronie:

• Im większy baner, tym większe prawdopodobieństwo, że użytkownik go kliknie. Za najbardziej efektywny rozmiar uważa się 240 na 400 pikseli;
• Największy efekt mają reklamy banerowe umieszczone na górze (w nagłówku). Można go również umieścić z boku lub na dole strony, ale tutaj wydajność jest nieco niższa;
• Animowane banery potrafią szybko przyciągnąć uwagę użytkownika – ludzkie oko intuicyjnie reaguje na ruch.

Stworzenie i umieszczenie banera reklamowego

Zanim wstawisz baner na stronę, musisz zdecydować o lokalizacji jego umieszczenia. W takim przypadku musisz wziąć pod uwagę rozmiar banera i dostępną wolną przestrzeń na stronach. Decydując się na lokalizację jednostki reklamowej, możesz wstawić kod banera na stronę html.

Kod większości banerów pasuje do wzoru:

• a href = "/ link do strony reklamodawcy" - adres zasobu, do którego użytkownik zostanie przekierowany po kliknięciu w baner;
• title = "title" - tekst wyświetlany w wyskakującej podpowiedzi po najechaniu kursorem na obszar banera;
• target = "_ blank" - określa zasady wyświetlania strony reklamodawcy po kliknięciu w link banerowy ("_blank" - otworzy się w nowym oknie);
• rel = "nofollow" - uniemożliwia wyszukiwarkom przetwarzanie tego linku;
• img src = "https: //www.site/wp-content/uploads/path to image" - ustawia ścieżkę do obrazu wyświetlanego w banerze;
• alt = "tekst alternatywny" - tekst, który będzie wyświetlany w banerze, jeśli jego obraz nie jest załadowany.

Ale nie musisz sam projektować banera. Aby to zrobić, możesz użyć specjalnych generatorów online. Aby wygenerować kod banera na takiej usłudze, musisz wypełnić kilka pól i kliknąć przycisk:

Lub możesz zlecić wykonanie banera w profesjonalnym studiu. Wtedy będzie kosztować więcej... Oto orientacyjne ceny:

• Opracowanie zwykłego banera GIF - od 25 USD;
• Tworzenie banerów w technologii Flash - 70-150 $;
• Zmień rozmiar - około 50% pierwotnej ceny.

Ale jeśli jesteś trochę sprytny, możesz sam stworzyć prosty baner. Oto cud po dziesięciu minutach manipulowania kodem HTML i obrazem w Coreldraw:

Kod banera:

Jeśli trochę sprytnie poradzisz sobie z kodem i dodasz kilka programów obsługi zdarzeń, otrzymasz baner ze zmieniającym się obrazem. Obraz na banerze zmienia się po najechaniu na niego.

Oto, co się stało:

Przykładowy kod:

Tworzenie banerów animowanych i wideo

Spójrzmy na przykład, jak zrobić animowany baner za pomocą programu Ulead GIF Animator.

W menu "Plik" wybierz element "Kreator animacji". W wyświetlonym oknie ustaw rozmiar przyszłego banera. W kolejnym kroku wczytaj przygotowane obrazy:

Następnie ustawiana jest szybkość zmiany obrazów w animacji. W małym oknie prędkość ta jest pokazana przez zmianę liczb.

Zdolność adaptacji- to jedno z ważnych kryteriów dla witryn, które obecnie powstają. Wielu użytkowników korzysta z ekranów telefonów komórkowych do przeglądania sieci. Reklamy banerowe są powszechne na stronach internetowych, a tradycyjne banery reklamowe nie są elastyczne. Banery Flash i animowane GIF są ustalone w pikselach, więc nie są kompatybilne z nowoczesnymi układami responsywnymi.

Potrzebujemy nowego sposobu tworzenia banerów reklamowych.

Potrzebujemy banery responsywne …

Nowy format banerów reklamowych

Jedynym sposobem, aby banery reklamowe były tak responsywne, jak nasze układy HTML5, jest tworzenie ich również w HTML5. Na początku może to brzmieć jak szalony pomysł, ale zapewniam, że tak nie jest. W rzeczywistości reklamy oparte na HTML mają wiele zalet.

• Reklamy HTML są w pełni dostępne, a znaczniki semantyczne sprawiają, że są one kompatybilne z różnymi rozdzielczościami.
• Tekst, obrazy, wideo, Javascript i formularze może być użyty w banerze tak jak każda strona internetowa.
• Banery mogą używać dynamicznych skryptów serwera i bazy danych, jeśli to konieczne.
• Reklamy HTML mogą zajmować bardzo mało miejsca na dysku.
• Udostępnianie banera jest zasadniczo takie samo, jak hosting.
• Brak nowej technologii dla twórców stron internetowych- to to samo, co zwykłe tworzenie stron internetowych.
• i oczywiście, Reklamy HTML5 można zmieniać do dowolnego rozmiaru za pomocą zapytań o media CSS3- dokładnie tego potrzebujemy do banerów responsywnych!

Jak więc tworzyć reklamy elastyczne?

Jedyną sztuczką jest zdynamizowanie rozmiaru iframe za pomocą zapytań o media CSS3, omówię to nieco później ... Ale w zasadzie to wszystko!

Zobaczmy, jak to działa

Oto przykład reklamy HTML5 wyświetlanej w popularnym rozmiarze 125 × 125 pikseli:

A oto ta sama deklaracja elastycznej szerokości:

Zwróć uwagę, jak reaguje druga reklama, gdy zmieniasz rozmiar okna przeglądarki ... Całkiem fajnie! 🙂

Układy responsywne wymagają, aby elementy strony miały różną szerokość, więc banery muszą teraz spełniać ten wymóg.

Wysokość banera tak naprawdę nie ma znaczenia w responsywnym projektowaniu, więc możemy użyć dowolnej wysokości. Ale wybór wysokości nie oznacza, że ​​nasza reklama utknie na tej wysokości, możemy zdefiniować wiele wysokości dla każdej reklamy!

Aby zachować zgodność wsteczną, reklamy elastyczne muszą używać tych samych wysokości w pikselach, co tradycyjne rozmiary banerów.

Teoretycznie moglibyśmy tworzyć responsywne banery, które działają z dowolną szerokością lub wysokością, ale jest to niepraktyczne w tworzeniu lub testowaniu.

Proponuję trzymać się minimalnej szerokości 88 pikseli i mieć następujący zestaw domyślnych wysokości:

• 31px "mikro"
  mikrobar (88 x 31)
• 60px "przycisk"
  przycisk 2 (120x60)
  półbaner (234 x 60)
  pełny baner (468 x 60)
• 90px "baner"
  przycisk 1 (120x90)
  tablica wyników (728 x 90)
• 125px "mały prostokąt"
  guzik kwadratowy (125 x 125)
• 250px „średni prostokąt”
  baner pionowy (120 x 240 * wystarczająco blisko!)
  kwadratowe wyskakujące okienko (250 x 250)
  średni prostokąt (300 x 250)
• 400px "duży prostokąt"
  pionowy prostokąt (240 x 400)
• 600px "wieżowiec"
  wieżowiec (120 x 600)
  szeroki wieżowiec (240 x 600)
  reklama na pół strony (300 x 600)

Siedem wysokości pikseli, które wybrałem powyżej, zapewnia nam dobry zakres w pionie, a dzięki zmiennej szerokości pokrywamy najpopularniejsze obecnie używane rozmiary banerów reklamowych. Oczywiście, podobnie jak w przypadku tradycyjnych banerów, możesz tworzyć niestandardowe rozmiary, jeśli ich potrzebujesz.

Nie tylko to, ale mój baner demo kosztuje łącznie mniej niż 25 KB (HTML, CSS i obraz JPG). To mniej niż maksymalny rozmiar pliku dla jednego małego banera!

Wypróbuj nowe rozmiary banerów za pomocą elastycznego narzędzia do sprawdzania reklam.

Zmiana rozmiaru ramek za pomocą zapytań o media CSS

Czasami możesz potrzebować elastycznej wysokości reklamy, w tym celu musisz zmienić rozmiar elementu iframe za pomocą zapytań o media CSS. Uważam, że najlepszym sposobem na to jest ustawienie szerokości i wysokości elementu iframe na 100% i umieszczenie ich w div z określonymi wymiarami ustawionymi w CSS. Tak to wygląda:

< div id = "ad" > < iframe src = "reklama.html" granica = "0" przewijanie = "nie" allowtransparency = "prawda" szerokość = "100%" wysokość = "100%" styl = "obramowanie: 0;" > < / iframe > < / div >

A oto CSS:

/ * domyślna wysokość * / #ad (wysokość: 60px;) @media tylko ekran i (wysokość: 90px) (/ * 90 pikseli wysokości * / #ad (wysokość: 90px;)) @media tylko ekran i (wysokość: 125px ) (/ * wysokość 125 pikseli * / #ad (wysokość: 125px;))

/ * domyślna wysokość * / #reklama ( wysokość: 60px; @media only screen i (wysokość: 90px){ / * wysokość 90 pikseli * / #reklama ( wysokość: 90px; @media only screen i (wysokość: 125px){ / * 125 pikseli wysokości * / #reklama ( wysokość: 125px;

Śledzenie wyświetleń i kliknięć

Najlepsze w reklamach HTML5 jest to, że można je śledzić za pomocą Google Analytics, tak jak w zwykłych witrynach.

Baner (baner angielski - flaga, baner) - obraz graficzny o charakterze reklamowym, podobny do modułu reklamowego w prasie. Może to być statyczny obraz, a nawet tekst lub może zawierać elementy animowane (do wideo i obiektów interaktywnych). Z reguły może zawierać hiperłącze do witryny reklamodawcy lub strony z dodatkowymi informacjami. Zadania banera są następujące. Najpierw sprzedaj produkt. Więc - pociągać uwaga odwiedzającego, zainteresowanie potencjalny klient reklamowany produkt lub usługa, naciśnij, aby przejść do witryny i wywołać działanie(Wezwanie do działania). To CTA jest ostatecznym celem reklamy. Po drugie, zadaniem banera jest reklama wizerunkowa lub marki, której celem jest: zwiększyć świadomość marki i budować pozytywny wizerunek marki.

Popularne typy reklam w serwisie:

• Graficzny- prosty rodzaj banera reklamowego w Internecie. Składa się z obrazu o określonej wielkości i zawiera link do zasobu reklamowego.
• Baner Flash- posiada duże możliwości animacji, pozwala na lepsze przekazywanie informacji za pomocą kombinacji grafiki wektorowej i rastrowej.
• Baner HTML5-połączenie elementów HTML z animacjami i dobrym projektem wizualnym, dostosowanym do każdego urządzenia i przeglądarki.

Główne różnice między HTML a innymi rodzajami banerów
W porównaniu z innymi metodami tworzenia banerów, technologie HTML5 zapewniają szereg korzyści w przyciąganiu odbiorców do zasobu:

• Reklamy w tym formacie będą wyświetlane tak samo na wszystkich urządzeniach bez dodatkowych rozszerzeń przeglądarki.
  HTML5 zapewnia więcej opcji integracji formularzy, przycisków mediów społecznościowych, kalendarzy, map i innych aplikacji z reklamami.
• Niewielka waga i wykorzystanie mniejszej ilości zasobów nie wpływa na szybkość ładowania stron w przeglądarce. Technologie flashowe nie pozwalają na osiągnięcie tego wyniku.
• Aby ocenić skuteczność banerów HTML5, możesz przeglądać statystyki w Google Analytics. Istnieje wiele informacji o gościach i kliknięciach linków.

Istotną wadą technologii flash było stopniowe porzucanie dużych firm, takich jak Apple, Mozilla czy Amazon. Google był głównym motorem zniknięcia Flasha. Najpierw wyłączyli animacje Flash w Google Chrome, a następnie porzucili reklamy Flash w swoich usługach reklamowych w wyszukiwarce, wybierając HTML5.

Sposoby tworzenia banerów HTML
Opracowanie banera rozpoczyna się od stworzenia osobnej strony i jest osadzane w witrynie za pomocą „iframe”. Istnieje kilka metod tworzenia banerów reklamowych dla witryny, które uznamy za najpopularniejsze.

1. Utwórz ramkę za pomocą CSS3 i JavaScript
Ramka umożliwia załadowanie dowolnych niezależnych dokumentów w obszar o określonych rozmiarach. Może to być inny kod HTML wykorzystujący style i skrypty do dekoracji. Możliwe jest również zaimplementowanie banera poprzez obszar „canvas”, w którym animacje, rysunki, grafiki, a nawet gry są tworzone przy użyciu JavaScript. Aby przyspieszyć rozwój, dozwolone jest korzystanie z bibliotek firm trzecich, na przykład CreateJS.

Korzyści:

• Funkcjonalność nie jest ograniczona żadnymi programami, możesz zaimplementować wszystko.

niedogodności:

• Ten proces jest dość skomplikowany i wymaga specjalnych umiejętności układania.
• Duże koszty pracy w czasie w stosunku do innych metod.

2. Adobe Edge Animacja
Osoby zaznajomione z Adobe After Effects uznają interfejs Adobe Edge Animate za bardzo znajomy. Adobe Edge Animate ma bardziej ograniczoną funkcjonalność, której celem jest tworzenie prostych animowanych treści przy użyciu HTML5, JavaScript i CSS3. Program obsługuje import takich formatów jak.svg, .png, .jpeg, .gif, HTML; obsługa formatów wideo i audio.

Istnieje ponad 30 wbudowanych efektów, co upraszcza kilkakrotnie czas tworzenia wysokiej jakości animacji:

Korzyści:

• W Internecie dostępnych jest wiele samouczków wideo dotyczących korzystania z programu.
• Prosta funkcjonalność, większość procesów jest zautomatyzowana.
• Program nie wymaga znajomości HTML5, JavaScript i CSS3.
• Po zakończeniu prac otrzymujemy wszystkie niezbędne dokumenty do umieszczenia banera na stronie. Obrazy - folder z elementami graficznymi banera, kilkoma plikami JavaScript, html oraz plikiem An - do późniejszej edycji pliku w programie.
• Gotowy baner jest obsługiwany przez wszystkie nowoczesne przeglądarki i aplikacje mobilne, spełnia wszystkie wymagania techniczne kampanii reklamowych w Yandex i Google.

niedogodności:

• Interfejs jest tylko w języku angielskim.
• Od 2015 roku firma Adobe przestała rozwijać projekt Adobe Edge Animate, od tego czasu program nie był aktualizowany i osiągnął limit rozwoju. Edge Animate jest nadal dostępny do pobrania z archiwów Creative Cloud.

3. Adobe Animate CC
Animate CC to produkt o zmienionej nazwie Adobe Flash Professional. Ostatnio technologia Flash straciła zaufanie użytkowników, program wymagał zmiany nazwy i kilku ulepszeń. W zasadzie jest to ten sam program Flash Professional, ale w którym pliki są dodatkowo zapisywane w HTML5 i JavaScript.

Interfejs jest bardzo podobny do Flash Professional, ale możliwości programów różnią się.

Korzyści:

• Możliwość tworzenia grafiki trójwymiarowej. Istnieje narzędzie aparatu, które pozwala uchwycić głębię kadru dla prawdziwej animacji.
• W przeciwieństwie do Edge Animate, Animate CC ma duży wybór pędzli wektorowych i możliwość pracy z grafiką bitmapową.
• Program jest stosunkowo nowy, więc Adobe aktywnie rozwija projekt, publikując aktualizacje i ulepszając Animate CC.
• Istnieje wersja w języku rosyjskim.
• Rozszerzone opcje eksportu pliku do formatów: JavaScript/Html, jpeg, png, oam, svg, mov, gif. Naciśnięcie jednego przycisku powoduje zapisanie elementów banera w duszkach, tym samym skracając czas ładowania banera.

niedogodności:

• Wadą jest też nowość programu. W programie Animate CC nie ma tylu samouczków dotyczących animacji, co w programie Adobe Edge Animate. Dlatego pracę niektórych funkcji należy badać niezależnie, co nie jest łatwe. Program jest dość trudny do samodzielnego studiowania, ale możesz to rozgryźć.
• Niektóre funkcje nie są zautomatyzowane, jak w Edge Animate, co również wydłuża czas tworzenia banerów.

4. Google Web Designer
Google zadowoliło nas darmowym edytorem stworzonym specjalnie do implementacji banerów html. Google Web Designer jest całkowicie nastawiony na wdrażanie reklam, których główny nacisk jest skierowany na AdWords.

Jeśli spojrzymy na okno tworzenia nowego pliku, zauważymy, że rozmiary szablonów reklam są już wbudowane w program.

Korzyści:

• Prosty interfejs.
• Dostępność szablonów do reklamy w google.
• Całkowicie darmowy program.
• Dostępność wersji rosyjskojęzycznej.
• Ułożono responsywny projekt banera, baner html będzie wyglądał świetnie w każdej rozdzielczości ekranu.

niedogodności:

• Funkcjonalność Google Web Designera jest wystarczająco wąska, by tworzyć arcydzieła animacji. Program jest mocno ograniczony szablonami.
• Brak programów szkoleniowych. Pomoc Google nie wystarczy, aby w pełni nauczyć funkcjonalności.

Wszystkie przedstawione powyżej metody nie są nowe, ale są sprawdzone. Oznacza to, że mamy gwarancję, że stworzone banery html będą moderowane na większości platform reklamowych, ponieważ ich wymagania techniczne odpowiadają ogólnym standardom.

Stwórzmy baner reklamowy za pomocą CSS3. Obecnie tylko przeglądarki Firefox i WebKit w pełni obsługują animacje CSS3. Ale dość łatwo jest sprawić, by baner działał w innych przeglądarkach. Nie powinieneś jednak oczekiwać wszędzie świetnej wydajności (zwłaszcza w IE 7 i starszych) podczas eksperymentowania z najnowszymi technikami CSS.

Uwaga: Wszystkie prefiksy dostawców przeglądarek zostały pominięte, aby zaoszczędzić miejsce na stronie. Zobacz kod źródłowy.

Znacznik HTML

Przyjrzyjmy się najpierw strukturze banera w HTML. Na tym etapie musimy sobie wyobrazić, jak animacja będzie funkcjonować:

Aby lepiej zrozumieć strukturę znaczników, skupmy się na łodzi:

Na łodzi odbywają się trzy animacje:

Przesuwając łódź w lewo. Dotyczy nieuporządkowanej listy (grupy).

Imitacja kołyszącej się łodzi na wodzie. Dotyczy pozycji listy (łódź).

Pojawienie się znaku zapytania. Dotyczy elementu div (znak zapytania).

Jeśli spojrzysz na stronę demonstracyjną, zobaczysz, że animacja elementu listy (łodzi) wpływa również na element div wewnątrz niej (znak zapytania). Również animacja „wysuwania się” dla nieuporządkowanej listy wpływa na element listy (łódka i znak zapytania).

Stąd można wnioskować, że dzieci oprócz własnych działań otrzymują animacje od rodziców. Teraz pozostaje tylko wymienić struktury nadrzędne/podrzędne.

CSS

Zanim zaczniemy analizować, jak tworzyć animacje, musimy zapewnić wsteczną kompatybilność ze starszymi przeglądarkami.

Kompatybilność wsteczna

Zapewnimy kompatybilność wsteczną, po prostu stylizując znaczniki tak, jakby w ogóle nie było animacji CSS. Jeśli ktoś spojrzy na stronę w starej przeglądarce, zobaczy zwykły statyczny obraz, a nie pustą białą przestrzeń.

Na przykład: jeśli używasz CSS? podobnie jak poniżej, pojawią się problemy:

/* ŹLE! * / @keyframe nasza-zanikająca-animacja (0% (krycie: 0;) 100% (krycie: 1;)) div (krycie: 0; / * Ten div jest domyślnie ukryty - o! * / animacja: nasza -fade-in-animation 1s 1;)

Jeśli przeglądarka nie obsługuje animacji, element div pozostanie niewidoczny dla użytkownika.

W ten sposób zapewniamy wsteczną kompatybilność ze starszymi przeglądarkami:

/ * PRAWIDŁOWO * / @keyframe nasza-zanikanie-animacji (0% (krycie: 0;) 100% (krycie: 1;)) div (krycie: 1; / * Ten div jest domyślnie widoczny * / animacja: nasza -fade-in-animation 1s 1;)

Teraz element div będzie renderowany, nawet jeśli animacja się nie uruchomi. W nowoczesnych przeglądarkach element div zostanie ukryty jako pierwszy podczas animacji.

Fundacja

Teraz wiemy, jak zapewnić kompatybilność wsteczną (co pomoże uniknąć problemów podczas pracy z rzeczywistymi projektami). Czas stworzyć rdzeń naszego kodu CSS.

Należy pamiętać o 3 punktach:

Ponieważ baner będzie używany w różnych witrynach, sprawimy, że wszystkie nasze selektory CSS będą wyjątkowe. Wszystkie zaczynają się od # identyfikatora ad-1. Dlatego postaramy się uniknąć nakładania się naszego kodu i kodu strony.

Celowo ignorujemy opóźnienie animacji w instalacjach. Jeśli użyjesz opóźnienia animacji podczas stylizacji z domyślną widocznością elementu, struktura banera zostanie zakłócona przez nagłe zniknięcie lub ponowne pojawienie się części obrazu po zakończeniu animacji. Opóźnienie animacji jest symulowane przez czas trwania i ustawienie klatek.

Kiedy możliwe użyj jednej animacji dla kilku elementów. Dzięki temu oszczędzamy czas i zmniejszamy rozmiar kodu.

Stwórzmy więc podstawę dla naszego banera. Ustawmy dla niego względne pozycjonowanie, aby elementy wewnętrzne mogły być umieszczone poprawnie. Ukryje również wszystko poza żywiołem:

# ad-1 (szerokość: 720px; wysokość: 300px; float: lewy; margines: 40px auto 0; background-image: url (../ images / ad-1 / background.png); background-position: center; background -repeat: no-repeat; overflow: ukryty; pozycja: względna; box-shadow: 0px 0px 6px # 000;)

Następnie stylizujemy pola tekstowe i wejściowe. Nazywamy odpowiednie animacje. Musisz również upewnić się, że zawartość ma najwyższy indeks Z dla ruchomych części, aby się nie nakładały:

# ad-1 #treść (szerokość: 325px; float: prawo; margines: 40px; text-align: center; z-index: 4; position: relatywne; overflow: widoczne;) # ad-1 h2 (rodzina czcionek: "Alfa Slab One", kursywa; kolor: # 137dd5; rozmiar czcionki: 50px; wysokość linii: 50px; cień tekstu: 0px 0px 4px #fff; animacja: animacja opóźnionego zanikania 7s 1 złagodzenie; / * Wygląd h2 z symulowanym opóźnieniem * /) # ad-1 h3 (rodzina czcionek: "Boogaloo", kursywa; kolor: # 202224; rozmiar czcionki: 31px; wysokość linii: 31px; cień tekstu: 0px 0px 4px #fff;animacja: opóźnione zanikanie animacji 10s 1 złagodzenie;/* Pojawienie się h3 z symulowanym opóźnieniem*/) # forma ad-1 (margines: 30px 0 0 6px; pozycja: względna; animacja: form-animation 12s 1 easy-in-out;/ * Łatwość-in-out;/ * Wysuń formularz e-mail z symulowanym opóźnieniem * /) # ad-1 #email (szerokość: 158px; wysokość: 48px; float: left; padding: 0 20px; font-size: 16px; font-family: "Lucida Grande", sans-serif; color: #fff; text-shadow: 1px 1px 0px # a2917d; border-top-left-radius: 5px; borde r-dolny-lewy promień: 5px; obramowanie: stałe 1px # a2917d; zarys: brak; box-shadow: -1px -1px 1px #fff; kolor tła: # c7b29b; obraz tła: liniowy-gradient (dół, rgb (216.201.185) 0%, rgb (199.178.155) 100%); ) # ad-1 #e-mail: focus (obraz w tle: liniowy-gradient (dół, rgb (199,178,155) 0%, rgb (199,178,155) 100%);) # ad-1 #submit (wysokość: 50px; float: lewo ; kursor: wskaźnik; padding: 0 20px; font-size: 20px; font-family: "Boogaloo", kursywa; kolor: # 137dd5; text-shadow: 1px 1px 0px #fff; border-top-right-radius: 5px ; border-bottom-right-radius: 5px; border: 1px solid # bcc0c4; border-left: none; background-color: #fff; background-image: linear-gradient (bottom, rgb (245,247,249) 0%, rgb ( 255,255,255) 100%);) # ad-1 #prześlij: najechanie (obraz tła: liniowy-gradient (dół, rgb (255,255,255) 0%, rgb (255,255,255) 100%);)

Teraz nadajmy styl wodzie i wywołajmy odpowiednią animację:

# ad-1 ul # water (/ * Jeśli potrzebujesz innej animacji dla wody, możesz ją dodać tutaj * /) # ad-1 li # water-back (szerokość: 1200px; wysokość: 84px; obraz w tle: url ( .. /images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; pozycja: bezwzględna; dół: 10 pikseli; lewy: -20 pikseli; animacja: animacja water-back 3s nieskończona łatwość wychodzenia; / * Symulacja nakładania się fal * /) # ad-1 li # water-front (szerokość: 1200 pikseli; wysokość: 158 pikseli; obraz tła: url (../ images / ad-1 / water -front .png); background-repeat: repeat-x; z-index: 3; position: bezwzględna; bottom: -70px; left: -30px; animacja: water-front-animation 2 s nieskończona łatwość wychodzenia; / * Inne imitacje nakładania się fal. Animacja będzie działać trochę szybciej, aby uzyskać efekt perspektywy. * /)

Wystylizujmy łódź i jej elementy. Nazywamy również odpowiednie animacje:

# ad-1 ul # łódź (szerokość: 249px; wysokość: 215px; z-index: 2; pozycja: bezwzględna; dół: 25px; lewy: 20px; przepełnienie: widoczne; animacja: łódź w animacji 3s 1 luz ; / * Przesuwa grupę w momencie rozpoczęcia reklamy * /) # ad-1 ul # łódź li (szerokość: 249px; wysokość: 215px; obraz w tle: url (../ images / ad-1 / łódź.png); pozycja: bezwzględna; dół: 0px; lewo: 0px; przepełnienie: widoczne; animacja: animacja łodzi 2 s nieskończona łatwość wejścia na zewnątrz; / * Symulacja łodzi podskakującej na wodzie - podobna do animacji używanej już na samej wodzie. * /) # ad-1 # znak zapytania (szerokość: 24px; wysokość: 50px; obraz w tle: url (../ images / ad-1 / znak-pytania.png); pozycja: bezwzględna; prawa: 34px; góra: -30px;animacja: opóźnione zanikanie animacji 4s 1 złagodzenie;/* zanikanie w pytajniku*/)

Teraz nadajmy styl chmurom. Do tego wykorzystamy animację z niekończącym się efektem ruchu. ilustracja pokazuje istotę pomysłu:

A oto kod CSS:

# ad-1 #chmury (pozycja: bezwzględna; top: 0px; z-index: 0; animacja: animacja chmury 30s nieskończona liniowo; / * Przewiń chmury w lewo, zresetuj i powtórz * /) # ad-1 # cloud-group -1 (szerokość: 720px; pozycja: bezwzględna; po lewej: 0px;) # ad-1 # cloud-group-2 (szerokość: 720px; pozycja: bezwzględna; po lewej: 720px;) # ad-1 .cloud- 1 (szerokość: 172px; wysokość: 121px; obraz w tle: url (../ images / ad-1 / cloud-1.png); pozycja: bezwzględna; góra: 10px; lewa: 40px;) # ad-1 . cloud-2 (szerokość: 121px; wysokość: 75px; obraz w tle: url (../ images / ad-1 / cloud-2.png); pozycja: bezwzględna; góra: -25px; lewa: 300px;) # reklama -1. cloud-3 (szerokość: 132px; wysokość: 105px; obraz w tle: url (../ images / ad-1 / cloud-3.png); pozycja: bezwzględna; góra: -5px; lewa: 530px; )

Animacje

Przypomnienie: Od tego momentu nic nie jest animowane. Jeśli spojrzysz teraz na nasz baner, zobaczysz statyczny obrazek. Tutaj tworzone są animacje, które są wywoływane w powyższym kodzie.

Teraz tchnijmy życie w nasz piękny statyczny obraz:

/ * Animacja z symulowanym opóźnieniem służy do wyświetlania wielu elementów. Opóźnienie jest symulowane przez rozpoczęcie procesu z kontynuowaniem 80% animacji (a nie natychmiast). W ten sposób można symulować dowolne opóźnienie: * / @keyframes opóźnione zanikanie animacji (0% (krycie: 0;) 80% (krycie: 0;) 100% (krycie: 1;)) / * Animacja wyświetlania formularz z adresem e-mail i przyciskiem. Wykorzystywana jest również symulacja opóźnienia * / @keyframes form-animation (0% (krycie: 0; prawy: -400px;) 90% (krycie: 0; prawy: -400px;) 95% (krycie: 0,5; prawy: 20px; ) 100% (przezroczystość: 1; prawa: 0px;)) / * Ta animacja służy do sprowadzenia łodzi poza ekran na początku filmu: * / @keyframes łódź-in-animation (0% (po lewej: -200px; ) 100% (po lewej : 20px;)) / * Animacja chmur. Pierwsza grupa chmur zaczyna przesuwać się od środka, a druga - na prawo od ekranu. Pierwsza grupa pojawia się powoli z ekranu, a druga po prawej. Gdy lewa grupa jest całkowicie ukryta, chmury bardzo szybko wracają do swojej pierwotnej pozycji: * / @keyframes cloud-animation (0% (po lewej: 0px;) 99.9999% (po lewej: -720px;) 100% (po lewej: 0px;) )) / * Ostatnie trzy animacje są prawie takie same - różnica polega na rozmieszczeniu elementów. Symulują nakładanie się fal oceanu: * / @keyframes animacja łodzi (0% (dół: 0px; lewy: 0px;) 25% (dół: -2px; lewy: -2px;) 70% (dół: 2px; lewy: - 4px;) 100% (dół: -1px; lewy: 0px;)) @keyframes water-back-animacja (0% (dół: 10px; lewy: -20px;) 25% (dół: 8px; lewy: -22px; ) 70% (dół: 12px; lewy: -24px;) 100% (dół: 9px; lewy: -20px;)) @keyframes water-front-animation (0% (dół: -70px; lewy: -30px;) 25% (dół: -68px; lewy: -32px;) 70% (dół: -72px; lewy: -34px;) 100% (dół: -69px; lewy: -30px;))

Wniosek

W tym samouczku poznaliśmy kilka kluczowych pojęć:

1. Elementy potomne oprócz animacji otrzymują animacje od swoich rodziców.
2. Tworząc baner, powinieneś starać się używać unikalnego identyfikatora, aby uniknąć nakładania się kodu z istniejącym projektem CSS.
3. Pozycję i styl elementów należy wybrać tak, jakby animacja nie była dostępna, aby zachować kompatybilność wsteczną.
4. Jeśli to możliwe, powinieneś użyć jednej animacji dla kilku elementów.