Share
Cosa starai creandoOggi passeremo attraverso una tecnica davvero fantastica che puoi usare per creare un effetto che è un po 'come lo scrolling della parallasse, ma non ha bisogno di JavaScript; può essere realizzato molto semplicemente attraverso puro CSS.
Inizia guardando la demo dal vivo per vedere cosa stai per imparare (dovrai vedere su un desktop / laptop per vedere l'effetto).
Questa tecnica potrebbe essere utilizzata per creare ottime pagine di descrizione del prodotto, o anche qualcosa di simile a una presentazione di Powerpoint / Keynote, e sarebbe un grande potenziale per l'illustrazione della storia online.
Ecco come lo fai.
La chiave di questa tecnica è il CSS background-attachment: fixed;, disponibile per noi dal CSS 2.1. Qualsiasi immagine di sfondo con questo stile applicato ad essa rimarrà in una posizione fissa rispetto alla finestra (non l'elemento a cui è applicata). Lo useremo per mantenere le nostre illustrazioni sul posto mentre il nostro contenuto scorre indipendentemente al suo fianco.
Un paio di cose a cui prestare attenzione con questa proprietà CSS sono che, poiché le immagini di sfondo verranno fissate rispetto alla finestra, la loro posizione non sarà influenzata da elementi come i margini nel modo in cui un'immagine di sfondo regolare.
Dovresti anche sapere che mentre la proprietà funziona meravigliosamente su tutti i browser desktop, al momento non funziona su Chrome Mobile e può essere un po 'a scatti su altri browser mobili. Quindi, mentre i tuoi visitatori vedranno ancora bene le tue immagini, l'effetto di scorrimento è meglio visibile sulle piattaforme desktop.
I passaggi fondamentali per ottenere ciò che vedi nella demo sono:
Accentsconagua
div nel nostro caso) avere una spaziatura su un lato di circa il 50% della larghezza, quindi spingere il contenuto sull'altro lato.background-attachment: fixed; e guarda la magia a scorrimento!Andiamo a vedere come tutto questo accade passo dopo passo. Ti consigliamo di prendere i file sorgente per questo tutorial in modo da avere le immagini richieste.
Inizia creando una cartella di progetto e aggiungendo un index.html file ad esso, così come a css cartella con un file chiamato style.css aggiunto ad esso. Copia e incolla le quattro immagini dal file zip sorgente scaricato in una cartella denominata immagini.
Aggiungi questo HTML a index.html:
Una dimostrazione visiva di background-attachment: fixed; Scorri verso il basso e guarda cosa succede
Alice stava cominciando ad essere molto stanca di sedersi accanto alla sorella sulla riva, e di non avere niente da fare: una o due volte aveva sbirciato nel libro che sua sorella stava leggendo, ma non aveva immagini o conversazioni al suo interno, "e che è l'uso di un libro, 'pensato Alice' senza immagini o conversazione? '
Quindi stava pensando nella sua mente (e come poteva, perché la calda giornata la faceva sentire molto assonnata e stupida), se il piacere di creare una margherita valesse la pena di alzarsi e raccogliere le margherite, quando improvvisamente un Coniglio Bianco con gli occhi rosa le corse vicino.
Non c'era nulla di così straordinario in questo; né Alice pensava che fosse così fuori mano sentire il Coniglio dire a se stesso: "Oh caro! Oh caro! Sarò in ritardo! ' (quando ci pensò dopo, le venne in mente che avrebbe dovuto chiederselo, ma all'epoca sembrava tutto abbastanza naturale); ma quando il Coniglio in effetti tolse l'orologio dal gilet del panciotto, lo guardò e poi si affrettò a salire, Alice si alzò in piedi, perché le balenò nella mente che non aveva mai visto un coniglio con un gilet- tasca, o un orologio per tirarlo fuori, e bruciando con curiosità, corse attraverso il campo dopo di esso, e fortunatamente era appena in tempo per vederlo spuntare in una grande tana di coniglio sotto la siepe.
In un altro momento in basso, Alice lo seguì, senza mai considerare una volta in che modo avrebbe dovuto uscire di nuovo.
La tana del coniglio andò dritto come un tunnel in qualche modo, e poi si abbassò improvvisamente, così all'improvviso che Alice non ebbe un momento per pensare a fermarsi prima di trovarsi a cadere in un pozzo molto profondo.
O il pozzo era molto profondo, o cadeva molto lentamente, perché aveva avuto un sacco di tempo mentre scendeva per guardarla e chiedersi cosa sarebbe successo dopo. Per prima cosa, cercò di guardare in basso e capire a cosa stava venendo, ma era troppo buio per vedere qualcosa; poi guardò i lati del pozzo e notò che erano pieni di armadi e scaffali per libri; qua e là vedeva mappe e immagini appese a pioli. Mentre passava, prese un barattolo da uno degli scaffali; era etichettato come "ARANCIA MARMALATA", ma con sua grande delusione era vuoto: non le piaceva far cadere il barattolo per paura di uccidere qualcuno, quindi riuscì a metterlo in uno degli armadietti mentre lei lo superava.
'Bene!' pensò Alice a se stessa, "dopo una caduta come questa, non penserò a nulla di ruzzolare giù per le scale! Che coraggio mi penseranno tutti a casa! Perché, non direi nulla a riguardo, anche se cadessi dalla parte superiore della casa! " (Probabilmente era vero).
Quello che stiamo facendo qui è impostare la nostra shell HTML di base, caricando nel nostro foglio di stile e alcuni Google Fonts, quindi creando il nostro primo contenitore di contenuti div a cui applicheremo questa tecnica.
Il contenitore div ha tre classi:
.soddisfare - usato per impostare alcune proprietà che saranno comuni a tutti i contenitori di contenuto..destra - identifica che questo contenitore deve avere il contenuto allineato a destra (lavoreremo anche con un contenitore allineato a sinistra in seguito).illustration_01 - utilizzato per impostare l'immagine di sfondo e il colore specifici per questo contenitoreOra siamo pronti per alcuni CSS. Inizia aggiungendo al tuo codice di normalizzazione e formattazione di base style.css file:
* ridimensionamento della scatola: border-box; html font-size: 1em; font-family: 'Alike'; background-color: # 262626; colore: # d9d9d9; body margin: 0; img larghezza massima: 100%; altezza: auto; h1, h2, h3, h4, h5, h6 font-family: 'Roboto'; line-height: 1.313em; h1 font-size: 3em; margine: 0,563em 0; h2 font-size: 2.25em; margine: 0,625em 0; h3 font-size: 1.5em; margine: 1,313em 0; h4 font-size: 1.313em; margine: 1,313em 0; h5 font-size: 1.125em; margine: 1,313em 0; h6 font-size: 1em; margine: 0,75em 0;
Ora per il .soddisfare classe. Aggiungi questo alla fine del tuo foglio di stile:
.content font-size: 1.875rem; colore: # 262626; dimensione dello sfondo: 49% auto; background-attachment: fixed; background-repeat: no-repeat;
Questa classe è dove la maggior parte della magia accade. Per il testo, abbiamo impostato la dimensione e il colore del carattere. Per lo sfondo vedrai che iniziamo impostando background-size al 49% automatico.
Ciò significa che l'immagine di sfondo si estenderà o si restringerà sempre per riempire il 49% della larghezza della pagina e l'altezza verrà regolata proporzionalmente. Usiamo un valore del 49% anziché del 50% perché altrimenti Firefox mostra uno strano artefatto di linea nel mezzo dello schermo.
Abbiamo quindi impostato background-fisso che, come già sapete dalla descrizione sopra, fa rimanere l'immagine di sfondo quando si scorre, e rende il suo posizionamento relativo alla finestra piuttosto che al contenitore a cui è applicato.
Finalmente abbiamo impostato background-repeat: no-repeat; per garantire che la nostra immagine venga visualizzata una volta sola sulla pagina.
Quindi aggiungere il .destra classe al tuo foglio di stile:
.a destra padding: 1.618em 6.472em 3.236em 50%; posizione di fondo: 0 50%;
Quest'ultima classe posiziona il contenuto del testo su una metà dello schermo e l'immagine di sfondo sull'altro.
Il background-position l'impostazione dice all'immagine di sfondo di posizionarsi a zero pixel dal lato sinistro della finestra e di allinearsi a metà strada dalla parte superiore della finestra.
Infine, aggiungi il .illustration_01 classe:
.illustrazione_01 background-color: # 00c17b; background-image: url ("... /images/minipadwhite.png"); Questo imposta l'immagine di sfondo specifica e il colore che vogliamo per questo contenitore di contenuti.
Controlla il tuo sito e ora dovresti vedere questo:
Quando scorri verso il basso dovresti vedere il contenuto scorrere mentre l'immagine rimane esattamente dove si trova.
Aggiungiamo un altro contenitore di contenuti, questo con il contenuto allineato a sinistra.
Aggiungi questo HTML del contenitore di contenuti al di sotto dell'ultima divisione:
Risolto effetto per lo sfondo
Giù, giù, giù. La caduta non finirebbe mai! 'Mi chiedo quante miglia sono caduto da questa volta?' disse ad alta voce. "Devo arrivare da qualche parte vicino al centro della terra. Fammi vedere: sarebbe di quattromila miglia più giù, penso-- '(perché, vedi, Alice aveva imparato diverse cose di questo genere nelle sue lezioni a scuola, e anche se questa non era una buona opportunità per mettersi in mostra la sua conoscenza, dal momento che non c'era nessuno ad ascoltarla, era comunque buona pratica ribadirlo) - si, è sulla giusta distanza - ma poi mi chiedo che latitudine o longitudine ho avuto? (Alice non aveva idea di cosa fosse Latitude, o Longitudine, ma pensava che fossero belle parole da dire.)
Poco dopo ricominciò. "Mi chiedo se cado proprio attraverso la terra! Che strano sembrerà uscire tra le persone che camminano con la testa verso il basso! Le Antipathies, penso-- '(era piuttosto contenta che non ci fosse nessuno ad ascoltare, questa volta, poiché non suonava affatto la parola giusta)' - ma dovrò chiedere loro quale sia il nome del paese è, lo sai. Per favore, mamma, questa è Nuova Zelanda o Australia? (e lei ha cercato di fare una riverenza mentre parlava ... hai voglia di fare una riverenza mentre stai cadendo nell'aria? Pensi che potresti farcela?) "E che bambina ignorante mi penserà per aver chiesto! No, non lo farò mai: forse lo vedrò scritto da qualche parte.
Giù, giù, giù. Non c'era nient'altro da fare, così presto Alice ricominciò a parlare. "A Dinah mi mancherò moltissimo stasera, dovrei pensare!" (Dinah era il gatto.) "Spero che ricordino il suo piattino di latte all'ora del tè. Dinah mio caro! Vorrei che tu fossi quaggiù con me! Non ci sono topi nell'aria, temo, ma potresti prendere una mazza, e questo è molto simile a un topo, lo sai. Ma i gatti mangiano i pipistrelli, mi chiedo? E qui Alice cominciò ad avere un po 'di sonno, e continuò a dire a se stessa, in un modo sognante, "I gatti mangiano i pipistrelli? I gatti mangiano pipistrelli? e qualche volta: "I pipistrelli mangiano i gatti?" perché, vedi, dato che non poteva rispondere a nessuna delle due domande, non importava molto in che modo la metteva. Sentì che stava sonnecchiando, e aveva appena iniziato a sognare che stava camminando mano nella mano con Dinah, e le disse molto seriamente: "Ora, Dina, dimmi la verità: hai mai mangiato un pipistrello?" quando all'improvviso, colpo! tonfo! scese su un mucchio di bastoncini e foglie secche, e la caduta era finita.
Alice non fu un po 'ferita, e balzò in piedi in un momento: alzò lo sguardo, ma era tutto buio in alto; davanti a lei c'era un altro lungo corridoio, e il Coniglio Bianco era ancora in vista, affrettandolo verso il basso. Non c'era un momento da perdere: via Alice come il vento, ed era appena in tempo per sentirlo dire, mentre girava l'angolo: "Oh, mie orecchie e baffi, quanto è tardi!" Era dietro di lei quando girò l'angolo, ma il Coniglio non si vedeva più: si ritrovò in una sala lunga e bassa, illuminata da una fila di lampade appese al soffitto.
C'erano porte per tutto il corridoio, ma erano tutte chiuse; e quando Alice era scesa da una parte e dall'altra, provando ogni porta, camminò tristemente nel mezzo, chiedendosi come avrebbe dovuto uscire di nuovo.
Nota questa volta usiamo la classe .sinistra invece di .destra e abbiamo alzato il numero dell'illustrazione così la classe .illustration_01 è sostituito con .illustration_02
Aggiungi le seguenti due nuove classi al tuo foglio di stile:
.left padding: 1.618em 50% 3.236em 6.472em; posizione di fondo: 100% 50%; .illustration_02 background-color: # e8697b; background-image: url ("... /images/minipadblack.png"); Questa volta abbiamo il riempimento del 50% applicato sul lato destro del contenitore in modo che il contenuto venga spostato a sinistra e lo sfondo sia posizionato orizzontalmente al 100%, cioè tutto a destra. Inoltre, aggiungiamo un colore e un'immagine diversi allo sfondo di questo contenitore.
Controlla di nuovo il tuo sito e inizia a scorrere verso il basso. Quando raggiungi la fine del primo contenitore dovresti vedere il secondo che inizia a salire, strofinare sulla parte superiore della tua prima immagine e rivelare gradualmente il tuo secondo.
Migliora l'effetto di questa tecnica se c'è un separatore tra i due contenitori, quindi aggiungiamolo ora.
Tra i due contenitori div aggiungi questo HTML:
Un'altra sezione inizia qui
E aggiungi la classe .separator al tuo foglio di stile:
.separator font-size: 1.875rem; imbottitura: 1,618em 0; allineamento del testo: centro;
Quando aggiorni il tuo sito ora dovresti avere un bel separatore tra i tuoi contenitori:
Ora puoi inserire il codice per i separatori e i contenitori di contenuti rimanenti.
Aggiungi questo HTML sotto le tue div esistenti:
Un'altra sezione inizia qui
Ottimo per presentazioni di prodotti
All'improvviso si imbatté in un piccolo tavolo a tre gambe, tutto in vetro massiccio; non c'era niente tranne una minuscola chiave d'oro, e il primo pensiero di Alice era che potesse appartenere a una delle porte della sala; ma ahimè! o le serrature erano troppo grandi, o la chiave era troppo piccola, ma in ogni caso non avrebbe aperto nessuno di loro. Tuttavia, alla seconda volta, si imbatté in una bassa tenda che non aveva notato prima, e dietro c'era una porticina alta quindici pollici: provò la piccola chiave d'oro nella serratura, e con sua grande gioia si adattò!
Alice aprì la porta e scoprì che conduceva in un piccolo passaggio, non molto più grande di una tana di topo: si inginocchiò e guardò lungo il passaggio nel più bel giardino che tu abbia mai visto. Come desiderava ardentemente uscire da quella buia sala, e vagare tra quei letti di fiori luminosi e quelle fontane fresche, ma non riusciva nemmeno a farsi strada davanti alla porta; "e anche se la mia testa dovesse passare," pensò la povera Alice, "sarebbe di pochissimo uso senza le mie spalle. Oh, come vorrei poter stare zitto come un telescopio! Penso di poterlo fare, se solo so come iniziare. ' Perché, vedi, sono successe così tante cose insolite negli ultimi tempi, che Alice aveva cominciato a pensare che davvero poche cose erano davvero impossibili.
Sembrava che non ci fosse bisogno di aspettare dalla porticina, così tornò al tavolo, sperando di trovare un'altra chiave, o almeno un libro di regole per chiudere le persone come cannocchiali: questa volta trovò una bottiglia su di essa, ('che certamente non c'era prima,' disse Alice) e intorno al collo della bottiglia c'era un'etichetta di carta, con le parole 'DRINK ME' splendidamente stampate su di essa a grandi lettere.
Era tutto molto bello dire "bevetemi", ma la saggia piccola Alice non aveva intenzione di farlo in fretta. "No, guarderò prima," disse, "e vedere se è contrassegnato come" veleno "o meno"; perché aveva letto diverse belle storie su bambini che erano stati bruciati e divorati da bestie selvagge e altre cose spiacevoli, tutti perché non ricordavano le semplici regole che i loro amici avevano insegnato loro: ad esempio un poker rovente ti brucerà se lo tieni troppo a lungo; e che se tagli il dito molto profondamente con un coltello, di solito sanguina; e lei non l'aveva mai dimenticato, se si beve molto da una bottiglia contrassegnata come "veleno", è quasi certo di non essere d'accordo con te, prima o poi.
Tuttavia, questa bottiglia NON era contrassegnata come "veleno", così Alice osò assaggiarla, e trovandola molto carina, (aveva, in effetti, una sorta di sapore misto di crostata alla ciliegia, crema pasticcera, pino, tacchino arrosto, caramello e pane tostato con burro caldo,) lo finì molto presto.
Un'altra sezione inizia qui
Tecnica semplice con puro CSS
'Che sensazione curiosa!' disse Alice; "Devo stare zitto come un telescopio."
E così fu davvero: lei adesso era alta solo dieci centimetri, e il suo viso si illuminò al pensiero che ora aveva le giuste dimensioni per andare attraverso la piccola porta in quel delizioso giardino. Prima, però, ha aspettato qualche minuto per vedere se si sarebbe rimpicciolita ulteriormente: si sentiva un po 'nervosa per questo; "perché potrebbe finire, sai," disse Alice a se stessa, "nel mio uscire del tutto, come una candela. Mi chiedo come dovrei essere allora? " E lei cercò di immaginare come fosse la fiamma di una candela dopo che la candela fu spenta, perché non ricordava di aver mai visto una cosa simile.
Dopo un po ', scoprendo che non succedeva più nulla, decise di andare subito in giardino; ma, ahimè, per la povera Alice! quando arrivò alla porta, scoprì che aveva dimenticato la piccola chiave d'oro, e quando tornò al tavolo, trovò che non poteva raggiungerla: lo vedeva chiaramente attraverso il vetro, e lei provò il suo meglio per salire su una delle gambe del tavolo, ma era troppo scivoloso; e quando si era stancata di provarci, la povera piccola si sedette e pianse.
"Vieni, non serve a niente piangere così!" disse Alice a se stessa, piuttosto bruscamente; "Ti consiglio di interrompere questo minuto!" Di solito si dava ottimi consigli (anche se molto raramente la seguiva), e qualche volta si rimproverava così severamente da farle venire le lacrime agli occhi; e una volta che si ricordò di aver cercato di chiudersi le orecchie per essersi ingannata in una partita di croquet, stava giocando contro se stessa, perché a questo curioso bambino piaceva molto fingere di essere due persone. "Ma è inutile adesso," pensò la povera Alice, "fingere di essere due persone! Perché, mi è rimasto appena abbastanza di me da rendere UNA PERSONA rispettabile! 'Ben presto il suo sguardo cadde su una piccola scatola di vetro che giaceva sotto il tavolo: lo aprì e vi trovò una torta molto piccola, sulla quale le parole 'MANGIAMO' erano splendidamente segnate nel ribes. «Be ', lo mangerò», disse Alice, «e se mi fa diventare più grande, posso raggiungere la chiave; e se mi fa diventare più piccolo, posso strisciare sotto la porta; quindi in entrambi i casi entrerò in giardino, e non mi interessa cosa succede!
Lei mangiò un po 'e disse ansiosamente a se stessa, "Da che parte? Da che parte? ", Tenendo la sua mano sulla sommità della testa per sentire da che parte stava crescendo, ed è rimasta abbastanza sorpresa nel constatare che è rimasta delle stesse dimensioni: per essere sicuri, questo succede generalmente quando si mangia una torta, ma Alice si era talmente impegnato a non aspettarsi altro che cose fuori mano da accadere, che sembrava piuttosto noioso e stupido che la vita andasse avanti nel modo comune.
Così si mise al lavoro, e ben presto finì la torta.
LA FINE
E questo CSS al tuo foglio di stile:
.illustration_03 background-color: # 14b29a; background-image: url ("... /images/miniwhite.png"); .illustration_04 background-color: # 80b9f1; background-image: url ("... /images/miniblack.png"); Ora dovresti avere l'intero display in posizione con un terzo e quarto contenitore di contenuti che mostra:
Così come un separatore finale per compensare:
L'ultima cosa che devi fare è tenere conto delle diverse dimensioni dello schermo. Quando la vista diventa troppo piccola per accogliere comodamente le nostre immagini di sfondo, vogliamo invece convertirle in immagini incorporate.
Nella parte superiore di ciascun contenitore del contenuto, all'interno delle div iniziali e sopra il testo, aggiungi una figura con la classe .smallscreen e dentro quel posto img tag per caricare ciascuna delle immagini attualmente utilizzate negli sfondi:
Primo contenitore di contenuti:
Secondo contenitore di contenuti:
Terzo contenitore di contenuti:
Quarto contenitore di contenuti:
Useremo il .smallscreen classe per nascondere questa immagine in linea per impostazione predefinita, ma per mostrarla quando arriviamo a una dimensione dello schermo più piccola.
Aggiungi la seguente classe al tuo foglio di stile:
.smallscreen display: none;
Ora aggiungeremo le query multimediali che gestiranno l'eventuale visualizzazione dello sfondo o delle immagini in linea. Ridurranno inoltre progressivamente le dimensioni del testo e la spaziatura nel layout, quindi adatteremo le cose a tutte le larghezze della vista.
Aggiungi queste query multimediali al tuo foglio di stile:
@media (larghezza massima: 106.25rem) . wrapper,. separatore font-size: 1.6875rem; @media (larghezza massima: 93.75rem) .content, .separator font-size: 1.5rem; .right padding: 1.618em 4.854em 1.618em 50%; .left padding: 1.618em 50% 1.618em 4.854em; @media (larghezza massima: 81.25rem) .content, .separator font-size: 1.3125rem; .right padding: 1.618em 3.236em 1.618em 45%; dimensione dello sfondo: 44% auto; posizione di fondo: 0 55%; .left padding: 1.618em 45% 1.618em 3.236em; dimensione dello sfondo: 44% auto; posizione di sfondo: 100% 55%; @media (larghezza massima: 68.75rem) .content, .separator font-size: 1.125rem; .right padding: 1.618em 3.236em 1.618em 40%; dimensione dello sfondo: 39% auto; posizione di fondo: 0 60%; .left padding: 1.618em 40% 1.618em 3.236em; dimensione dello sfondo: 39% auto; posizione di fondo: 100% 60%; @media (larghezza massima: 50rem) .smallscreen display: block; .right padding: 1.618em 3.236em; background-image: none; .left padding: 1.618em 3.236em; background-image: none; @media (larghezza massima: 31.25rem) .right padding: 1.618em 1.618em; .left padding: 1.618em 1.618em; @media (larghezza massima: 12rem) html larghezza minima: 12rem;
Le prime quattro query multimediali stanno semplicemente riducendo la dimensione del carattere del testo e il riempimento all'interno dei contenitori del contenuto progressivamente per adattarsi alla larghezza dello schermo disponibile.
Nella quinta query multimediale di larghezza massima: 50rem includiamo il codice che rende il .smallscreen class visible, rimuove il riempimento laterale del 50% dai contenitori dei contenuti e nasconde le immagini di sfondo. Quando questa query multimediale viene attivata, non vedremo più le immagini di sfondo fisse di grandi dimensioni e invece vedremo immagini normali nella parte superiore di ogni contenitore di contenuti.
Ora quando aggiorni il tuo sito dovresti vederlo ridimensionarlo gradualmente insieme a tutte le larghezze della finestra, finché non lo vedi alla sua dimensione più piccola:
Anche dopo tanti anni di lavoro con i CSS, non sono mai sorpreso dal numero sempre crescente di cose meravigliose che puoi fare con esso. E più semplice è la tecnica, più impressionante.
Prova questo piccolo gioiello, è così semplice e veloce che ti vergogni!
