Un esempio di creazione di un banner dinamico in HTML. Se non conosci l'HTML, inserisci il codice per il banner. Aggiungi banner ad ADFOX

Banner HTML5

incluso 2299 sfregamenti.

Al giorno d'oggi, i banner HTML5 sono l'unico formato corrente per banner pubblicitari completamente animati. Questo formato multipiattaforma universale è stato sostituito dai banner Flash, che hanno creato una serie di limiti e carenze.

Le ragioni principali di tale comportamento sono le seguenti:

• alla tecnologia Flash, le affermazioni si sono accumulate sul campo sicurezza del computer quella maggiore riduzione della pressione del processore degli allegati mobili;
• alcuni browser hanno iniziato a bloccare la visualizzazione di Flash per blocco;
• SU annessi mobili iOs (iPhone, iPad) la visualizzazione di lettere Flash non viene trasmessa dal virobnik;
• popolarità dei programmi di blocco nei banner pubblicitari Flash;
• Vіdmova con podshої pіdtrimki i razvitie Flash-tehnologii її її vlasnik, azienda Adobe.

I banner HTML5 animati possono essere visualizzati senza bordi in qualsiasi browser, sullo schermo, allegherò qualsiasi, inclusi smartphone, tablet e media TV. A chi polygaє їх multipiattaforma e versatilità.

Per il brand name manager, i banner HTML5 significano che espanderemo il nostro pubblico senza spendere soldi.

Cosa può essere un banner HTML5?

Bagato. Anche questo è un formato avanzato, che attribuisce il rispetto di un koristuvach e navit vzaєmodіє z him (banner interattivo).

Dal punto di vista dell'animazione, un tale banner può mostrare animazione vettoriale (senza ridimensionamento), animazione di personaggi, foto, loghi, grafica e diagrammi, testo e animazione 3D di visualizzazione. Dal punto di vista dell'interattività, il banner HTML5 può reagire alla diversificazione e propagarti contenuti aggiuntivi e fattibilità. Dal punto di vista del trasporto dei media, il banner HTML5 può riprodurre video, diapositive e registrazioni audio. Dal punto di vista dell'adattabilità, i banner HTML5 possono estendersi per l'intera larghezza del lato, espandere il pannello aggiuntivo o espandersi a schermo intero.

Diamo un'occhiata ai principali tipi di banner HTML5.

Banner HTML5 animato di dimensioni fisse.
Il formato più popolare per la maggior parte dei mezzi pubblicitari. La larghezza e l'altezza dei banner richiesti vengono selezionate dall'elenco di quelli accettati prima del posizionamento. Mostriamo sempre l'espansione più ampia.

Banner HTML5 (adattivo, gumovy) che si allunga.
Si tratta di un banner, che può essere allungato, occupando l'intera larghezza (e altezza) dello schermo. (Il rapporto può essere riconosciuto in questo articolo)

Banner HTML5 a schermo intero.
Il banner viene visualizzato su tutto lo schermo. Di norma, imposta il timer per visualizzare il pulsante "Chiudi". Particolarmente popolare per la visualizzazione su estensioni mobili.

Spesso tale banner può essere adattivo con la regolazione di diversi orientamenti e consentire un allegato mobile.

Banner HTML5 (espanso) da espandere.
C'è solo un pannello iniziale di tale banner (teaser) sullo schermo. Sotto l'ora di attesa dell'algoritmo dato (puntando l'orso o spingendo, il timer, o altro, a lato), viene visualizzata un'altra parte del banner con ulteriori informazioni estese.

Bandiera video HTML5.

Non appena colpisci la pubblicità maidan, puoi mostrare il video clip come se fosse in avvio automatico, quindi dopo aver premuto il pulsante "Riproduci". Puoi vendicarti dei pulsanti e disattivare il suono. Il file video sarà ospitato su hosting esterno e verrà ripreso per un'ora di proiezione.

Banner interattivi di gioco.
Baneri, yakі chiama koristuvacha accendi il gruppo, vykonuyuchi semplice fai da te.

