28172 sujets

CSS et mise en forme, CSS3

Effets / Animations avec du CSS

J'aime bien le CMS Joomla! et parfois, je façonne moi-même mes propres templates (bien qu'ils ne soient pas trop extra-ordinaires).

J'ai cependant vu sur certains sites web des effets qui m'ont marqué et je veux bien essayer. Je vais citer notamment ces 2 ci: site 1 et site 2. Il s'agit de la façon dont les éléments apparaissent sur les différentes sections au fur et à mesure qu'on descend vers le pied de page. Ces effets ne sont visibles qu'une fois, après que le site ou une page soit chargé.

J'imagine que c'est fait avec du CSS et je n'ai presque pas d'idées.

Merci de bien vouloir me donner quelques directives.
bonjour

Joomla ou un autre ... la technique est la même . wordpress doit avoir une communauté de designer plus grande ce qui explique que souvent les design wordpress sont plus beau que joomla .

Il faut regarder le source :
1- pour les animations tous est défini dans le fichier h/vina_junies/css/animate.css ( attention routing iframe , le visualiser dans le debug chrome )
2- pour le code qui utilise ces animations , il faut chercher du coté de hover . chrome a un analyseur d'animation !!!

@keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}

60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}

80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}

100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}

.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}

upload/48731-acanimatio.jpg

Le footer du bas est animé lors du scroll ( une fois) mais je vous laisse poster ici le reste de la solution ! C'est à dire la ligne ou se trouve le code qui déclenche cette animation et la façon dont vous avez ce numéro de ligne ( reverse ing..)

upload/48731-acfooteran.jpg


En résumer on peut avoir de très beau effets sans trop de code . Il faut bien les doser et les choisir !!
Modifié par 75lionel (19 Jul 2016 - 22:32)
Sujet clos
Aller à