Crée du mouvement à l'aide de deux photos et jquery
Fermé
cactusauvage
Messages postés
7
Date d'inscription
jeudi 22 février 2018
Statut
Membre
Dernière intervention
18 décembre 2021
-
20 janv. 2019 à 11:53
nightknight - 22 janv. 2019 à 06:14
nightknight - 22 janv. 2019 à 06:14
A voir également:
- Crée du mouvement à l'aide de deux photos et jquery
- Partage de photos - Guide
- Deux comptes whatsapp - Guide
- Toutes mes photos - Guide
- Cree un compte google - Guide
- Cree un compte gmail - Guide
1 réponse
Bonjour,
si vous parlez de fluidité d'animation ça ne sera certainement pas avec 2 images. En effet l’œil humain voit en 25 images/secondes et 2 images ce n'est pas suffisant pour donner une impression de fluidité? Au mieux avec une vitesse rapide vous aurez un truc clignotant.
Le site que vous montrez c'est à éviter ce genre d'effet car perturbant pour le visiteur et l'empêche d'accéder simplement au contenu. Surtout que la transition à la fin est brusque (pour pas dire inexistante) et ne donne pas l'effet de quelque chose qui boucle. Enfin là c'est une question de design et de mise en page pas de technique.
Pour répondre concrètement à vos questions(par ordre croissant d'intérêt dans votre cas):
1_Animation en CSS
Bon si vous connaissez CSS orientez vous vers les possibilités d'animations de CSS3 et les versions suivantes. Il y a d'ailleurs des possibilités de faire des dégradés et aussi d'utiliser la transparence.
Pour les dégradés par exemple il y a la propriété CSS "linear-gradient" que vous pouvez utiliser aussi la transparence avec la valeur de couleur rgba(255,255,255,0.5) qui est la même chose que la notation hexadécimale(#ffffff) mais exprimée sur une base 0 à 256(plus proche de l'octet) avec la dernière valeur exprimant la valeur alpha, autrement dit l'opacité de la couleur(1=100% d'opacité donc la couleur normale, 0= 0% donc invisible et 0.5=50% semi-transparence de 50% d'opacité ou d'invisibilité c'est selon que vous préférez les verres à moitié plein ou vides ;))
exemples et syntaxe ici:
https://www.w3schools.com/css/css3_gradients.asp
Pour l'animation il y a plusieurs méthodes dont "transition" et "@keyframes" en CSS parmi d'autres qui permettent différents types d'animation et de réglages.
https://www.w3schools.com/css/css3_transitions.asp
https://www.w3schools.com/css/css3_animations.asp
Le plus simple, rapide et efficace, surtout si vous avez des notions en CSS.
Vous serez toutefois restreint à des animations qui auront un petit côté mécanique/mathématique, pratique et très performant, n'aura aucun poids de chargement si vous utilisez juste une affichage avec le CSS(couleurs et formes 'dessinés' par CSS contre un fichier d'images-plusieurs pour des animations en général- qui doit être chargé par le navigateur donc sera plus lent à cette étape).
Pas question de faire des dessins animés ou des films et il faudra passer pas mal de temps sur les animations pour en faire des complexes qui changent un peu des effets mécaniques/mathématiques les plus évidents bien qu'on puisse faire ce qu'on veut en mélangeant les techniques de dessins(styles CSS de balises HTML, changements de formes/tailles/couleurs/opacités/positions/... allié à des images éventuellement).
2_Animation avec SVG:
Assez proche des animations en CSS dans l'idée cela permet des possibilités très performantes. Un fichier ou image SVG est un dessin vectoriel(un peu comme les points des cahiers de coloriage à relier pour avoir l'image). SVG est assez proche(pour pas dire identique) du principe de HTML et permet de faire des dessins très évolués et complexes qui seront présents sous la forme de balise HTML (<svg .../>). Des logiciels de dessin vectoriel permettent ainsi d'obtenir des images qui auront un poids négligeable car indiqué sous la forme de texte comprenant les lignes/formes, couleurs de l'image en tant que texte(je vous disait qu'on est dans le même genre que le HTML).
Il existe des possibilités d'animation. Bien que simple dans le principe il faut être assez rigoureux et apprendre les méthodes d'animation qui vont avec:
https://www.w3schools.com/css/css3_animations.asp
Depuis que les possibilités CSS d'animation existent le SVG est moins courant car force à apprendre un autre langage et une autre rigueur(SVG est en fait pus proche du XML donc plus rigoureux dans son écriture).
si vous parlez de fluidité d'animation ça ne sera certainement pas avec 2 images. En effet l’œil humain voit en 25 images/secondes et 2 images ce n'est pas suffisant pour donner une impression de fluidité? Au mieux avec une vitesse rapide vous aurez un truc clignotant.
Le site que vous montrez c'est à éviter ce genre d'effet car perturbant pour le visiteur et l'empêche d'accéder simplement au contenu. Surtout que la transition à la fin est brusque (pour pas dire inexistante) et ne donne pas l'effet de quelque chose qui boucle. Enfin là c'est une question de design et de mise en page pas de technique.
Pour répondre concrètement à vos questions(par ordre croissant d'intérêt dans votre cas):
1_Animation en CSS
Bon si vous connaissez CSS orientez vous vers les possibilités d'animations de CSS3 et les versions suivantes. Il y a d'ailleurs des possibilités de faire des dégradés et aussi d'utiliser la transparence.
Pour les dégradés par exemple il y a la propriété CSS "linear-gradient" que vous pouvez utiliser aussi la transparence avec la valeur de couleur rgba(255,255,255,0.5) qui est la même chose que la notation hexadécimale(#ffffff) mais exprimée sur une base 0 à 256(plus proche de l'octet) avec la dernière valeur exprimant la valeur alpha, autrement dit l'opacité de la couleur(1=100% d'opacité donc la couleur normale, 0= 0% donc invisible et 0.5=50% semi-transparence de 50% d'opacité ou d'invisibilité c'est selon que vous préférez les verres à moitié plein ou vides ;))
exemples et syntaxe ici:
https://www.w3schools.com/css/css3_gradients.asp
Pour l'animation il y a plusieurs méthodes dont "transition" et "@keyframes" en CSS parmi d'autres qui permettent différents types d'animation et de réglages.
https://www.w3schools.com/css/css3_transitions.asp
https://www.w3schools.com/css/css3_animations.asp
Le plus simple, rapide et efficace, surtout si vous avez des notions en CSS.
Vous serez toutefois restreint à des animations qui auront un petit côté mécanique/mathématique, pratique et très performant, n'aura aucun poids de chargement si vous utilisez juste une affichage avec le CSS(couleurs et formes 'dessinés' par CSS contre un fichier d'images-plusieurs pour des animations en général- qui doit être chargé par le navigateur donc sera plus lent à cette étape).
Pas question de faire des dessins animés ou des films et il faudra passer pas mal de temps sur les animations pour en faire des complexes qui changent un peu des effets mécaniques/mathématiques les plus évidents bien qu'on puisse faire ce qu'on veut en mélangeant les techniques de dessins(styles CSS de balises HTML, changements de formes/tailles/couleurs/opacités/positions/... allié à des images éventuellement).
2_Animation avec SVG:
Assez proche des animations en CSS dans l'idée cela permet des possibilités très performantes. Un fichier ou image SVG est un dessin vectoriel(un peu comme les points des cahiers de coloriage à relier pour avoir l'image). SVG est assez proche(pour pas dire identique) du principe de HTML et permet de faire des dessins très évolués et complexes qui seront présents sous la forme de balise HTML (<svg .../>). Des logiciels de dessin vectoriel permettent ainsi d'obtenir des images qui auront un poids négligeable car indiqué sous la forme de texte comprenant les lignes/formes, couleurs de l'image en tant que texte(je vous disait qu'on est dans le même genre que le HTML).
Il existe des possibilités d'animation. Bien que simple dans le principe il faut être assez rigoureux et apprendre les méthodes d'animation qui vont avec:
https://www.w3schools.com/css/css3_animations.asp
Depuis que les possibilités CSS d'animation existent le SVG est moins courant car force à apprendre un autre langage et une autre rigueur(SVG est en fait pus proche du XML donc plus rigoureux dans son écriture).