Tali banner trasformano il rispetto del pubblico di destinazione, suscitano un vivo interesse e allo stesso tempo creano un limite basso (ad esempio, la presenza di puntare un mouse su annessi mobili o lo scambio di script aggiuntivi). Ti parleremo con certezza delle caratteristiche speciali di vipadka, poiché hai deciso di creare un banner HTML5 giocabile.

Banner HTML5 intelligenti (calcolatrici).
Vykoristovuyutsya per zaluchennya e vzaєmodії z koristuvachem, proponuyuchi yoma negainok razrahunok per i parametri richiesti e la formula fornita dall'algoritmo interno (ad esempio, prestito rozrakhunok, mutuo, vitrati budmaterialіv e altre operazioni maldestre).

Banner HTML5 da modificare– in alcuni casi, lo zamovnik deve apportare rapidamente modifiche ai banner, senza ricorrere all'aiuto del rivenditore (ad esempio prezzi, vodsotki o quotazione, che vengono spesso modificati). Possiamo eseguire tali attività e inserire i parametri necessari direttamente nel codice HTML del banner, dove il gestore può apportare modifiche in modo indipendente. Puoi chiedere una migliore decisione su come vedere i dati, che saranno vinti dal banner, ai file originali.

Banner HTML5, utilizzati per migliorare i dati e le API esistenti.
Al momento, ci sono molti banner pubblicitari per bloccare il banner fino a vecchio dzherelam. Tuttavia, poiché il banner è posizionato sul sito, il che offre tale possibilità, un banner HTML5 può richiedere le informazioni necessarie (testo, numeri, virgolette) al sito tramite l'API, che viene elaborata dopo un determinato algoritmo, mostra il corretto informazione.

Banner 3D HTML5.
Tali stendardi trasformano il rispetto del coristuvach, creando un modello ob'emnі dell'immagine sul lato.

Il banner HTML5 3D può essere implementato nella vista dell'oggetto, che si avvolge, nei bordi della cornice del banner, nella vista del libro, che si apre, o altri effetti 3D.

Tieni presente che il banner HTML5 può includere un paio di descrizioni delle funzioni. Ad esempio, un banner video può estendersi su tutta la larghezza del lato e un'animazione trivimer può essere riprodotta sul lato in modo incolto.

Se vuoi creare un banner HTML5 sul nostro sito e un'idea creativa richiederà un mix di formati diversi, dai forza alla nostra fahivtsy.

Banner HTML5: qual è il tuo e tecnicamente?

Il modo migliore è accettare il banner HTML5 come mini-sito. Senza interruzione.

HTML5, come chiamarlo formato striscioneє il mio layout dei lati web, kazhuchi più semplice, layout. І verstaєtsya secondo le stesse leggi, che sito moderno. Può sostituire contenitori div, caratteri, che sono collegati, stili css e lo script js. L'elemento head è il contenitore dell'animazione canvas. L'animazione stessa è realizzata con aiuto java script, la maggior parte dei quali sono sviluppati appositamente per le librerie js di animazione.

Cosa c'è in mezzo? Novità negli archivi? Perché così tanti file?

Aje mi zvikli, scho banner - tse un file immagine JPG o "gifka" o "flash drive". Ma indovina un po', come abbiamo scritto prima, il banner HTML5 è, in realtà, un mini-sito. In alcuni file anonimi e consegnati alla maidan pubblicitaria nell'archivio zip. L'archivio contiene il file head HTML, i file degli script java, le librerie, i fogli di stile e le immagini.

Nota. Per alcuni tipi di pubblicità, puoi utilizzare l'intero banner in un unico file, inclusi fino al nuovo tutti gli script e le immagini nel formato base-64. Questo non è un problema per un rivenditore certificato. Tuttavia, un tale aumento del termine di preparazione del banner e l'introduzione di un nuovo cambiamento possono aiutare. Fortunatamente, un tale vimoga trapleyaetsya raramente.

Come posso vedere i banner pubblicitari HTML5 sul mio computer?

Tipo di semplice. Decomprimi gli archivi zip e apri il file, che si trova nel mezzo dell'HTML, nel tuo browser.

Come posso fraintendere che ho creato un banner HTML5 valido?

