web-dev-qa-db-fra.com

Écran de bienvenue avant le chargement du site Web (Cliquez pour entrer) [Écran de démarrage]

Comment créer un écran d'accueil sur mon site Web? Par exemple, j'ai une image et un lien qui dit "ENTRER" lorsque l'utilisateur clique sur entrer dans le site Web apparaît. Comment ferais-je ça? Aussi si possible avec Javascript ou JQuery, lorsque l'utilisateur clique sur "ENTRER", serait-il possible de faire un fondu enchaîné de l'écran de démarrage vers le site Web?

Je n'ai pas encore de code pour le moment.

javascriptjqueryhtmleffect
11
Julian

Vous pouvez placer votre écran de démarrage dans une div au-dessus de votre site Web lors de la première visite et lorsque l'utilisateur clique dessus (ou sur le lien "Entrée"), le fade avec:

 <div id="splashscreen">
    <h2>Welcome !</h2>
    Take a look at our new products, blablabla
    <img src="http://i.telegraph.co.uk/multimedia/archive/02182/kitten_2182000b.jpg" />

    <a href="#" class="enter_link">Enter on the website</a>
</div>

Et avec seulement 3 lignes de jQuery:

 $('.enter_link').click(function() { 
        $(this).parent().fadeOut(500);
 });

Le div écran de démarrage doit prendre tout l'espace disponible et avoir un arrière-plan pour masquer le contenu réel. Exemple JSFiddle: http://jsfiddle.net/5zP3Q/

Sachez que l'écran de démarrage ne doit être affiché que lors de la première visite. Pour cela, utilisez des sessions et des cookies côté serveur pour décider si vous devez afficher cette partie de code ou non.

13
Maxime Lorant

Je vais suggérer deux façons de le faire, mais je vous recommande vivement de le concevoir pour qu'il fonctionne lorsque JS est désactivé.

La première option consiste à créer une page de démarrage (un fichier séparé) - en d'autres termes, votre index.html ou tout autre fichier de destination principal ne contient que ce balisage et aucun javascript n'est requis. Cela présente des inconvénients:

-Tous les utilisateurs sont dirigés vers cette page à moins que vous ne fassiez quelque chose de terrible comme faire une redirection JS, etc. -Pas vraiment génial pour les utilisateurs qui ont déjà visité le site, car ils doivent cliquer pour accéder au site, sauf si vous ajoutez redirection JS exacte. -Mauvais pour le référencement (boooo)

La deuxième option consiste à intégrer votre page d'accueil à la page principale. Ceci est un exemple de déploiement rapide et sale, mais quelque chose que j'ai mis en œuvre sur de grands projets et cela fonctionne très bien. Fondamentalement, faites un div "splash" et un div "post-splash". Attribuez-leur les deux ID (peut-être en utilisant ces chaînes exactes) afin de pouvoir manipuler le avec JS. La div post-splash devrait (oh mon dieu, il va le dire) contenir un style en ligne d'affichage: aucun. C'est SUR LE BUT, alors n'ayez pas de réaction allergique - c'est pour que même si l'utilisateur attend que le CSS se charge, il ne sera PAS visible.

Fondamentalement, lorsque l'utilisateur clique sur le bouton "Continuer" dans la section "Splash", vous utilisez JS pour basculer purement et simplement la visibilité de votre div "Splash" et la div "Postsplash" pour bloquer, ou vous faites l'effet de fondu . L'effet de fondu nécessiterait un positionnement absolu sur la div "splash", de sorte que l'autre contenu puisse apparaître en haut de la fenêtre pendant le fondu.

Les avantages de cette approche sont divers, mais il y a des inconvénients que vous auriez à contourner en utilisant JS, le cas échéant. Je le construirais d'abord pour les machines non JS (ce qui est comme <1% des utilisateurs aux États-Unis) - en d'autres termes, le bouton "continuer" serait un lien pour rafraîchir la page avec un paramètre qui chargerait la page avec le "post-splash" visible, et l'affichage "splash": aucun. Cela n'est possible que si vous exécutez un environnement de serveur dynamique. Si vous n'exécutez pas PHP ou ASP ou quelque chose, alors vous pouvez simplement le faire agir comme l'option 1. Si l'utilisateur a javascript, pour le onclick) de ce bouton continuer, vous appelez simplement la méthode preventDefault () afin que la page ne soit pas actualisée, et effectuez plutôt votre fondu pour afficher le contenu.

C'est beaucoup d'informations, donc si vous avez besoin d'éclaircissements, faites-le moi savoir, mais cette méthode fonctionne très bien pour moi sur les projets à l'échelle de l'entreprise ET elle est SUPER COMPATIBLE en ce qu'elle ne cassera pas votre site Web pour les machines qui ne prennent pas en charge JS ( ce qui signifie qu'ils sont anciens, l'utilisateur l'a désactivé, le réseau l'a désactivé, etc.). YAY POUR UNE AMÉLIORATION PROGRESSIVE!

Pour être vraiment agréable pour vos utilisateurs, vous devez également définir un cookie qui ira directement au contenu de la page s'ils ont déjà visité le site. D'après mon expérience, les utilisateurs ne veulent pas vraiment voir les pages de démarrage plus d'une fois.

7
dudewad