Déplacement d'images
chevert35
Messages postés
15
Date d'inscription
Statut
Membre
Dernière intervention
-
chevert35 Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
chevert35 Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
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
A voir également:
- Déplacement d'images
- Historique déplacement google - Guide
- Des images - Guide
- Images enregistrées - Forum Gravure
- Extraire images pdf - Guide
- Les images enregistrées n'apparaissent plus - Forum Bureautique
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
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'.
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;
}
.........
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;
}
.........