28172 sujets

CSS et mise en forme, CSS3

[Résolu] Afficher un H1 avec un effet qui vient du bas

Bonjour,

Je ne maîtrise pas encore les animations, transformations, transitions car d'habitude mon thème le fait pour moi... Mais les animations se font au niveau d'une colonne et là j'ai juste besoin d'agir sur un h1. J'ai donc besoin de votre aide.

Je souhaite que mon titre de page s'affiche avec un effet de slide ou fade venant du bas (ensuite il ne bouge plus). Quelles sont les propriétés css que je dois utiliser ?

Merci de votre aide et bonne journée
Marine
Administrateur
Hello,

Cela me semble beaucoup de HTML et de JS pour rien. Je vais tenter un truc...
Il a l'air top ton Beautiful Title Raphael et de correspondre à mon besoin Smiley smile
Je regarde ça demain matin en détail
Merci et bonne fin de journée !
Raphael a écrit :
Hello,

Cela me semble beaucoup de HTML et de JS pour rien. Je vais tenter un truc...


Question de point de vue.

Niveau HTML on est sur le même point avec "le nom d'une classe".
Niveau JS, fichier de 13Ko que l'ont pas besoin de toucher, juste d'ajouter dans le <head>....


Je trouve cela plus rapide que de le coder "manuellement" en css... mais cela reste une question de point de vue.

Je comprend l'argument si l'utilisation de cette effet ce contient dans un seul titre (ou 2, ou 3).
Ayant 20 animation différentes (environ, peut être 18 je crois) cela est plus rapide pour moi.

les goûts et les couleurs Smiley hippy
Modifié par JENCAL (25 Mar 2019 - 17:02)
Administrateur
JENCAL a écrit :

Niveau JS, fichier de 13Ko que l'ont pas besoin de toucher, juste d'ajouter dans le &lt;head&gt;....

Je trouve cela plus rapide que de le coder "manuellement" en css... mais cela reste une question de point de vue.

Tout à fait juste, c'est avant tout une question de point de vue. Mais pas que...

Ton fichier de 13000 octets nécessite une requête serveur + un parsing du navigateur + une interprétation du code, ce qui en terme de performance n'est évidemment pas anodin. Surtout si l'on commence à collectionner les fichiers JS (ce qui est malheureusement souvent le cas).

Là où je te rejoins totalement, c'est si ces animations sont vouées à être nombreuses et/ou avec des variantes. Ton JS est alors parfait puisqu'il englobe différents types d'animations.

En bref, "coder à la main" est toujours plus performant, mais généralement moins pratique (même s'il est très simple de placer ce CSS au sein d'un mixin SCSS réutilisable facilement même avec des paramètres et des variantes)

EDIT : ah ben je viens de voir ton EDIT et je re-confirme Smiley smile
Modifié par Raphael (25 Mar 2019 - 17:07)
Merci pour vos différentes solutions ! J'ai implémenté la solution de Raphaël.
Bonne soirée à tous !
Raphael a écrit :

Ton fichier de 13000 octets nécessite une requête serveur + un parsing du navigateur + une interprétation du code, ce qui en terme de performance n'est évidemment pas anodin.


Effectivement, j'oublie souvent que ce procédé peut impacter (plus que ce qu'on pense) Smiley confused
Sujet clos
Aller à