Ett exempel på att skapa en dynamisk banner i html. Responsiv bannerannons med HTML5 och CSS3

Generator för att komponera koden för bannern. Att utarbeta en bannerkod online är ett enkelt och enkelt förfarande. Varför behöver vi en banner på webbplatsen?
Vi lägger till en banner på webbplatsen för att annonsera varor, tjänster, varumärkesreklam, visa våra varor.

Vi lägger till en banner på webbplatsen för att marknadsföra annonser, tjänster, varumärkesreklam och så vidare.

Genom att placera bannerkoden på webbplatsen vill vi lyfta fram något och därmed locka uppmärksamhet.

Hur kan banners användas i praktiken?
Det kan finnas ett antal möjligheter att använda bannerannonsering. Låt oss ta ett verkligt exempel. Du har till exempel registrerat dig i ett affiliate-program. Som en del av detta program får du affiliate-länkar som du kan marknadsföra din produkt med.

Som regel, tillsammans med produktreklam, för att öka din inkomst får du en remisslänk för att locka andra partners.

Som material i affiliate-programmet kan du förses med färdiga banners. Således genom att placera banner-kod i nätverket, till exempel på din webbplats, annonserar du produkten och rekryterar dina egna partners.

Onlinetjänst för att få en bannerkod

Med hjälp av denna generator kan du skapa och göra klar HTML-kod för din knapp eller banner. Om du inte själv kan skriva koden får du genom att fylla i formuläret färdig HTML med ett klick som kan infogas på sidorna på webbplatsen. Din webbplatsadress Ingångsexempel: https: // webbplats / enter med https: // Bild-URL för banner eller knapp Ingångsexempel: https: //site//moibaneri/1703.gif Verktygstips när du svävar över en banner eller knapp (titel) Ett exempel på en popup-beskrivning: bonus webbplats banner Banderoll eller knappbredd (bredd) Inmatningsexempel (ange endast numeriskt

Annonsering är en nödvändig sak för alla webbplatser. Endast kostnaden för reklamverktyg är högre än intäkterna från det. Det är då många börjar vara smarta för att spara åtminstone lite. För sådana "knepiga" kommer vi att berätta hur du skapar en banner.

Vad är banners

En banner på Internet betyder en rektangulär reklambild med statiskt eller dynamiskt (animerat) innehåll. Bannern kan innehålla både text och grafik. Bannern är vanligtvis försedd med en länk som aktiveras efter att du har klickat på den med en musknapp.

Den nuvarande tillväxten av effektiviteten för bannerannonsering är förknippad med användningen av innehållsinriktning. Samtidigt annonseras endast de varor och tjänster som är "konsonant" med temat för resursen på webbplatsens banners:

Det skulle vara trevligt att veta hur du kan skapa en banner för din webbplats. Men först måste du förstå de befintliga typerna av banners. Det finns följande typer:

• Statiska banners - består av en statisk bild. De är bilder i JPEG- eller PNG-format. De kännetecknas av låg vikt, vilket inte påverkar sidhämtningshastigheten.
• Animerade banderoller - Animering skapad med GIF. Består av flera bilder som ersätter varandra med en given frekvens. Vikten på en banner beror på antalet bilder som används i den.
• Flash - i denna banneranimering baseras på Flash. Hon kan reagera på användarens handlingar.

Interaktivt innehåll kan vara i form av ett spel eller ett frågeformulär med extra ljud. Ritningar för animering skapas med vektorgrafik.

Det finns många olika bannerstorlekar för en webbplats. Men de mest populära av dem är:

• 88 x 31 pixlar;
• 120 x 60 pixlar;
• 120 x 90 pixlar;
• 120 x 240 pixlar;
• 125 x 125 pixlar;
• 120 x 600 pixlar;
• 160 x 600 pixlar;
• 180 x 150 pixlar;
• 234 x 60 pixlar;
• 240 x 400 pixlar;
• 250 x 250 pixlar;
• 300 x 600 pixlar;
• 300 x 250 pixlar;
• 336 x 280 pixlar;
• 150 x 150 pixlar;
• 468 x 60 pixlar;
• 728 gånger 90 pixlar.

Tecken på en effektiv bannerannons

