Déplacement d'images
Fermé
chevert35
Messages postés
15
Date d'inscription
dimanche 28 mai 2017
Statut
Membre
Dernière intervention
22 novembre 2018
-
21 oct. 2018 à 17:46
chevert35 Messages postés 15 Date d'inscription dimanche 28 mai 2017 Statut Membre Dernière intervention 22 novembre 2018 - 15 nov. 2018 à 17:49
chevert35 Messages postés 15 Date d'inscription dimanche 28 mai 2017 Statut Membre Dernière intervention 22 novembre 2018 - 15 nov. 2018 à 17:49
A voir également:
- Déplacement d'images
- Historique déplacement google - Guide
- Images gratuites - Guide
- Google images - Guide
- Images enregistrées - Forum Gravure
- Visualisez cette image avec un logiciel d'édition d'images. combien y a-t-il de pixels noirs sur le camion ? - Forum Photoshop
3 réponses
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
21 oct. 2018 à 18:39
21 oct. 2018 à 18:39
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'.
chevert35
Messages postés
15
Date d'inscription
dimanche 28 mai 2017
Statut
Membre
Dernière intervention
22 novembre 2018
15 nov. 2018 à 17:49
15 nov. 2018 à 17:49
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;
}
.........
