animation CSS

refaire une animation existante

Sujet résolu

15 janvier 2018 à 8:16:44

Bonjour à tous,

Merci de votre aide,
J'ai très souvent vu et utilisé les réponses sans avoir besoin de poster,
Ce jour arriva enfin ! :)

Je voudrais faire cette animation sur un site

https://www.premiere-heure.fr/

Celle de l'image qui apparait en home, quand on arrive sur le site, avec le logo qui part vers le haut. Cest bien une image.

Est ce que quelqu'un pourrait m'aider à recopier le code ? Mon niveau ne me permet pas d'être à l'aise avec l'animation.

Merci. Je reste très attentif.

PS : puis je demander à le faire avec un code blanc ? je mettrai le code en fin de message.

Merci d'avance de votre aide et évidement du temps que vous me consacrerez. C'est pour moi bien trop difficile, même si j'ai essayé plusieurs fois sans jamais avoir un bon résultat.
A très vite.

<!DOCTYPE>
<html>
<head>
	<title>animation image de fond https://www.premiere-heure.fr/img/prehome.png </title>
</head>
<body>
	<div class="la-div-qui-doit-disparaitre div1" 
			style="background-image: url(https://www.premiere-heure.fr/img/prehome.png);">
			&nbsp;
	</div>
	<div class="la-div-qui-contient-le-reste-du-site div2"> 
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce sodales laoreet pulvinar. Aliquam pulvinar, sem sit amet pulvinar dictum, augue nisi consequat erat, eget euismod sapien risus eget felis. Nulla lobortis lectus quis volutpat accumsan. Fusce nec nisl vel felis maximus condimentum. Vivamus eget feugiat nulla, et posuere erat. Quisque viverra nulla pharetra cursus euismod. Integer et nulla ornare, vehicula libero quis, feugiat lacus.
	</div>
</body>
</html>

<style type="text/css">
	

</style>

Offkors

15 janvier 2018 à 16:21:48

Salut,

Je pense que plutôt que de copier le contenu tu ferais mieux de repartir de zéro et faire ton animation.

Voilà comment je l'ai faite personnellement : https://jsfiddle.net/7oevqmd7/

Clique sur "Run" en haut à gauche pour lancer l'animation comme si le site chargeait.

Tu es selon moi obligé de passer par du javascript pour lancer l'animation.

Si tu veux des explications pour comprendre comment ça fonctionne n'hésites pas !

A+

-
Edité par Offkors 15 janvier 2018 à 16:22:08

Lord Morpheus

15 janvier 2018 à 22:40:04

Bonsoir,

Je me permet cette mise à jour, elle retire simplement le width et height à 100% sur la position absolute : https://jsfiddle.net/7oevqmd7/1/

Petite source aucunement officiel : https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

Rpv

15 janvier 2018 à 23:30:25

hey mais vous êtes trop fort ...

c'est beaucoup trop difficile à faire pour mon niveau.
mais grâce à vous je vais pouvoir bidouiller un truc j'espère.

Je vous montrerai le résultat final :)

Merci mille fois !

<div id="bandeauimage"></div>
<div id="site">
  Le contenu du site
</div>


<style type="text/css">
#bandeauimage {
  background:url('https://cdn.pixabay.com/photo/2017/02/19/15/28/winter-2080070_960_720.jpg');
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  transition: all 1s;
  z-index:1;
}

#site {
  top:100px;
  transition: all 1s;
  position:relative;
}

</style>

<script type="text/javascript">
	function disparition () {
	setTimeout(function() {
	document.getElementById('bandeauimage').style.top = "-100%";
  }, 2000);
  setTimeout(function() {
  document.getElementById('bandeauimage').style.display = "none";
  }, 3000);
  setTimeout(function() {
  document.getElementById('site').style.top = "0";
  }, 2500);
	}
  disparition();


</script>

Lord Morpheus

15 janvier 2018 à 23:45:06

Pense à passer ton sujet en résolu!

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

Offkors

16 janvier 2018 à 12:49:35

Salut,

J'aurais eu tendance à laisser les propriétés de tailles height et width plutôt que de rajouter les éléments de placement bot & right car j'ai l'impression que ça dénature l'animation, dans le sens où l'image monte bien mais finie par disparaître brutalement si elle est plus grande que la taille de la fenêtre. Sauf erreur de ma part !

Lord Morpheus

16 janvier 2018 à 15:35:37

Tu as totalement raison! En ajoutant l’attribut bottom, je perd l'effet attendu! Voici une mise à jour : https://jsfiddle.net/7oevqmd7/2/

Par contre, pas besoin pour la largeur, on laisse ainsi et on évite justement le width: 100% qui n'as pas lieu d'être.

-
Edité par Lord Morpheus 16 janvier 2018 à 15:36:22

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

Rpv

22 janvier 2018 à 15:59:30

Lord Morpheus a écrit:

Tu as totalement raison! En ajoutant l’attribut bottom, je perd l'effet attendu! Voici une mise à jour : https://jsfiddle.net/7oevqmd7/2/

Par contre, pas besoin pour la largeur, on laisse ainsi et on évite justement le width: 100% qui n'as pas lieu d'être.

-
Edité par Lord Morpheus 16 janvier 2018 à 15:36:22

Excuse moi, je me permet de t'écrire Morpheus, Est ce que tu pourrais m'aider pour mon nouveau soucis stp ?
J'ai trop de mal a isoler le code, jai pourtant essayé deux jours avant de te déranger ^^'
Je l'ai posé sur mon nouveau post, Merci quoi qu'il arrive

https://openclassrooms.com/forum/sujet/animation-css-13

animation CSS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

animation CSS

refaire une animation existante

animation CSS

Supprimer

Modérer

Signaler le message aux modérateurs