8710 sujets

Développement web côté serveur, CMS

Bonjour, je souhaiterais savoir s'il était possible de créer une animation quand on clique sur une image lien qui fait toute la page pour qu'elle disparaisse en glissant vers le haut pour qu'on puisse arriver sur la page d'accueil du site, merci de vos réponses et de votre attention.
Modérateur
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. Smiley cligne

<!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)