Un excellent moyen d'attirer l'attention d'un visiteur sur votre site Web est un "écran de démarrage" ou un "écran d'introduction". Cependant, il est très difficile d’en faire une pour une simple raison: les écrans de démarrage irritent facilement les utilisateurs.
Les écrans de démarrage peuvent fonctionner s'ils apparaissent rapidement et sont facilement déductibles. Ils peuvent être visuellement saisissants et beaux, et inciter l'utilisateur à faire défiler pour en savoir plus. Ce style d'introduction fonctionne très bien sur les sites Web à page unique. Ou le «style de bannière» de webdesign qui est entré dans la tendance du design plat. Il peut également être très utile de créer un style d’intro de "vidéo d’arrière-plan" qui soit à la mode en ce moment.
Ce que je veux vous montrer aujourd'hui, c'est une méthode de base pour obtenir cet effet, que vous pouvez facilement modifier pour créer des intros agréables sur le Web.
Si vous voulez voir ce que nous construisons, il y a une démo ici. Et tu peux téléchargez tous les fichiers sources ici.
Le balisage
Nous allons essayer de garder le balisage pour cela très simple. De cette manière, il peut être implémenté sur des sites préexistants ainsi que sur de nouveaux projets.
Donc, fondamentalement, nous voulons créer deux div. Un avec une classe de splash et un autre avec une classe de wrapper . (La classe wrapper peut déjà exister pour vous si vous implémentez cela sur un site préexistant, vous devrez donc peut-être modifier le nom de cette classe).
C'est tout. C'est tout ce dont nous avons besoin sémantiquement. Mais évidemment, nous ajouterons du contenu et des titres factices afin que nous ayons quelque chose à regarder dans notre démo. Nous aurons également besoin d'une sorte de flèche à ajouter à l'écran de démarrage pour montrer à l'utilisateur qu'il peut faire défiler la page (car ce sera notre méthode pour faire disparaître l'écran d'introduction et introduire le contenu principal).
Alors voici le balisage simple qui se trouve dans notre balise body :
Lorem ipsum dolor s'asseoir, consectetur adipisicing elit. Dolor, Velvet sapiente facera tempora ullam accusamus moins le travail poro odi sequi dolorum enim optio alias à nulla laudantium Natus, minima, error, porro facere cum perferendis conséquence necessitatibus id e s sdevient soluta veritatis magnam quasi ut cumque prévoyance quidem nemo enim nesciunt nihil architecto in obcaecati nobis quam tenetur corrupti. Erreur, soluta autem conséquence mollitia dolorem sequi iodo dolore fuga facilis esse illum accusamus ratione earum quasi ipsa doloribus odio. Architecte, natus fuga non perferendis veritatis nihil repellat dolorum rerum quidem
Expliquons donc un peu plus en détail ce qui se passe ici: nous commençons par notre div splash . A l'intérieur de cela, nous avons un titre et notre indicateur de défilement (qui est ici une image en flèche, mais peut être tout ce que vous voulez qu'il soit évident). Ensuite, nous fermons cette div et en ouvrons une autre avec une classe de wrapper . A l'intérieur, nous avons juste un contenu générique du site qui sera différent pour chaque cas, mais ici, nous allons le garder simple: un titre, une navigation, une zone de contenu principale et un pied de page. Ensuite, jQuery est inclus dans l’API de Google car nous l’utiliserons pour les fonctionnalités, et finalement nous lierons un autre fichier .js qui est le nôtre et dans lequel nous écrirons notre code jQuery.
Vous pouvez également noter le nom de la classe fondu dans la zone de l'écran d'accueil. Nous utiliserons cette classe pour ajouter de belles animations CSS3 à certains éléments et rendre l'intro plus puissante. Évidemment, si vous regardez les résultats maintenant, ce ne sera pas vraiment quelque chose, nous devons tout styliser maintenant. En parlant de cela, passons au CSS ...
Coiffant
Encore une fois, essayons de garder les styles simples et utiles. Ceci est tout simple CSS. Tout d'abord, commençons par le nom de la classe .fade-in. (Ceci doit être déclaré en haut de notre fichier CSS, afin que nous puissions déclarer différents temps de retard d'animation sur les autres éléments ci-dessous.)
@-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;}
Nous déclarons les images clés en premier et appelons notre animation fadeIn. Il passe d'une opacité de 0 à 1. Ensuite, nous ciblons directement le nom de la classe, spécifiez qu'il a 0 opacité. et appeler l’animation que nous venons de spécifier, la faire durer 0.3s et lui donner un délai de 0.5s.
Maintenant, regardons le CSS nécessaire pour notre page de démarrage:
.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;}
Nous appelons une image de fond (ici, juste une photo en noir et blanc d’une rue), que nous centrons, en nous assurant qu’elle couvre tout l’écran à quelque taille que ce soit ne bouge pas sur le défilement. Ensuite, nous lui donnons une position "fixe", et spécifions qu'il devrait être à une distance de 0 du haut, de la droite, du bas et de la gauche. Il remplit donc toute la fenêtre du navigateur. Nous lui donnerons alors une hauteur minimale car ce que nous allons placer à l'intérieur sera absolument positionné. Assurez-vous qu'il a un index z élevé, car nous voulons qu'il apparaisse au-dessus du reste du contenu de la page (qui sera maintenant placé directement sous notre écran d'accueil, car il a une position fixe).
Voilà, tous les styles nécessaires pour faire apparaître l'écran de démarrage au bon endroit sur la page. Remplir l'écran et surtout tout autre contenu, sans modifier le flux de la page. Alors maintenant, je vais rapidement vous donner le reste du CSS, qui place principalement le titre au bon endroit, ajouter une belle flèche vers le bas pour indiquer que l'utilisateur doit faire défiler. Et enfin, quelques styles de base pour la page et quelques questions sur les médias:
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;}}
Donc, ici, nous avons des styles de corps généraux, un peu de remplissage sur le titre, où nous retardons également l'animation d'un demi-seconde. Donc, il a sa propre entrée. Le lien fléché est absolument positionné, pour être toujours au milieu et au bas de l'écran. Il lui reste encore une demi-seconde de retard pour apparaître à l'écran. Nous ajoutons des transitions CSS3 afin que les changements de position sur l’état: hover soient animés. Enfin, nous avons quelques minuscules changements de requêtes sur les médias pour les rendre légèrement plus jolis sur des écrans plus petits. Mais évidemment, ces styles changeront en fonction de votre conception.
jQuery
Donc, comme nous l’avons déclaré plus tôt, nous allons créer un fichier nommé main.js dans un répertoire js . À l'intérieur de cela, nous allons écrire notre jQuery qui fait disparaître l'écran de démarrage en défilement, ou lorsque vous cliquez sur le lien fléché. C'est ici:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} );} $ (". splash-arrow"). Cliquez sur (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"} , 100); $ (". Wrapper"). Delay (100) .animate ({"opacity": "1.0"}, 800);});});
Tout d'abord, nous enveloppons nos premières instructions dans une fonction de document prête à être utilisée uniquement lorsque la page est complètement chargée. Donc, pour commencer, nous vérifions si notre écran de démarrage est visible. Si tel est le cas, nous rendons l’encapsuleur invisible (nous n’avons donc pas de contenu flash lorsque l’image d’arrière-plan se charge, et nous procédons également à un fondu final de l’animation une fois arrivé à la page). Nous ajoutons ensuite une fonction au gestionnaire de clics sur la flèche. Donc, si l'utilisateur clique dessus, l'écran de démarrage glisse vers le haut (et disparaît donc) et ensuite nous animons l'opacité du wrapper à 1.
Ce petit bloc de code est (presque) le même que celui que nous utiliserons juste après dans la fonction $ (window) .scroll . Ainsi, lorsque l'utilisateur fait défiler, nous déplaçons le splash, puis cette fois-ci, nous l'animons en haut de la page (afin que l'utilisateur ne démarre pas à mi-chemin de la page) et animent l'opacité de l'élément wrapper. Nous ajoutons aussi cette ligne $ (window) .off ("scroll"); cela empêche la fenêtre de défiler lorsque nous ne le souhaitons pas. Lorsque l'utilisateur fait défiler la page pour la première fois, nous voulons simplement qu'il désactive l'animation et ne fasse pas réellement défiler la page. Mais une fois l'intro terminée, la page défilera normalement.
Conclusion
Donc voilà, une solution très simple (légère) mais élégante pour avoir un écran d'introduction ajouté en haut de votre site et le faire disparaître en défilement, ou lorsque l'utilisateur clique sur un élément spécifique. N'hésitez pas à prendre ce code, utilisez-le et modifiez-le en fonction de vos besoins.
Comme je l'ai mentionné au début, cette technique peut être utilisée de différentes manières, alors soyez créatif!