it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


Come creare CSS Sticker Footer

Normalmente, abbiamo bisogno di JavaScript per eseguire effetti di scorrimento relativi a diverse azioni dell'utente sulle pagine web. Lo script fa il lavoro di tenere traccia di quanto uno scorrimento verso l'alto o verso il basso richiede una pagina e attiva un'azione quando viene raggiunta un'altezza di soglia.

Non è particolarmente brutto usare JavaScript per scorrere gli effetti. In realtà ci sono casi più complicati che sono impossibili da risolvere senza JavaScript . Tuttavia ci sono degli hack CSS che possono sostituire questi script a volte.

Questo post ti mostrerà come creare effetti footer per mostrare lo scroll della pagina usando CSS. Utilizzeremo due casi d'uso per dimostrarlo: uno per l'intera pagina (vedere la demo) e uno per i singoli elementi della pagina, come gli articoli.

Pagina intera

Abbiamo bisogno di creare un piè di pagina che appare da sotto la pagina mentre l'utente sta scorrendo verso il basso. Inoltre, quando si scorre la pagina di backup, il piè di pagina deve essere nuovamente nascosto sotto la pagina.

Per raggiungere questo obiettivo, per prima cosa dobbiamo creare un piè di pagina con una posizione fissa nella parte inferiore dello schermo.

1. Creare un piè di pagina fisso

Aggiungiamo prima del contenuto e un piè di pagina alla pagina. Sto usando i tag HTML

e
per semantica Però,
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...

body {font-family: Crimson Text; dimensione carattere: 13pt; margine: 0; } footer {width: 100%; altezza: 200 px; posizione: fissa; fondo: 0; background-color: # DD5632; }
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 e etichetta bianca per 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 tag 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.

Primi 6 peccati di scrittura dell'articolo

Primi 6 peccati di scrittura dell'articolo

Un uomo saggio una volta disse: "Dimmi dove morirò, quindi non andrò lì". Un modo per capire come fare qualcosa è capire come non farlo prima - poi invertirlo.Prendi la scrittura dell'articolo, per esempio. Per apprenderlo, è possibile (1) attraversare una tonnellata di risorse Internet sulla scrittura dell'articolo; oppure (2) tieni d'occhio questi semplici, ma importanti, boo-boo e tagliale non appena li vedi. Ecc

(Consigli tecnici e di design)

Fumetti adorabili con effetti sonori da tutto il mondo

Fumetti adorabili con effetti sonori da tutto il mondo

Le onomatopee sono parole che suggeriscono o assomigliano ai suoni . In termini più semplici, sono effetti sonori. Li vedi nei fumetti dove le cose vanno "Wham", "Bam" e "Smash". Molto probabilmente hai imparato alcuni di loro in giovane età come il modo in cui le mucche vanno 'muggiti' ei gatti si fanno 'miagolare'.

(Consigli tecnici e di design)