Un ottimo modo per attirare l'attenzione di un visitatore sul tuo sito Web è una "schermata iniziale" o una "schermata introduttiva". Tuttavia, il successo di uno è molto difficile per un semplice motivo: gli splash screen irritano facilmente gli utenti.
Gli splash screen possono funzionare se appaiono rapidamente e sono facilmente ignorabili. Possono essere visivamente eclatanti e belli, e fare in modo che l'utente desideri scorrere per saperne di più. Questo stile di introduzione funziona molto bene sui siti di scorrimento a pagina singola. O lo "stile banner" del webdesign che è entrato di moda nella tendenza del design piatto. Può anche essere molto utile creare uno stile di intro di "background video" di aspetto piacevole, che al momento è anche all-in-the-rage.
Quello che voglio mostrarvi oggi è un metodo di base per ottenere questo effetto, che è possibile modificare facilmente per creare intros piacevoli alle esperienze web.
Se ti piacerebbe vedere cosa stiamo costruendo, c'è una demo qui. E tu puoi scarica qui tutti i file sorgente.
Il markup
Cercheremo di mantenere il markup per questo molto semplice. In questo modo può essere effettivamente implementato su siti preesistenti e nuovi progetti.
Quindi in pratica quello che vogliamo fare è div. Uno con una classe di splash e un altro con una classe di wrapper . (La classe wrapper potrebbe già esistere in qualche modo per te se stai implementando questo su un sito preesistente, quindi potresti aver bisogno di variare il nome di questa classe).
Questo è tutto. Questo è tutto ciò di cui abbiamo bisogno semanticamente. Ma ovviamente aggiungeremo alcuni contenuti fittizi e titoli in modo che abbiamo qualcosa da guardare nella nostra demo. Avremo anche bisogno di una sorta di freccia da aggiungere nella schermata iniziale per mostrare all'utente che può scorrere verso il basso (poiché questo sarà il nostro metodo per far scomparire lo schermo di introduzione e introdurre il contenuto principale).
Quindi ecco il semplice markup che va all'interno del nostro tag body :
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, velit sapiente tempera ullam accusamus minus laborum porro odit sequi dolorum enim optio alias a nulla laudantium voluptatibus quibusdam quaerat provident eius quo perferendis voluptatem modi maiores cumque saepe quidem ducimus numquam et commodi cupiditate libero pariatur mollitia eveniet molestias debitis quia! Natus, minima, errore, porro facere cum perferendis consequatur necessitatibus id sapiente soluta veritatis magnam quasi ut cumque provident quidem nemo enim nesciunt nihil architecto in obcaecati nobis quam tenetur corrupti. Errore, soluta autem conseguatur mollitia dolorem sequi iusto dolore fuga facilis illum accusamus ratione earum quasi ipsa doloribus odio. Architecto, natus fuga non perferendis veritatis nihil repellat dolorum rerum quidem
Quindi spieghiamo cosa sta succedendo qui in modo un po 'più dettagliato: iniziamo con il nostro splash div. All'interno di questo abbiamo un titolo e il nostro indicatore di scorrimento (che qui è un'immagine di una freccia, ma può essere qualsiasi cosa tu voglia che sia ovviamente). Quindi chiudiamo quel div e ne apriamo un altro con una classe di wrapper . Al suo interno abbiamo solo alcuni contenuti generici del sito che saranno diversi per ogni caso, ma qui manterremo la cosa semplice: un titolo, una navigazione, un'area di contenuto principale e un footer. Quindi jQuery è incluso dall'API di Google poiché lo utilizzeremo per funzionalità, e infine ci collegheremo a un altro file .js che è il nostro in cui scriveremo il nostro codice jQuery.
Si potrebbe anche notare il nome classe fade-in nell'area dello splash screen. Useremo questa classe per aggiungere alcune belle animazioni CSS3 a determinati elementi e rendere l'introduzione più potente. Ovviamente se si guardano i risultati ora non sarà davvero nulla, abbiamo bisogno di stile tutto ora. A proposito, passiamo al CSS ...
Messa in piega
Ancora una volta, proviamo a mantenere gli stili semplici e utili. Questo è tutto semplice CSS. Prima di tutto, iniziamo con il nome della classe .fade-in. (Questo deve essere dichiarato nella parte superiore del nostro file CSS, in modo da poter dichiarare tempi di ritardo di animazione diversi su altri elementi più avanti.)
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }.fade-in {opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:0.3s;-moz-animation-duration:0.3s;animation-duration:0.3s;-webkit-animation-delay: 0.5s;-moz-animation-delay: 0.5s;animation-delay: 0.5s;}
Stiamo dichiarando per primi i fotogrammi chiave e chiamando la nostra animazione fadeIn. Passa da un'opacità da 0 a 1. Quindi indirizziamo direttamente il nome della classe, specificando che ha 0 opacità. e chiama l'animazione che abbiamo appena specificato, fallo durare 0,3 secondi e dargli un ritardo di 0,5 secondi.
Ora diamo un'occhiata al CSS necessario per la nostra pagina iniziale:
.splash { background: url('../img/splash-bg.jpg') center center;background-size: cover;background-attachment: fixed;position: fixed;top: 0;right: 0;bottom: 0;left: 0;min-height: 360px;z-index: 999;text-align: center;}
Stiamo chiamando un'immagine di sfondo (qui è solo una foto in bianco e nero di una strada), che stiamo centrando, assicurandoci anche che copra l'intero schermo a qualsiasi dimensione, e rendendolo allegato - il che significa che è " Non mi muoverò sullo scroll. Poi gli diamo una posizione 'fissa' e specificiamo che dovrebbe essere a una distanza di 0 dall'alto, a destra, in basso ea sinistra, quindi riempie l'intera finestra del browser. Daremo quindi un'altezza minima in quanto ciò che posizioneremo all'interno sarà assolutamente posizionato. Assicurati che abbia un alto indice z come vogliamo che appaia sopra il resto del contenuto della pagina (che ora verrà posizionato direttamente sotto la schermata iniziale, in quanto ha una posizione fissa).
Ecco qua, sono tutti gli stili che sono effettivamente necessari per far apparire lo splash screen nel posto giusto sulla pagina. Riempiendo lo schermo e soprattutto tutti gli altri contenuti, senza modificare il flusso della pagina. Così ora ti darò rapidamente il resto del CSS, che colloca principalmente il titolo nel posto giusto, aggiungendo una bella freccia rivolta verso il basso per indicare che l'utente deve scorrere. E infine alcuni stili di base per la pagina e alcune query multimediali:
html, body { width: 100%;height: 100%;}body { font: normal 1em/1.5em 'Open Sans', sans-serif; color: #333; margin-bottom: 20px; }.wrapper {max-width: 1000px;width: 90%;margin: 0 auto;}.splash-title {color: white;font-size: 3em;margin-top: 100px;text-shadow: 0 2px 10px #000;-webkit-animation-delay: 1s;-moz-animation-delay: 1s;animation-delay: 1s;}a.splash-arrow {color: white;font-size: 1.2em;position: absolute;bottom: 55px;left: 50%;margin-left: -25px;padding: 10px;width: 50px;height: 50px;font-weight: bold;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;animation-delay: 1.5s;border: 3px solid white;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}a.splash-arrow:hover {text-decoration: none;bottom: 50px;}@media all and (max-width: 690px) {header h1 { width: 100%; text-align: center; }header nav { float: none; display: inline-block; margin: 0 auto; }.splash-title {font-size: 2em;}}@media all and (max-width: 480px) {.splash-title {font-size: 1.5em;}}
Quindi qui abbiamo stili generali del corpo, alcuni dei migliori padding sul titolo, in cui ritardiamo anche la dissolvenza in animazione di un altro mezzo secondo. Quindi ha il suo ingresso. Il collegamento a freccia è assolutamente posizionato, per essere sempre al centro e in fondo allo schermo. Ha un altro mezzo secondo di ritardo per apparire finale allo schermo. Stiamo aggiungendo alcune transizioni CSS3 in modo che le modifiche di posizione sullo stato: hover siano animate. Finalmente abbiamo alcune minime modifiche alle query multimediali per renderlo leggermente più bello sugli schermi più piccoli. Ma ovviamente questi stili cambieranno in base al tuo design.
jQuery
Quindi, come abbiamo dichiarato in precedenza, creeremo un file chiamato main.js in una directory js . Al suo interno scriveremo il nostro jQuery che fa sparire lo splash screen sullo scroll, o quando fai clic sul collegamento a freccia. Ecco qui:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} );} $ (. "Splash-freccia") clicca (function () {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"} , 800);});});}); $ (window) .scroll (function () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"} ". Wrapper ";, 100) $ () di ritardo (100) .animate ({" opacità ":" 1.0" }, 800);});});
Prima di tutto stiamo avvolgendo le nostre prime dichiarazioni in una funzione pronta per il documento , per agire solo quando la pagina è completamente caricata. Quindi per iniziare controlliamo se la nostra schermata iniziale è visibile. Se lo è, rendiamo invisibile il wrapper (quindi non abbiamo flash di contenuti mentre l'immagine di sfondo si carica, e anche per fare un'ultima dissolvenza in animazione una volta che arriviamo alla pagina). Quindi aggiungiamo una funzione al gestore di clic sulla freccia. Quindi, se l'utente fa clic su di esso, la schermata di avvio si sposta (e quindi scompare) e quindi si anima l'opacità del wrapper su 1.
Questo piccolo blocco di codice è (quasi) lo stesso che useremo subito dopo nella funzione $ (finestra) .scroll . Quindi, quando l'utente scorre, facciamo scorrere verso l'alto lo splash e quindi questa volta torniamo alla parte superiore della pagina (quindi l'utente non inizia a metà della pagina) e animano l'opacità dell'elemento wrapper. Aggiungiamo anche in tale riga $ (window) .off ("scroll"); questo impedisce alla finestra di scorrere effettivamente quando non lo vogliamo. Quando l'utente scorre per primo, vogliamo che sia sufficiente attivare l'animazione e non scorrere effettivamente la pagina. Ma una volta terminata l'introduzione, la pagina scorrerà normalmente.
Conclusione
Ecco qui, una soluzione molto semplice (leggera) ma elegante per avere uno schermo introduttivo aggiunto alla parte superiore del tuo sito, e farlo sparire sullo scroll, o quando l'utente fa clic su un elemento specifico. Sentiti libero di prendere questo codice, usalo e modificalo in base alle tue esigenze.
Come ho detto all'inizio, questa tecnica può essere utilizzata in molti modi diversi, quindi diventa creativo!