déplacement d'images Fermé

Question

Bonjour, 
Bonjour,
Je voudrais faire l'animation suivante :
J'ai besoin de déplacer quelques images (l'une après l'autre avec un intervalle de 1 seconde environ),
 en sorte que, partant d'un bord de la page, elles arrivent chacune à sa place prévue (qui est une div) par un déplacement continu.
Les images représentent des lettres et reconstitueront donc un mot au fur et à mesure de leur arrivée.
J'ai une photo fixe en fond de page et les lettres viendront en surimpression sur cette photo.
Je voudrais que les images soient cachées au départ et se mettent en route, de façon visible, quelques secondes après l'ouverture de la page.
J'ai lu que jquery serait le plus approprié... Je ne m'y connais guère. Merci de bien vouloir me donner tout conseil utile : fonction à utiliser, 
comment cacher les images avant leur démarrage, etc


Configuration: Windows / Chrome 69.0.3497.100

jordane45 · Answer

Bonjour,

Pour cacher un élément html il suffit de jouer avec le style DISPLAY
https://www.w3schools.com/css/css_display_visibility.asp
ou en jquery avec les méthodes SHOW / HIDE
https://api.jquery.com/show/
https://api.jquery.com/hide/

Pour ce qui est de l'animation, 
https://www.w3schools.com/jquery/jquery_animate.asp

Pour le démarrage retardé... javascript avec un settimeout
https://www.w3schools.com/jsref/met_win_settimeout.asp

hebus · Answer

sans oublier les animations en CSS3 qui suffiront largement pour une animation aussi simple.
Plusieurs réponses exemples ici:

https://www.w3schools.com/css/css3_animations.asp

Et avec JavaScript autant utiliser requestAnimationFrame (ou setInterval) puisque qu'il y a plusieurs images à animer.
Au passage JQuery n'est pas plus approprié pour l'animation. La bibliothèque(en JavaScript) JQuery dans ce cas ralentirait le chargement de la page en n'ajoutant aucune fonction vraiment utile pour une animation d'image à faire 'à la main'.

chevert35 · Answer

Merci jordane45, merci hebus Ma page est maintenant impeccable : les @keyframes marchent et j'ai mis de l'ordre dans mes coordonnées pour les positions "absolute". HTML .........

........... style.css ....... @keyframes anime4 { from {margin-left : 785px; margin-top : 525px;} to {margin-top : 235px; margin-left : 627px;} } #bde4 { position : absolute; width : 120px; height : 125px; margin-top : 525px; margin-left : 785px; animation-name : anime4; animation-delay : 5s; animation-duration : 3s; animation-fill-mode : forwards; } #bae4 { position : absolute; width : 120px; height : 125px; margin-top : 235px; margin-left : 627px; } .........

Déplacement d'images

3 réponses

Discussions similaires