Effektiviteten hos en reklambanner som placeras på en webbplats beror inte bara på webbplatsens popularitet. I större utsträckning beror effektiviteten på nivån på själva annonseringen. En högkvalitativ banner måste uppfylla flera grundläggande kriterier:

• Fånga användarens uppmärksamhet - men det betyder inte att bannern ska vara för ljus och blinkande. Sådan reklam kommer att irritera besökaren, inte uppmärksamhet. Innehållet i bannern bör diskret "antydas" till användaren om dess närvaro. Därför måste den psykologiska faktorn alltid beaktas när man väljer en bild och text för den.
• Väck intresse - banners för webbplatsen bör väcka användarens intresse för reklamobjektet. En produkt eller tjänst måste presenteras inte bara med smak utan också på ett originellt sätt. Användning av lätt humor och humor rekommenderas:

• Incitamentet att följa bannerlänken uppnås på grund av effekten av något mysterium och underdrift,
  inbäddad i bannerinnehållet.
• Motivationen att beställa en tjänst eller köpa - beror först och främst på innehållet i bannerannonsen. Den ska visa de bästa aspekterna av reklamobjektet eller fördelen som användaren kan få av att köpa det.
• Om bannern är avsedd att öka varumärkesmedvetenheten och öka dess image, bör reklaminnehållet ge en känsla av förtroende för konsumenten. Men orsaka inte negativa föreningar samtidigt.

Regelbundenheter som bör beaktas innan du lägger en banner på en webbplats:

• Ju större bannern är, desto större är sannolikheten för att en användare klickar på den. Den mest effektiva storleken anses vara 240 x 400 pixlar;
• Bannerannonser placerade högst upp (i rubriken) har störst effekt. Den kan också placeras på sidan eller längst ner på sidan, men effektiviteten är något lägre här;
• Animerade banners kan snabbt locka användarens uppmärksamhet - det mänskliga ögat reagerar intuitivt på rörelse.

Skapande och placering av en reklambanner

Innan du sätter in en banner på en webbplats måste du bestämma var den ska placeras. Det är nödvändigt att ta hänsyn till storleken på bannern och tillgängligt ledigt utrymme på sidorna. När du har bestämt dig för annonsenhetens plats kan du infoga bannerkoden på html-sidan.

Koden för de flesta banners matchar mönstret:

• a href = "/ länk till annonsörens webbplats" - adressen till den resurs som användaren kommer att ledas genom att klicka på bannern;
• title = "title" - texten som visas i popup-verktygstipsen när du svävar över bannerområdet;
• target = "_ blank" - anger reglerna för att visa annonsörens webbplats efter att ha klickat på bannellänken ("_blank" - öppnas i ett nytt fönster);
• rel = "nofollow" - hindrar sökmotorer från att behandla denna länk;
• img src = "https: //www.site/wp-content/uploads/path to image" - ställer in sökvägen till bilden som visas i bannern;
• alt = "alternativ text" - texten som kommer att visas i bannern om dess bild inte laddas.

Men du behöver inte själv designa en banner. För att göra detta kan du använda speciella onlinegeneratorer. För att skapa en bannerkod för en sådan tjänst måste du fylla i flera fält och klicka på knappen:

Eller så kan du beställa skapandet av en banner i en professionell studio. Då kostar det mer ... Här är de ungefärliga priserna:

• Utveckling av en vanlig GIF-banner - från $ 25;
• Flash-baserad bannerskapande - 70-150 $;
• Ändra storlek - cirka 50% av sitt ursprungliga pris.

Men om du är lite smart kan du skapa en enkel banner själv. Här är miraklet efter tio minuters manipulering av html-koden och bilden i Coreldraw:

Bannerkod:

Om du blir lite smart med koden och lägger till ett par evenemangshanterare får du en banner med en föränderlig bild. Bilden i bannern ändras när du svävar över den.

Här är vad som hände:

Exempelkod:

Skapande av animerade och videobanderoller

Låt oss titta på ett exempel på hur man skapar en animerad banner med Ulead GIF Animator-programmet.

I menyn "Arkiv" väljer du objektet "Animeringsguide". Ställ in storleken på den framtida bannern i fönstret som visas. I nästa steg laddar du de förberedda bilderna:

Sedan ställs hastigheten på att ändra bilderna i animationen. I ett litet fönster visas denna hastighet genom att ändra siffror.

Anpassningsförmåga- detta är ett av de viktiga kriterierna för webbplatser som just nu skapas. Många användare använder mobiltelefonskärmar för att surfa på nätet. Bannerannonser är vanliga på webbplatser och traditionella bannerannonser är inte flexibla. Flash och animerade GIF-banners är fixerade i pixlar, så de är inte kompatibla med moderna responsiva layouter.

Vi behöver ett nytt sätt att skapa bannerannonser.

Vi behöver lyhörd banderoller …

Nytt format för bannerannonser

Det enda sättet att göra dina annonsbannrar lika lyhörda som våra HTML5-layouter är att göra dem också med HTML5. Det här kanske låter som en galen idé först, men jag kan försäkra er att det inte är det. Faktum är att det finns många fördelar med HTML-baserade annonser.

• HTML-annonser är fullt tillgängliga, och den semantiska markeringen gör dem kompatibla med olika upplösningar.
• Text, bilder, video, Javascript och formulär kan användas i en banner precis som vilken webbsida som helst.
• Bannrar kan använda dynamiska serverskript och databaser, om det behövs.
• HTML-annonser kan ta mycket lite diskutrymme.
• Att betjäna en banner är i princip samma som ett webbhotell.
• Ingen ny teknik för webbutvecklare- det är detsamma som vanlig webbutveckling.
• och naturligtvis, HTML5-annonser kan ändras till valfri storlek med CSS3-mediefrågor- det här är precis vad vi behöver för lyhörda banners!

Så hur kan vi skapa responsiva annonser?

Det enda tricket är att göra iframe-dimensioneringen dynamisk med CSS3-mediefrågor, jag täcker det lite senare ... Men i grund och botten är det det!

Låt oss se hur det fungerar

Här är ett exempel på en HTML5-annons som visas i den populära storleken 125 × 125 pixlar:

Och här är samma deklaration med flexibel bredd:

Lägg märke till hur den andra annonsen reagerar när du ändrar storlek på webbläsarfönstret ... Ganska coolt! 🙂

Responsiva layouter kräver att sidelement har varierande bredd, så banners måste nu följa detta krav.

Bannerhöjd spelar ingen roll i responsiv design, så vi kan använda vilken höjd vi vill. Men att välja höjd betyder inte att vår annons sitter fast i den höjden, vi kan definiera flera höjder för varje annons!

För att behålla bakåtkompatibilitet måste responsiva annonser använda samma pixelhöjder som traditionella bannerstorlekar.

I teorin kan vi skapa lyhörda banners som fungerar med vilken bredd eller höjd som helst, men det är opraktiskt att bygga eller testa.

Jag föreslår att du håller dig till en minsta bredd på 88 pixlar och har följande uppsättning standardhöjder:

• 31 pixlar "mikro"
  mikrostång (88 x 31)
• 60px "knapp"
  knapp 2 (120 x 60)
  semi-banner (234 x 60)
  full banner (468 x 60)
• 90px "banner"
  knapp 1 (120 x 90)
  topplista (728 x 90)
• 125 pixlar "liten rektangel"
  fyrkantig knapp (125 x 125)
• 250 pixlar "medium rektangel"
  vertikal banner (120 x 240 * tillräckligt nära!)
  fyrkantig popup (250 x 250)
  medium rektangel (300 x 250)
• 400px "stor rektangel"
  vertikal rektangel (240 x 400)
• 600px "skyskrapa"
  skyskrapa (120 x 600)
  bred skyskrapa (240 x 600)
  halvsidesannons (300 x 600)

De sju pixelhöjderna jag valde ovan ger oss ett bra vertikalt intervall och med varierande bredder täcker vi de mest populära bannerannonsstorlekarna som används idag. Naturligtvis, som med traditionella banners, kan du skapa anpassade storlekar om du behöver dem.

Inte bara det, men min bannerannonsdemo kostar totalt sett mindre än 25 KB (HTML, CSS och JPG-bild). Detta är mindre än den maximala filstorleken för en liten banner!

Testa dessa nya bannerstorlekar med den responsiva annonskontrollen.

Ändra storlek på ramar med CSS-mediefrågor