Come un banner viene creato per la pubblicità Servizi Google Spetta ai tuoi servizi uno strumento meraviglioso per verificare la qualità del lavoro di un designer: un validatore HTML5 online di Google. È facile controllare con lui: prendi il tuo archivio zip con un banner e chiediti se hai controllato la lista di controllo. Le grazie saranno contrassegnate con distintivi rossi. Yakshcho їх nemaє - il tuo rivenditore non è gratuito e il banner è pronto per essere posizionato GoogleAdwords o doppio clic.

Per le reti pubblicitarie Yandex, Mail.ru, Rambler, adFox, adRiver e altre, è prevista anche una nuova verifica della validità del banner per l'assistenza tecnica dopo che è stato attratto dal sito Web del sistema. Se hai problemi, puoi prendere il commento del moderatore con una descrizione dell'indulto. Deyakі maidanchiki offre al deputato della pubblicità l'opportunità revisione in avanti banner sul lato del test.

Eppure, la migliore garanzia della corretta preparazione del banner HTML5 è l'approvazione del rivenditore, la conoscenza dei mezzi tecnici di pubblicità maydanchikiv e la disponibilità a correggere tempestivamente le grazie.

E un banner con animazione in Java Script - perché altrimenti?

Non lasciarti perdere. "Java Script banner", "Canvas banner" - scegli tu stesso quelli che vengono comunemente chiamati "banner HTML5". Le regole di js-library o layout possono essere modificate allo stesso modo dello strumento del rivenditore, ma lo schema di selezione generale è riempito con lo stesso.

Come creare un banner HTML5?

L'editor di middle designer più popolare per la creazione di animazioni HTML5 è Programma Adobe Animare.

Google promuove il proprio strumento di sviluppo: Google Web Designer. Tra gli altri plus la presenza di template senza volto e la possibilità di pubblicare un banner senza intermediari per i servizi pubblicitari di Google: AdWords e Double Click. Tra gli svantaggi c'è la riduzione della possibilità di animazione.

I disegnatori di recitazione, per lo più americani, sono l'editore della libreria Green Sock Animation Platform. Tuttavia, nel nostro paese il fetore non si è riempito di una larghezza significativa.

Vrakhovuchi tutto componenti richiesti essere se stessi codice aperto, un buon specialista può creare un banner HTML5 per i più semplici editor di testo. Tuttavia, tale metodo non è efficace, è paragonabile ai programmi di animazione professionale.

Supporto tecnico per banner HTML5.

Il trambusto dei Wimog:

• titolo banner HTML5 in kb;
• struttura dell'archivio zip, numero di cartelle e file;
• modifica dei formati di file consentiti;
• il metodo per abilitare l'invio di URL su un clic su un banner (firmware banner);
• trasferimento di librerie js consentite su hosting esterni;
• l'ordine e lo scambio di collegamento di file video e audio;
• Imogi prima del design del telaio, delle dichiarazioni di non responsabilità, della frequenza e del numero di cicli di animazione, aggiungerò al processore.

Sono lontano da nuova traduzione potremmo, per così dire, essere in grado di imbrogliare i nostri rivenditori, in modo da poter inviare un banner HTML5 al gestore, preparandoci al lancio della campagna pubblicitaria senza intoppi.

Cosa devo fare con i miei banner Flash creati in precedenza?

