Javascript ou CSS ??

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
je-commence-demain
Messages : 5
Enregistré le : 26 juin 2020, 13:03

Javascript ou CSS ??

Message par je-commence-demain » 09 juil. 2020, 08:57

Bonjour,
J'ai vu sur plusieurs sites des petits effets d'animation que je trouve sympa. En gros, en fond on voit des formes qui bougent toujours un peu au fur et à mesure qu'on descend de la page. J'ai d'abord tenter d'imiter cela avec un gif créé via photoshop que j'ai insérer en fond, mais le résultat est pas top. Est-ce que vous pensez qu'il vaut mieux me débrouiller à bidouiller quelque chose en CSS ou est-ce que Javascript serait plus efficace pour ce type d'animation ? (En espérant avoir été assez clair..)

Avatar du membre
webmaster
Administrateur du site
Messages : 256
Enregistré le : 28 févr. 2017, 15:19

Re: Javascript ou CSS ??

Message par webmaster » 09 juil. 2020, 11:36

Bonjour,

C'est sans doute un mélange de JS et CSS

Apple fait souvent ce genre d'animation.
Il y a deja des bibliothèques toute pretes comme par exemple
https://michalsnik.github.io/aos/
https://www.delac.io/wow/
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

jean3xw
Messages : 3
Enregistré le : 17 juil. 2020, 06:06

Re: Javascript ou CSS ??

Message par jean3xw » 17 juil. 2020, 06:52

"Javascript ou CSS ??"

Tout dépends de l'animation et de vos compétences, donc non ce n'est pas très clair ce que vous voulez animer.
Un gif animé c'est plusieurs images qui défilent mais ça reste une image(voir aussi png animé qui permet de meilleures qualités d'images) dans la page.
Le CSS permet d'animer des éléments de la page , voir par exemple @keyframes (il y a d'autres possibilités).

JavaScript pouvant manipuler toute la age il permet de manipuler le CSS, donc de rajouter ou supprimer une animation lorsque l'on en a besoin.
JavaScript étant de la programmation il permet donc de faire des animations beaucoup plus complexe à travers une boucle et de définir le démarrage et la fin par l'interactivité.
Une méthode simple est de faire comme un gif ou un png animé : changer l'image à travers le temps pour une balise image.
On peut faire du dessin 2D(voire 3D) en utilisant CANVAS. En 'rafraîchissant' le dessin et le modifiant à une fréquence définie on peut faire les animations que l'on veut.
Même chose si on utilise le SVG mais en dessin vectoriel ou même avec des éléments HTML dont on va changer l'apparence avec CSS.

Les méthodes pour faire des animations dans une page sont nombreuses(sans parler de librairies dédiées ou de ayant des fonctionnalités d'animation comme par ex. JQuery)...tout dépends de ce que vous voulez. Commencer par essayer l'animation en CSS qui est très accessible pour voir si ça convient à ce que vous voulez.

CSS: animation simple, peu d'interactivité
CSS+JS: la programmation et les événements peuvent intervenir sur le déclenchement et les autres paramètres de l'animation.
JS: on peut dessiner comme on veut et une animation c'est plusieurs dessins d'affilé. On peut aussi paramétrer et décider ce que l'on veut pour une animation, animer ce qu'on veut. Que ce soit du dessin 2D/3D ou les balises HTML et leurs paramètres CSS ou un dessin vectoriel comme SVG il n'y a pas de limite à ce qu'on peut et comment l'animer.

je-commence-demain
Messages : 5
Enregistré le : 26 juin 2020, 13:03

Re: Javascript ou CSS ??

Message par je-commence-demain » 22 juil. 2020, 10:05

Merci beaucoup pour vos réponses très complètes :D

Répondre