Ibland kan du behöva responsiv annonshöjd, för det måste du ändra storlek på iframe med CSS-mediefrågor. Jag tror att det bästa sättet att göra detta är att ställa in bredden och höjden på iframe till 100% och placera dem i en div med specifika dimensioner som anges i CSS. Så här ser det ut:

< div id = "ad" > < iframe src = "ad.html" border = "0" rullning = "nej" allowtransparency = "true" bredd = "100%" höjd = "100%" style = "border: 0;" > < / iframe > < / div >

Och här är CSS:

/ * standardhöjd * / #ad (höjd: 60px;) @media endast skärm och (höjd: 90px) (/ * 90 pixlar hög * / #ad (höjd: 90px;)) @media endast skärm och (höjd: 125px ) (/ * 125 pixlar högt * / #ad (höjd: 125px;))

/ * standardhöjd * / #ad ( höjd: 60px; @media endast skärm och (höjd: 90px){ / * 90 pixlar hög * / #ad ( höjd: 90px; @media endast skärm och (höjd: 125px){ / * 125 pixlar hög * / #ad ( höjd: 125px;

Spåra intryck och klick

Det bästa med HTML5-annonser är att de kan spåras med Google Analytics, precis som på vanliga webbplatser.

Banner (engelsk banner - flagga, banner) - en grafisk bild av reklamkaraktär, som liknar reklammodulen i pressen. Det kan antingen vara en statisk bild eller till och med text eller så kan den innehålla animerade element (upp till video och interaktiva objekt). Som regel kan den innehålla en hyperlänk till annonsörens webbplats eller en sida med ytterligare information. Uppgifterna för bannern är som följer. Försälj först produkten. Så - locka till sig besökarens uppmärksamhet, intressera potentiell kund annonserad produkt eller tjänst, tryck för att gå till webbplatsen och framkalla handling(Uppmaning till handling). Det är CTA som är det yttersta målet för reklam. Och för det andra är bannerens uppgift bild- eller varumärkesannonsering vars syfte är öka varumärkesmedvetenheten och bygg en positiv varumärkesimage.

Populära typer av annonser på webbplatsen:

• Grafisk- en enkel typ av banner för reklam på Internet. Består av en bild av en viss storlek och innehåller en länk till en reklamresurs.
• Flash-banner- har stora möjligheter för animering, det låter dig bättre förmedla information med en kombination av vektorgrafik och rastergrafik.
• HTML5-banner-kombination av HTML-element med animationer och bra visuell design, anpassad för alla enheter och webbläsare.

De viktigaste skillnaderna mellan HTML och andra typer av banners
Jämfört med andra metoder för att skapa banners erbjuder HTML5-teknologier ett antal fördelar för att locka en publik till en resurs:

• Annonser i det här formatet visar samma på alla enheter utan ytterligare webbläsartillägg.
  HTML5 erbjuder fler alternativ för att integrera formulär, sociala medieknappar, kalendrar, kartor och andra applikationer i dina annonser.
• Lätt vikt och användning av färre resurser påverkar inte hastigheten på att ladda sidor i webbläsaren. Flash-teknik tillåter inte att detta resultat uppnås.
• För att utvärdera effektiviteten av HTML5-banners kan du visa statistik i Google Analytics. Det finns en mängd information om gäster och länkklick.

En betydande nackdel med flashteknik var att stora företag som Apple, Mozilla och Amazon gradvis övergavs. Google var den viktigaste drivkraften bakom försvinnandet av Flash. De stängde först av Flash-animationer i Google Chrome och dödade sedan Flash-annonser i sina sökannonseringstjänster och valde HTML5.

Sätt att skapa HTML-banners
Utvecklingen av en banner börjar med att skapa en separat sida och bäddas in på webbplatsen genom en "iframe". Det finns flera metoder för att utveckla reklambannrar för webbplatsen, vi kommer att betrakta de mest populära.

1. Skapa en ram med CSS3 och JavaScript
Med ramen kan du ladda alla oberoende dokument i ett område med angivna storlekar. Det kan vara en annan HTML-kod med hjälp av stilar och skript för dekoration. Det är också möjligt att implementera en banner genom "canvas" -området, där animationer, ritningar, grafik och till och med spel utvecklas med JavaScript. För att påskynda utvecklingen är det tillåtet att använda tredjepartsbibliotek, till exempel CreateJS.