Guarda tu stesso: la maggior parte dei media pubblicitari non accetta più banner Flash prima di essere posizionati, i componenti Flash sono bloccati nei browser e nei dispositivi iOs, bloccando il loro robot Swiffy (l'unico convertitore di banner Flash online adeguato per HTML5).

La conversione automatica dal formato Flash a HTML5 è praticamente impossibile: è necessario, infatti, convertire manualmente gli editor HTML5. In una situazione del genere, la decisione corretta sarebbe quella di creare un nuovo set di banner animati, formato universale Html5.

E che dire delle "gif"?

È necessario capire cos'è un'animazione GIF: l'ultima serie di immagini di fotogrammi, come nei file video. Un file GIF può contenere informazioni sulla velocità di elaborazione dei fotogrammi e sul numero di ripetizioni. Tsim Yogo Mozhlivostі obmezhuyutsya.

Il banner GIF non è accettabile grafica vettoriale, creare animazioni in modo programmatico, adattarsi a richiesto rosmarino e molte altre cose che le animazioni dei banner HTML5 possono facilmente gestire.

Cosa significa per un inserzionista?

Il problema del vagabondo sovramondiale. Quindi, їy skhilnі navit banery. Tutte le grandi pubblicità del Maidan mostrano solo pochi banner pubblicitari in kilobyte.

Un banner GIF è utile per mostrare alcuni fotogrammi statici, magari con una piccola animazione di testo, o pulsanti per cambiare foto. Per questo motivo, il banner GIF non dovrebbe andare oltre i confini della maidanchik pubblicitaria.

Man mano che l'animazione inizia a cambiare di qualche centinaio di fotogrammi, il banner gif crescerà, come se fosse inglese, "drammaticamente", cioè drammatico. Una gif di 20 secondi con molti megabyte è sulla destra. Non mi adeguo al limite misure pubblicitarie, yakі giustamente turbovanі tim, sіlki trafіku accade zavantazhit koristuvachevі per rivisitare il banner.

Inoltre, poiché hai bisogno di un banner con effetti di animazione impersonali, animazione dei personaggi, un banner interattivo, adattivo o video, scegli il banner HTML5 stesso.

Adattabilità- questo è uno dei criteri più importanti per i siti creati contemporaneamente. Ricchi schermi di corystuvachіv vikoristuyut cellulari per rivedere le risorse web. I siti Web possono spesso visualizzare banner pubblicitari e i banner pubblicitari tradizionali non sono gommosi. Flash e banner GIF animati possono correggere la dimensione dei pixel, quindi la puzza non è la stessa con i layout adattivi di oggi.

Abbiamo bisogno nuovo modo creare un banner pubblicitario.

Abbiamo bisogno banner adattivi …

Nuovo formato per i banner pubblicitari

L'unico modo per creare banner pubblicitari è strano come i nostri layout HTML5, ma può essere fatto anche con HTML5. Il più delle volte, può sembrare un'idea divina, ma ti canto, ma non così. In realtà, ci sono molti vantaggi per la pubblicità in HTML.

• La voce fuori campo HTML è ora disponibile e il rozmіka semantico per derubarli con summіsnym con autorizzazioni diverse.
• Testo, immagini, video, Javascript e form Puoi essere presente nel banner così com'è, come se fosse un sito web.
• I banner possono alterare gli script dinamici del server quel bazi danikh, come è necessario.
• Le voci fuori campo HTML possono occupare molto spazio su disco.
• La manutenzione dei banner è la stessa del web hosting.
• CIAO nuove tecnologie per rivenditori online- eccola, come un grande sviluppo web.
• e splendidamente, I voiceover HTML5 possono essere adattati a qualsiasi dimensione con l'aiuto dei media CSS3— proprio quelli di cui abbiamo bisogno per i banner adattivi!

Otzhe, come possiamo generare strane pubblicità?

L'unico trucco è far espandere dinamicamente l'iframe per l'aiuto dei media CSS3, ti dirò circa tre cose all'anno ... Ma praticamente tutto!

Ci meravigliamo di come funziona

Asse del rendering HTML5 stock mostrato nella dimensione popolare 125 × 125 pixel:

E l'asse è lo stesso goloshennya con una larghezza storta:

Rispetta, come reazione a un'altra calunnia pubblicitaria, se cambi le dimensioni della finestra del tuo browser ... Finiscilo bene! 🙂

I layout reattivi cambieranno, in modo che gli elementi del lato siano piccoli per cambiare la larghezza, che ora è responsabilità dei banner per tagliare la larghezza della finestra.

L'altezza del banner non è di grande importanza per il design adattivo, quindi possiamo cambiare l'altezza come preferisci. Ale vibir height non significa che la nostra voce sia bloccata su questa altezza, possiamo designare uno spratto di altezza per intorpidimento della pelle!

Per garantire una sommatoria salutare, la voce adattiva è responsabile della digitazione della stessa altezza di pixel, come i banner tradizionali.

In teoria, potremmo creare banner adattivi, anche se funzionanti di qualsiasi larghezza o altezza, ma non è pratico per creare test.

Sto sostenendo la larghezza minima di 88 pixel e la madre del set offensivo di altezze standard:

• 31px "micro"
  Microbar (88 x 31)
• 60px "pulsante"
  pulsante 2 (120 x 60)
  banner di supporto (234 x 60)
  bandiera superiore (468 x 60)
• 90px "striscione"
  pulsante 1 (120 x 90)
  classifica (728 x 90)
• 125px "rettangolo piccolo"
  bottone quadrato (125 x 125)
• 250px "rettangolo centrale"
  banner verticale (120 x 240* finitura chiudi!)
  finestra di giunzione quadrata (250 x 250)
  rettangolo centrale (300 x 250)
• 400px "grande piazza"
  rettangolo verticale (240 x 400)
• 600px "hmarochos"
  hmarochos (120 x 600)
  hmarochos largo (240 x 600)
  pubblicità su p_vstorinki (300 x 600)

Con le altezze dei pixel, come ho scelto di più, ci danno un'ampia gamma verticale e una larghezza variabile, copriamo le dimensioni più popolari dei banner pubblicitari, poiché oggi sono vittoriosi. Ovviamente, proprio come i banner tradizionali, puoi creare dimensioni non standard quando ne hai bisogno.

Non solo, ma il mio annuncio banner dimostrativo ha un costo totale inferiore a 25 KB (HTML, CSS e immagine JPG). Meno, dimensione massima inferiore per un file di un piccolo banner!

Prova questi nuovi ridimensionamenti dei banner per un ulteriore software di overscanning vocale adattivo.

Modifica della frequenza dei fotogrammi per il supporto multimediale CSS

A volte hai bisogno di un'altezza reattiva per gli annunci, per i quali devi modificare la dimensione dell'iframe per ulteriori media CSS. mi interessa cosa via più breve Invece, imposta la larghezza e l'altezza dell'iframe al 100% e inseriscile in un div con le dimensioni specifiche impostate nel CSS. L'asse si presenta così:

Un asse i css:

/* altezza predefinita */ #ad ( height:60px; ) @media solo schermo e (height:90px) ( /* 90 pixel di altezza */ #ad ( height:90px; ) ) @media solo schermo e (height:125px ) ( /* 125 pixel di altezza */ #annuncio ( altezza:125px; ) )

Spettacoli e clic

I migliori in voiceover HTML5: puoi vederli aiuta Google Analytics, come sui grandi siti web.

Zrobimo striscione pubblicitario per assistenza con CSS3. In quest'ora aggiungerò solo animazioni CSS3 Browser Firefox e WebKit. Ale dosit just zmusiti banner pratsyuvati in altri browser. Prote, dopo aver sperimentato nuove tecniche CSS (soprattutto in IE 7 e precedenti) per vedere la funzionalità miracolosa.

Nota: Per risparmiare tempo, tutti i prefissi dei browser del browser vengono omessi. Guarda il codice nei record di output.

Marcatura HTML

Diamo un'occhiata alla struttura del banner HTML. In questa fase, è mia responsabilità mostrare come funziona l'animazione:

Per una comprensione più approfondita della struttura del contorno, concentrati sul corpo:

Ci sono tre animazioni in generale:

Vislizuvannya chovna malvagio. Si ferma per un elenco non ordinato (gruppo).

Imitazione di rozgoduvannya chovna sull'acqua. Zastosovuєtsya alla lista (chovna).

L'aspetto di un segno alimentare. Arresta l'elemento div (segno di potenza).

Se guardi la pagina demo, puoi vedere che l'animazione per l'elemento dell'elenco (barra) è anche l'elemento div nel mezzo (segno di potenza). La stessa animazione è "sospesa" per un elenco non ordinato per elemento nell'elenco (segno chiaro e cibo).

Otzhe, puoi creare una nuova visnovka, scho elementi figli togliere le animazioni dei padri per un'aggiunta alle loro azioni. Ora è più che sufficiente per rovesciare la struttura del padre/spadkoєmets.

css

Per prima cosa, inizia ad analizzare la creazione dell'animazione, devi garantire la sicurezza del cervello con i vecchi browser.

Zvorotnya sumistnіst

Creeremo in modo sicuro una somma semplicemente impostando gli stili di layout in questo modo, nibi Animazione CSS Non lo so. Se vuoi guardare la pagina nel vecchio browser, attiva un'immagine statica e non uno spazio vuoto.

Ad esempio: come hackerare i CSS? podіbniy al di sotto aleggiava, quindi ci saranno problemi:

/* SBAGLIATO! */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 0; /* Danish fade-in-animation div - oops! */ animation : la nostra -dissolvenza-in-animazione 1s 1;

Se il browser non esegue il rendering dell'animazione, l'elemento div verrà reso invisibile al curatore.

E l'asse è così sicuro con i vecchi browser:

/* PREFERITO */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 1; /* Danish div for the fade in animation */ animation : la nostra -dissolvenza-in-animazione 1s 1;

Ora l'elemento div viene visualizzato poiché l'animazione non può essere eseguita. E dentro browser attuali div sarà un mucchio di allegati per un'ora di animazione.

La base

Ora sappiamo come assicurarci una somma salutare (per aiutare a risolvere i problemi per un'ora di lavoro con progetti reali). È ora di creare la base del nostro codice CSS.

È necessario ricordare 3 punti:

Quindi, come un banner vikoristovuvatime su diversi siti, distruggiamo tutti i nostri Selettori CSS particolarmente. Tutte le puzze iniziano con l'identificatore #ad-1. In questo rango, stiamo cercando di nascondere il nostro codice e il codice del sito.

Potremmo voler ignorare la balbuzie dell'animazione nelle impostazioni. Se desideri modificare l'ombreggiatura dell'animazione con determinati stili e la visibilità degli elementi dietro le promozioni, la struttura del banner verrà distrutta da effetti rapiti o dalla comparsa di parti dell'immagine dopo il completamento dell'animazione. L'animazione zatrimka imita la banalità e migliora i frame.

Se possibile vinci un'animazione per pochi elementi. In questo rango, risparmieremo un'ora e presto espanderemo il codice.

Quindi, creiamo le basi per il nostro banner. Facilitiamole il posizionamento in modo che gli elementi interni possano essere posizionati correttamente. Includi anche tutto ciò che va oltre lo scopo dell'elemento:

#ad-1 ( larghezza: 720px; altezza: 300px; float: sinistra; margine: 40px auto 0; immagine-sfondo: url(../images/ad-1/background.png); posizione-sfondo: centro; sfondo -repeat: no-repeat; overflow: nascosto; posizione: relativa; box-shadow: 0px 0px 6px #000;

Impostiamo gli stili per il testo ei campi dell'introduzione. Facciamo clic su diverse animazioni. È inoltre necessario riconsiderare, in modo da poter trovare il miglior z-index per le parti che crollano, in modo che la puzza non si sovrapponga:

#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", corsivo; colore: #137dd5; font-size: 50px; line-height: 50px; /* Appare h2 per simulare lo sbiadimento */ ) #ad-1 h3 ( font-family: "Boogaloo", corsivo ; color: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animation: delay-fade-animation 10s 1 easy-in-out; /* Appare h3 con dissolvenza simulata */ ) #ad-1 form ( margin: 30px 0 0 6px; 12s 1 easy-in-out;/* Deridendo il form per inserire un indirizzo email con simulacro */) 16px, font-family: "Lucida Grande", senza grazie; colore: #ffff; bordo:1px solido #a2917d; contorno: nessuno; box-ombra: -1px -1px 1px #fff; colore di sfondo: #c7b29b; background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%); ) #ad-1 #email:focus ( background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); ) #ad-1 #submit ( height: 50px; float: left cursor: pointer; padding: 0 20px; font-size: 20px; font-family: "Boogaloo", corsivo; colore: #137dd5; border-bottom-right-radius: 5px; border:1px solid #bcc0c4; border-left : nessuno; background-color: #fff; background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb( (255,255,255) 100%);

Ora possiamo impostare gli stili per il driver e dovremo cambiare l'animazione:

#ad-1 ul#water( /* Serve un'altra animazione per l'acqua, puoi aggiungerla qui */ ) #ad-1 li#water-back ( width: 1200px; height: 84px; background-image: url(. . ) /images/ad-1/water-back.png), background-repeat: repeat-x; z-indice: 1; posizione: assoluta; in basso: 10px; sinistra: -20px animazione: acqua-back-animation 3s infinito easy-in-out; /* Imitazione di schizzi d'acqua */ ) #ad-1 li#water-front ( width: 1200px; height: 158px; .png), background-repeat: repeat-x; indice z: 3; posizione: assoluta; in basso: -70px; sinistra:-30px; animazione: animazione del lungomare che simula lo spruzzo di un soffio L'animazione sarà un po' più fluida per creare un effetto prospettico.

Imposta gli stili per gli elementi stringa e yoga. Inoltre, chiamiamo le seguenti animazioni:

#ad-1 ul#boat ( width: 249px; height: 215px; z-index: 2; position: absolute; bottom: 25px; left: 20px; overflow: visibile; animation: boat-in-animation 3s 1 easy-out /* Fa scorrere il gruppo all'inizio dell'annuncio */ ) #ad-1 ul#boat li ( width: 249px; height: 215px; background-image: url(../images/ad-1/boat.png); position : assoluto, in basso: 0px, a sinistra: 0px; overflow: visibile, animazione: animazione-barca 2s infinito easy-in-out; */ ) #ad-1 #question-mark ( larghezza: 24px; altezza: 50px; background- image: url(../images/ad-1/question-mark.png); position: absolute; right: 34px; top: -30px; animation:delayed-fade-animation 4s 1 easy-in-out; /* Dissolvenza nel punto interrogativo */ )

Ora creiamo stili per il freddo. Per loro, la mia animazione vicoristovuvatimemo con l'effetto del movimento senza pelle. illustrazione dimostra l'essenza dell'idea:

E il codice CSS dell'asse i:

#ad-1 #clouds ( posizione: assoluta; superiore: 0px; z-index: 0; animazione: cloud-animation 30s infinita lineare; /* Scorri verso sinistra, rilascia e ripeti */ ) #ad-1 #cloud-group -1 ( larghezza:720px; posizione: assoluta; sinistra:0px; ) #ad-1 #cloud-group-2 ( larghezza: 720px; posizione: assoluta; sinistra: 720px; ) #ad-1 .cloud-1 ( larghezza : 172px; altezza: 121px; immagine-di-sfondo: url(../images/ad-1/cloud-1.png); posizione: assoluta; in alto: 10px; a sinistra: 40px; ) #ad-1 .cloud-2 (larghezza: 121px; altezza: 75px; immagine-di-sfondo: url(../images/ad-1/cloud-2.png); posizione: assoluta; in alto: -25px; a sinistra: 300px; ) #ad-1 . cloud-3 ( larghezza: 132px; altezza: 105px; immagine-di-sfondo: url(../images/ad-1/cloud-3.png); posizione: assoluta; in alto: -5px; a sinistra: 530px; )

Animazioni

Indovinare: Partendo dal punto, niente anima davvero. Se ti stupisci subito del nostro banner, vedrai un'immagine statica. Le animazioni vengono create qui, come se stessero richiamando il codice indotto.

Ora possiamo dare vita alla nostra immagine statica miracolosa:

/* L'animazione con imitazione della zatrimka è rivendicata per mostrare alcuni elementi. L'imitazione dell'acrobazia si ottiene avviando il processo con l'80% del progresso dell'animazione (ma non subito). Ecco come simulare una dissolvenza: */ @keyframes delay-fade-animation ( 0% (opacity: 0;) 80% (opacity: 0;) 100% (opacity: 1;) ) /* Animazione per la visualizzazione delle forme indirizzo e-mail e pulsante. I fotogrammi chiave forma-animazione ( 0% (opacità: 0; destra: -400px;) 90% (opacità: 0; destra: -400px;) 95% (opacità: 0,5; destra: 20px;) 100% (opacità: 1 ; destra: 0px;) ) /* Questa animazione è disegnata per portare la nave fuori dallo schermo sulla pannocchia del film: */ @keyframes barca-in-animazione ( 0% (sinistra: -200px;) 100% ( left : 20px;) ) /* Animazione per il freddo. Il primo gruppo di hmar inizia a muoversi dal centro e l'altro - destro davanti allo schermo. Il primo gruppo viene visualizzato correttamente sullo schermo e l'altro è destrorso. Non appena il gruppo di sinistra si avvicina, i cupi girano già nella posizione della pannocchia: */ @keyframes cloud-animation ( 0% (left: 0px;) 99.9999% (left: -720px;) 100% (left : 0px;) ) / * Le tre animazioni rimanenti sono praticamente le stesse - la differenza è diversa per gli elementi posizionati. La puzza imita gli schizzi dell'oceano: */ @keyframes boat-animation ( 0% (bottom: 0px; left: 0px;) 25% (bottom: -2px; left: -2px;) 70% (bottom: 2px;) 70% (bottom: 2px; a sinistra: - 4px;) 100% (in basso: -1px; a sinistra: 0px;) ) @keyframes water-back-animation ( 0% (in basso: 10px; a sinistra: -20px;) 25% (in basso: 8px; a sinistra: -22px; ) 70% (in basso: 12px; a sinistra: -24px;) 100% (in basso: 9px; a sinistra: -20px;) ) @keyframes water-front-animation ( 0% (in basso: -70px; a sinistra: - 30px;) 25% (in basso: -68px; a sinistra: -32px;) 70% (in basso: -72px; a sinistra: -34px;) 100% (in basso: -69px; a sinistra: -30px;) )

Visnovok

Nel corso della lezione abbiamo appreso alcuni concetti chiave:

1. Gli elementi di decadimento portano via le animazioni dei loro padri per un'aggiunta alle loro animazioni.
2. Sotto l'ora in cui viene creato il banner, è necessario provare a vincere un identificatore univoco per sovrapporre in modo univoco il codice con il progetto CSS principale.
3. La posizione dello stile degli elementi deve essere scelta in modo che non sia disponibile alcuna animazione, in modo da garantire la sicurezza della mente.
4. Se possibile, è necessario vincere un'animazione per pochi elementi.

Un blocco mobile (altrimenti chiamato anche collassante, fissante, appiccicoso) viene utilizzato sul sito per far apparire un elemento indisciplinato durante lo scorrimento laterale, nel qual caso viene spesso inserita la pubblicità (teaser, banner o contesto).

Sfortunatamente, le regole di adsense non spetta a noi proteggerle. Tim non è da meno, ricco di autorità sui siti e ignora le regole sulla propria paura e rischio. Forse non sono puniti per il prezzo, ma io non lo sono per correre dei rischi.

Metto in tali blocchi RMYA, i miei teaser/banner, e talvolta sostituisco gli annunci con vivoj ci sono voci simili, o traccio una linea per fornire informazioni.

Scopriamo come puoi creare un blocco mobile sul tuo sito.

Manager: costruisci il blocco rimanente sulla colonna della spiaggia (barra laterale) - fluttuante. Fino ad allora il vino si è bloccato solo in quel momento, se il corystuvach raggiunge quello nuovo scorrendo, e non subito quando si apre il lato. Inoltre, il blocco può "vіdlipati", raggiungendo il piè di pagina (per evitare di torcerlo).

Il miglior metodo di lavoro

Esistono molte opzioni per implementare il blocco che si attacca, ma non tutte le puzze funzionano correttamente. dirò certificato speciale: lo stesso metodo di installazione può essere utilizzato per un blocco su un sito e gli stipiti compaiono su un altro.

Di seguito è riportato il calcio di un blocco mobile, che è stato praticamente inserito in tutti i siti in cui l'ho installato. Non c'erano banchi. Anche il motore non è importante (DLE, WordPress, LiveStreet ecc.).

Inserisci il seguente codice HTML nella città bagan della colonna bianca:

$(finestra).scroll(funzione() (
var sb_m = 20; /* inserisci la parte superiore e inferiore */
var mb = 300; /* Altezza della riserva */
var = $(finestra).scrollTop() ;
var sb = $(".sticky-block");
var sbi = $(".sticky-block .inner");
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.altezza();

If(sb_h + $(document).scrollTop() + sb_m + mb< $(document) .height () ) {
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop": h));
}
altro(
sb.css(("paddingTop": 0));
}
}
} ) ;

Da cui tutto il codice può essere impostato alla bestia, dal basso, e per portare l'altezza della tua base, tobto. quell'altezza, il blocco deve essere affilato.

Ora JS è incluso. Per cui è scritto nella sezione HEAD: