Déplacement d'images
chevert35
Messages postés
15
Statut
Membre
-
chevert35 Messages postés 15 Statut Membre -
chevert35 Messages postés 15 Statut Membre -
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
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
3 réponses
-
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
-
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'. -
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
.........
<div id="bde4">
<img src="EEE_125.jpg" alt="E4">
</div>
...........
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;
}
.........