Fördelar:

• Funktionaliteten är inte begränsad av några program, du kan implementera vad som helst.

nackdelar:

• Denna process är ganska komplicerad och kräver speciella layoutfärdigheter.
• Stora arbetskostnader i termer av tid i förhållande till andra metoder.

2. Adobe Edge Animate
De som är bekanta med Adobe After Effects kommer att hitta gränssnittet Adobe Edge Animate mycket bekant. Adobe Edge Animate har mer begränsad funktionalitet som syftar till att utveckla enkelt animerat innehåll med HTML5, JavaScript och CSS3. Programmet stöder import av sådana format som.svg, .png, .jpeg, .gif, HTML; stöd för video- och ljudformat.

Det finns mer än 30 inbyggda effekter, vilket förenklar tiden för att skapa högkvalitativ animering flera gånger:

Fördelar:

• Det finns många tillgängliga videohandledning på nätet om hur du använder programmet.
• Enkel funktionalitet, de flesta processerna är automatiserade.
• Programmet kräver inte kunskap om HTML5, JavaScript och CSS3.
• Efter avslutat arbete får vi alla nödvändiga dokument för att placera bannern på webbplatsen. Bilder - en mapp med bannerelement, flera JavaScript, html-filer och en An-fil - för efterföljande redigering av filen i programmet.
• Den färdiga bannern stöds av alla moderna webbläsare och mobilapplikationer, uppfyller alla tekniska krav för reklamkampanjer i Yandex och Google.

nackdelar:

• Gränssnittet är endast på engelska.
• Sedan 2015 har Adobe slutat utveckla Adobe Edge Animate-projektet, programmet har inte uppdaterats sedan dess och har nått sin utvecklingsgräns. Edge Animate är fortfarande tillgänglig för nedladdning från Creative Cloud-arkiven.

3. Adobe Animate CC
Animate CC är ett döpt Adobe Flash Professional-produkt. Nyligen har Flash-tekniken tappat användarnas förtroende, programmet behövde namnbyte och flera förbättringar. I grund och botten är detta samma Flash Professional-program, men där filerna dessutom sparas i HTML5 och JavaScript.

Gränssnittet liknar Flash Professional, men programmens funktioner skiljer sig åt.

Fördelar:

• Möjligheten att skapa tredimensionell grafik. Det finns ett kameraverktyg som låter dig fånga djupet på ramen för riktig animering.
• Till skillnad från Edge Animate har Animate CC ett stort urval vektorborstar och möjligheten att arbeta med bitmappsgrafik.
• Programmet är relativt nytt, så Adobe utvecklar aktivt projektet, släpper uppdateringar och förbättrar Animate CC.
• Det finns en rysskspråkig version.
• Utökade alternativ för att exportera en fil till format: JavaScript / Html, jpeg, png, oam, svg, mov, gif. Genom att trycka på en knapp sparas bannerens element i spritesna, vilket minskar bannerens laddningstid.

nackdelar:

• Programmets nyhet är också en nackdel. Det finns inte så många animationshandledning i Animate CC som i Adobe Edge Animate. Därför måste arbetet med vissa funktioner studeras självständigt, vilket inte är lätt. Programmet är ganska svårt för oberoende studier, men du kan räkna ut det.
• Vissa funktioner är inte automatiserade som i Edge Animate, vilket också ökar skapandetiden för banner.

4. Google Web Designer
Google glädde oss med en gratis redigerare speciellt skapad för implementering av html-banners. Google Web Designer är helt inriktad på att implementera reklam, vars huvudsakliga inriktning riktas mot AdWords.

Om vi ​​tittar på fönstret för att skapa en ny fil kommer vi att märka att storlekarna på annonsmallar redan är inbyggda i programmet.

Fördelar:

• Enkelt gränssnitt.
• Tillgänglighet av mallar för reklam på google.
• Helt gratis program.
• Tillgänglighet för den rysskspråkiga versionen.
• Responsiv banner design läggs, html-banner ser bra ut i alla skärmupplösningar.

nackdelar:

• Funktionen hos Google Web Designer är tillräckligt smal för att skapa mästerverk av animering. Programmet är starkt begränsat av mallar.
• Brist på träningsprogram. Googles hjälp räcker inte för att helt lära ut funktionerna.

Alla metoder som presenteras ovan är inte nya, men de är bevisade. Detta innebär att det finns en garanti för att de skapade html-banners modereras på de flesta reklamplattformar, eftersom deras tekniska krav motsvarar allmänna standarder.

Låt oss skapa en annonsbanner med CSS3. För närvarande har endast Firefox- och WebKit-webbläsare fullt stöd för CSS3-animationer. Men det är enkelt att få bannern att fungera i andra webbläsare. Du bör dock inte förvänta dig bra prestanda överallt (särskilt i IE 7 och äldre) som experimenterar med de senaste CSS-teknikerna.

Notera: Alla webbläsarens leverantörsprefix har utelämnats för att spara sidutrymme. Se källkod.

HTML-markering

Låt oss först titta på strukturen för en banner i HTML. I detta skede måste vi föreställa oss hur animationen kommer att fungera:

För en djupare förståelse av markeringsstrukturen, låt oss fokusera på båten:

Det pågår tre animationer med båten:

Skjut båten åt vänster. Gäller en oordnad lista (grupp).

Imitation av en båt som gungar på vattnet. Gäller listobjektet (båt).

Utseendet på ett frågetecken. Gäller div-elementet (frågetecken).

Om du tittar på demosidan kan du se att animationen för listobjektet (båt) också påverkar div-elementet inuti det (frågetecken). Dessutom "animeringen" för en oordnad lista påverkar listobjektet (båt och frågetecken).

Därför kan vi dra slutsatsen att barn får animationer från sina föräldrar utöver sina egna handlingar. Nu återstår bara att lista över föräldrar / barnstrukturer.

CSS

Innan vi börjar analysera hur man skapar animationer måste vi säkerställa bakåtkompatibilitet med äldre webbläsare.

bakåtkompatibilitet

Vi kommer att säkerställa bakåtkompatibilitet genom att helt enkelt utforma markeringen som om det inte fanns några CSS-animationer alls. Om någon tittar på sidan i en gammal webbläsare ser de en vanlig statisk bild och inte ett tomt vitt utrymme.

Till exempel: om du använder CSS? liknande nedan, då kommer det att finnas problem:

/ * FEL! * / @ keyframe our-fade-in-animation (0% (opacitet: 0;) 100% (opacity: 1;)) div (opacity: 0; / * Denna div är dold som standard - oh! * / animation: vår -fade-in-animation 1s 1;)

Om webbläsaren inte stöder animationer förblir div-elementet osynligt för användaren.

Så här säkerställer vi bakåtkompatibilitet med äldre webbläsare:

/ * CORRECT * / @keyframe our-fade-in-animation (0% (opacitet: 0;) 100% (opacity: 1;)) div (opacity: 1; / * Denna div är synlig som standard * / animation: vår -fade-in-animation 1s 1;)

Nu kommer div-elementet att återges även om animeringen inte startar. Och i moderna webbläsare kommer div att döljas först under animering.

Grunden

Nu vet vi hur vi kan säkerställa bakåtkompatibilitet (vilket hjälper till att undvika problem när du arbetar med riktiga projekt). Det är dags att skapa kärnan i vår CSS-kod.

Det finns 3 poäng att tänka på:

Eftersom bannern kommer att användas på olika webbplatser, vi kommer att göra alla våra CSS-väljare speciella. De börjar alla med # ad-1-identifierare. Således kommer vi att försöka undvika att överlappa vår kod och webbplatskoden.

Vi ignorerar avsiktligt animeringsfördröjningen i installationer. Om du använder animeringsfördröjningen när du ställer in stilar med standardelementets synlighet kommer strukturen på bannern att störas av det plötsliga försvinnandet eller återkomsten av delar av bilden efter att animeringen avslutats. Animationsfördröjningen simuleras av ramarnas varaktighet och inställning.

När det är möjligt använd en animering för flera element. Således sparar vi tid och minskar storleken på koden.

Så låt oss skapa grunden för vår banner. Låt oss ställa in relativ positionering för den så att interna element kan placeras korrekt. Det kommer också att dölja allt utanför elementet:

# ad-1 (bredd: 720px; höjd: 300px; float: vänster; marginal: 40px auto 0; bakgrundsbild: url (../ images / ad-1 / background.png); bakgrundsposition: center; bakgrund -repeat: no-repeat; overflow: hidden; position: relative; box-shadow: 0px 0px 6px # 000;)

Sedan utformar vi text- och inmatningsfälten. Vi kallar lämpliga animationer. Du måste också se till att innehållet har det högsta z-indexet för de rörliga delarna så att de inte överlappar varandra:

# ad-1 #content (width: 325px; float: right; margin: 40px; text-align: center; z-index: 4; position: relative; overflow: visible;) # ad-1 h2 (font-family: "Alfa Slab One", kursiv; färg: # 137dd5; teckenstorlek: 50px; radhöjd: 50px; text-skugga: 0px 0px 4px #fff; animering: fördröjd-fade-animation 7s 1 lätt-in-ut; / * Utseende för h2 med simulerad fördröjning * /) # ad-1 h3 (font-family: "Boogaloo", kursiv; färg: # 202224; font-storlek: 31 pixlar; radhöjd: 31 pixlar; text-skugga: 0 pixlar 0 pixlar 4px #fff; animation: delayed-fade-animation 10s 1 lätthet-in-ut; / * Utseendet på h3 med simulerad fördröjning * /) # ad-1-form (marginal: 30px 0 0 6px; position: relativ; animation: form-animation 12s 1 enkel in-ut; / * Ease-in-out; / * Glid ut e-postformulär med simulerad fördröjning * /) # ad-1 #email (bredd: 158px; höjd: 48px; float: vänster; 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-botten-vänster-radie: 5px; gräns: 1px fast # a2917d; disposition: ingen; box-shadow: -1px -1px 1px #fff; bakgrundsfärg: # c7b29b; bakgrundsbild: linjär gradient (botten, rgb (216,201,185) 0%, rgb (199,178,155) 100%); ) # ad-1 #email: fokus (bakgrundsbild: linjär gradient (botten, rgb (199,178,155) 0%, rgb (199,178,155) 100%);) # ad-1 #sänd (höjd: 50px; flottör: vänster ; markör: pekare; vaddering: 0 20px; fontstorlek: 20px; font-family: "Boogaloo", kursiv; färg: # 137dd5; text-skugga: 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 #sänd: sväva (bakgrundsbild: linjär gradient (botten, rgb (255255255) 0%, rgb (255255255) 100%);)

Låt oss nu utforma vattnet och kalla rätt animation:

# ad-1 ul # water (/ * Om du behöver en annan animation för vatten kan du lägga till den här * /) # ad-1 li # water-back (bredd: 1200px; höjd: 84px; bakgrundsbild: url ( .. /images/ad-1/water-back.png); bakgrundsupprepning: repetera-x; z-index: 1; position: absolut; botten: 10px; vänster: -20px; animering: vatten-back-animering 3s oändlig lätthet in / ut; / * Simulera våglapning * /) # ad-1 li # vattenfront (bredd: 1200px; höjd: 158px; bakgrundsbild: url (../ images / ad-1 / water -front .png); bakgrundsupprepning: repetera-x; z-index: 3; position: absolut; botten: -70px; vänster: -30px; animering: vatten-front-animering 2s oändlig lätthet-in-ut; / * Annan imitation av vågor som slår. Animering kommer att gå lite snabbare för att skapa en perspektiveffekt. * /)

Låt oss utforma båten och dess element. Vi kallar också motsvarande animationer:

# ad-1 ul # båt (bredd: 249px; höjd: 215px; z-index: 2; position: absolut; botten: 25px; vänster: 20px; överflöde: synlig; animation: boat-in-animation 3s 1 lätthet ; / * Glider in gruppen när annonsen startar * /) # ad-1 ul # boat li (bredd: 249px; höjd: 215px; bakgrundsbild: url (../ images / ad-1 / boat.png); position: absolut; botten: 0px; vänster: 0px; överflöde: synlig; animering: båt-animering 2s oändlig lätthet-in-ut; / * Simulera båten som vinkar på vattnet - liknande den animering som redan används på själva vattnet. * /) # ad-1 # frågetecken (bredd: 24px; höjd: 50px; bakgrundsbild: url (../bilder / ad-1 / frågetecken.png); position: absolut; höger: 34px; top: -30px; animation: delayed-fade-animation 4s 1 lätthet-in-ut; / * Fade i frågetecknet * /)

