8768 sujets
Développement web côté serveur, CMS
Bonjour,
Une solution avec un petit script javascript en fin de page qui affiche une image au chargement de la page, et la fait disparaitre vers le haut de l'écran si on clique dessus.
Pour animer la disparition, on se contente d'une simple transition css.
Note que si javascript est désactivé, la page d'accueil s'affiche directement sans pénaliser l'utilisateur.
On utilise qu'une page ici. Si on utilisait une page d'accueil contenant uniquement une image lien pointant vers une autre page, on n'aurait pas besoin de javascript. Dans ce cas, il faudrait utiliser une animation css plutôt qu'une transition. Mais si on choisit cette solution, on se retrouve avec une page d'accueil initiale bien vide (uniquement l'image lien), ce qui ne devrait pas favoriser le référencement.
J'ai supposé que l'image recouvrait tout l'écran et pouvait être déformée autant que nécessaire. Si ce n'est pas le cas, il reste quelques adaptations de code à faire.
Amicalement,
Modifié par parsimonhi (09 Jan 2018 - 18:29)
Une solution avec un petit script javascript en fin de page qui affiche une image au chargement de la page, et la fait disparaitre vers le haut de l'écran si on clique dessus.
Pour animer la disparition, on se contente d'une simple transition css.
Note que si javascript est désactivé, la page d'accueil s'affiche directement sans pénaliser l'utilisateur.
On utilise qu'une page ici. Si on utilisait une page d'accueil contenant uniquement une image lien pointant vers une autre page, on n'aurait pas besoin de javascript. Dans ce cas, il faudrait utiliser une animation css plutôt qu'une transition. Mais si on choisit cette solution, on se retrouve avec une page d'accueil initiale bien vide (uniquement l'image lien), ce qui ne devrait pas favoriser le référencement.
J'ai supposé que l'image recouvrait tout l'écran et pouvait être déformée autant que nécessaire. Si ce n'est pas le cas, il reste quelques adaptations de code à faire.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
padding:0;
margin:0;
}
img[src='home.jpg'] {
display:block;
width:100%;
height:100%;
position:absolute;
bottom:0;
transition:bottom 3s;
}
</style>
</head>
<body>
<h1>Ma page d'accueil</h1>
<p>Mon contenu de page d'accueil</p>
<script>
function magic()
{
var e;
e=document.querySelector("img[src='home.jpg']");
e.style.bottom="100%";
}
document.write('<img src="home.jpg" onclick="magic()">\n');
</script>
</body>
</html>Amicalement,
Modifié par parsimonhi (09 Jan 2018 - 18:29)