funziona pure.
Nella mia demo, c'è un'immagine di pipistrello mostrata all'interno del footer per un effetto non così spettrale, ma puoi scegliere qualsiasi altra immagine che ti piace.
Continua a scorrere finché non vedi il piè di pagina Lorem ipsum dolor sit amet...
2. Nascondi il piè di pagina Applica lo z-index:-1 regola al piè di pagina per posizionarlo dietro tutti gli altri elementi della pagina.
Colora sia il coprire il piè di pagina .
body, html {background-color: #fff; } footer {width: 100%; altezza: 200 px; posizione: fissa; fondo: 0; background-color: # DD5632; z-index: -1; } 3. Regolare il margine inferiore Imposta il margin-bottom del uguale all'altezza del footer (nel mio esempio 200px).
In questo modo ci sarà spazio sufficiente nella parte inferiore affinché il piè di pagina sia visibile quando l'utente scorre la pagina verso il basso.
body {height: 1000px; margine: 0; margin-bottom: 200px; } Questo è tutto. Il piè di pagina rivela l'effetto di una pagina web completa. Guarda la demo di Codepen qui sotto.
Elementi di pagina individuali Questa tecnica può essere utilizzata per un singolo elemento HTML (con un piè di pagina) abbastanza lungo per un corretto effetto scorrimento pagina. Il metodo è un po 'hacky, in quanto attualmente non funziona in Chrome e IE, ma ha un discreto ripiego.
1. Creare un articolo lungo Per prima cosa, creiamo un lungo articolo con un piè di pagina. Per promuovere il codice semantico, ho scelto e
Articolo 1 Lorem ipsum dolor sit amet...
Sotto puoi vedere lo stile di base dell'articolo e il piè di pagina.
article {width: 500px; background-color: # FEF9F3; imbottitura: 20px 40px; } articolo> footer {height: 100px; colore di sfondo: # FE0178; } body {font-family: cormorano garamond; } Il mio articolo sembra attualmente questo. Ovviamente puoi usare anche altre regole di stile di base.
2. Rendere appiccicoso il piè di pagina
Il precedente footer è stato corretto, questo sarà appiccicoso . Applica la position:sticky regola position:sticky al piè di pagina, quindi si sposterà all'interno dei confini dell'articolo ma manterrà comunque la sua posizione sullo schermo mentre l'utente sta scorrendo su e giù.
articolo> footer {height: 100px; colore di sfondo: # FE0178; posizione: -webkit-sticky; posizione: appiccicosa; fondo: 80 px; } La parte bottom:80px regola bottom:80px corregge la posizione del footer 80px sopra il fondo dell'articolo .
È possibile regolare il valore in base ai propri gusti, poiché determina il punto in cui il footer inizia ad apparire o a scomparire mentre l'utente scorre verso il basso o verso l'alto.
Dare lo stesso valore per il margine inferiore dell'articolo , in modo che ci sia spazio sufficiente in basso per rivelare il piè di pagina completo.
article {width: 500px; background-color: # FEF9F3; imbottitura: 20px 40px; margin-bottom: 80px; } 3. Aggiungi uno sfondo parzialmente trasparente Ora abbiamo bisogno di un'apertura accanto al fondo dell'articolo attraverso il quale possiamo vedere il piè di pagina appiccicoso scorrere verso il basso e verso l'alto.
Per ottenere ciò, sostituisci il background-color di background-color dell'articolo con un'immagine di background-image gradiente lineare , che dalla parte superiore dell'articolo alla parte superiore del piè di pagina è colorata con il colore di sfondo dell'articolo e la parte rimanente verso il basso è reso trasparente .
article {width: 500px; imbottitura: 20px 40px; background-image: linear-gradient (in basso, # FEF9F3 calc (100% - 120px), trasparente 0); margin-bottom: 80px; } La funzione CSS calc(100%-120px) calcola l' intera altezza dell'articolo meno il piè di pagina . Nel mio esempio, è 120px (100px per altezza e oltre 20px per padding).
4. Posizionare il piè di pagina indietro
Infine, posizioniamo il piè di pagina dietro l'articolo usando lo z-index: -1 regola CSS.
articolo> footer {height: 100px; colore di sfondo: # FE0178; posizione: -webkit-sticky; posizione: appiccicosa; fondo: 80 px; z-index: -1; } E questo è tutto, il singolo elemento della pagina con l'effetto di rivelazione in scorrimento è fatto. Controlla la penna Codepen qui sotto. Puoi anche trovare entrambi i casi d'uso sulla nostra pagina Github.
10 plugin WordPress per creare facilmente pagine di destinazione
Se non vedi l'ora di aumentare le vendite e le conversioni sul tuo blog o sul tuo sito web, le pagine di destinazione sono uno dei migliori strumenti disponibili. Interagiscono con i clienti, portano lead e commercializzano il tuo prodotto senza doverti trovare in giro per l'azione.Ma non tutti noi abbiamo le capacità progettuali, il budget e / o il progettista per costruirne uno .
(Consigli tecnici e di design)
Trasforma la tua classe in una macchina del tempo [Infografica]
Gli insegnanti di tutto il mondo si stanno riscaldando all'idea di introdurre la tecnologia nelle scuole e non ci riferiamo solo alla realtà aumentata o alla stampa 3D qui. Queste cose sono semplici strumenti che gli insegnanti possono usare - è ciò che fa l'educatore per migliorare l'esperienza di apprendimento che scatena il potenziale di queste tecnologie, dei dispositivi e dei loro contenuti.Ad
(Consigli tecnici e di design)
it.hideout-lastation.com
Pagina intera