Låt oss nu utforma molnen. För dessa kommer vi att använda animering med en ändlös rörelseeffekt. illustration visar kärnan i idén:

Och här är CSS-koden:

# ad-1 #clouds (position: absolute; top: 0px; z-index: 0; animation: cloud-animation 30s oändlig linjär; / * Bläddra molnen åt vänster, återställ och upprepa * /) # ad-1 # molngrupp -1 (bredd: 720px; position: absolut; vänster: 0px;) # ad-1 # cloud-group-2 (bredd: 720px; position: absolut; vänster: 720px;) # ad-1 .cloud- 1 (bredd: 172px; höjd: 121px; bakgrundsbild: url (../ images / ad-1 / cloud-1.png); position: absolut; top: 10px; vänster: 40px;) # ad-1. moln-2 (bredd: 121px; höjd: 75px; bakgrundsbild: url (../ bilder / ad-1 / cloud-2.png); position: absolut; topp: -25px; vänster: 300px;) # annons -1. Moln-3 (bredd: 132 pixlar; höjd: 105 pixlar; bakgrundsbild: url (../ bilder / ad-1 / moln-3.png); position: absolut; överst: -5 pixlar; vänster: 530 bildpunkter; )

Animationer

Påminnelse: Från och med nu är inget faktiskt animerat. Om du tittar på vår banner nu ser du en statisk bild. Det är här animationer skapas som kallas i ovanstående kod.

Låt oss nu blåsa liv i vår vackra statiska bild:

/ * Animering med simulerad fördröjning används för att visa flera objekt. Förseningen simuleras genom att starta processen med 80% av animeringen fortsätter (snarare än omedelbart). Så här kan du simulera alla fördröjningar: * / @ keyframes delayed-fade-animation (0% (opacity: 0;) 80% (opacity: 0;) 100% (opacity: 1;)) / * Animation för att visa en formulär med en e-postadress och en knapp. Latency-simulering används också * / @keyframes form-animation (0% (opacitet: 0; höger: -400px;) 90% (opacitet: 0; höger: -400px;) 95% (opacitet: 0,5; höger: 20px; ) 100% (opacitet: 1; höger: 0px;)) / * Den här animationen används för att ta bort båten från början av videon: * / @keyframes boat-in-animation (0% (vänster: -200px; ) 100% (vänster: 20px;)) / * Animering för moln. Den första molngruppen börjar röra sig från mitten och den andra - till höger om skärmen. Den första gruppen visas långsamt från skärmen, medan den andra visas till höger. När den vänstra gruppen är helt dold återgår molnen till sin ursprungliga position mycket snabbt: * / @keyframes cloud-animation (0% (vänster: 0px;) 99,9999% (vänster: -720px;) 100% (vänster: 0px; )) / * De sista tre animationerna är nästan desamma - skillnaden ligger i elementens placering. De simulerar havsvågor som slår: * / @keyframes boat-animation (0% (botten: 0px; vänster: 0px;) 25% (botten: -2px; vänster: -2px;) 70% (botten: 2px; vänster: - 4px;) 100% (botten: -1px; vänster: 0px;)) @keyframes water-back-animation (0% (botten: 10px; vänster: -20px;) 25% (botten: 8px; vänster: -22px; ) 70% (botten: 12px; vänster: -24px;) 100% (botten: 9px; vänster: -20px;)) @keyframes water-front-animation (0% (botten: -70px; vänster: -30px;) 25% (botten: -68px; vänster: -32px;) 70% (botten: -72px; vänster: -34px;) 100% (botten: -69px; vänster: -30px;))

Slutsats

I den här handledningen lärde vi oss några nyckelbegrepp:

1. Efterkommande element får animationer från sina föräldrar utöver sina animationer.
2. När du skapar en banner bör du sträva efter att använda en unik identifierare för att undvika överlappande kod med ett befintligt CSS-projekt.
3. Elementens position och stil bör väljas som om animationen inte var tillgänglig för att bibehålla bakåtkompatibilitet.
4. Om möjligt bör du använda en animering för flera element.