JQuery et CSS3

Version imprimable

JQuery et CSS3

Bonjour à tous,

Je souhaiterais exécuter la même chose en JQuery ou qu'il m’exécute la Class ci-dessous !

Est-ce que c'est possible ?
Si oui quels attributs ou méthode permettent de faire la même chose ? :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.hvr-icon-hang {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    padding-right: 2.2em;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
 
}

D'avance merci !

22/09/2015, 15h19
Sebastien14

Bonjour,

Je ne comprends pas trop la question, mais si tu veux appliquer les attributs de cette classe à un élément, il te suffit de modifier la classe de cet élément avec Jquery. Tu peux utiliser la fonction toggleClass par exemple.
22/09/2015, 15h24
Cvbdev

Bonjour,

En fait je cherche à faire :

- Le même effet en JQuery (que la class CSS du premier message).
- Si ça ce n'est pas possible, est-ce que en JQuery ont peut faire appel à une class CSS (EX:

Code:

exec ma class CSS

) ? :)

D'avance merci
++
22/09/2015, 15h32
Sebastien14

Une classe Css contient des propriétés qui s'appliquent à un élément de ta page, tu ne peux pas exécuter du css.

Tu veux qu'un élément prenne ces propriétés, il suffit de changer sa classe en mettant la tienne : .hvr-icon-hang

Je penais qu'l existait des méthodes Jquery capable d'exécuter une class CSS ! :)

En fait, j'ai une flèche verticale qui bouge (effet CSS) de haut en bas uniquement si on passe la souris dessus.

Seulement j'aimerais que cela soit tout le temps (sans que la souris passe dessus) et javais pensé par passé en JQuery ! :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
.hvr-icon-hang {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
padding-right: 6.7em;
    padding-top: 0.5em;
 
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
 
}
 
 
 
.hvr-icon-hang:before {
    content: "\f107";
    position: absolute;
    right: 1em;
    padding: 0 1px;
    font-family: FontAwesome;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    font-size: 50px;
}
 
 
.hvr-icon-hang:hover:before, .hvr-icon-hang:focus:before, .hvr-icon-hang:active:before {
  -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang;
  animation-name: hvr-icon-hang-sink, hvr-icon-hang;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

++ :)

22/09/2015, 15h51
Sebastien14

Par curiosité tu utilises quoi pour faire tout sa ?

Si il se passe quelque chose lorsque tu passes la souris sur ton élément, c'est soit qu'il y a une classe css déclarée pour cette élément lorsque la souris passe dessus, soit tu as déjà du code jquery qui change la classe au passage de la souris. Quel est le nom de la classe attribué à cet élément par défaut (avant que tu passes la souris dessus) ?
22/09/2015, 15h59
Cvbdev

Non, c'est la class "Hover.css" http://ianlunn.github.io/Hover/ (cf. "icons") qui me permet de faire ça !
Uniquement en CSS (c'est le code que j'ai mis dans ma dernière réponse) ! :)

En fiait j'aimerais reproduire l'effet qu'ils ont sur ce site http://www.comment.fr/
la flèche en bas de l'écran (juste au dessus de la ligne de flottaison) ! :)

++
22/09/2015, 16h12
Sebastien14

je comprend mieux, c'est une animation en css à priori que tu dois pouvoir reproduire en utilisant jquery. regarde du côté de la fonction .css() de jquery ou du côté de la fonction animate

C'est pas évident à expliquer avec des mots ! :mouarf:

J"ai fais ça ça fonctionne mais c'est pas super, je pense que ça peut être largement amélioré ! :)

Si t'as une idée ? :)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 setInterval(function() { var p = $(".hvr-icon-hang"); var position = p.position(); var positiontop = position.top; $(".hvr-icon-hang").animate({ 'top': '-5px' }, 'fast'); if (positiontop <= 3) { $(".hvr-icon-hang").animate({ 'top': '5px' }, 'fast'); } }, 600);
J'ai essayé aussi avec la fonction "animate", il ne connaissait pas les attributs CSS3 !
En tout cas il prend rien en compte ! :)

:)

22/09/2015, 17h06
SylvainPV

Beaucoup de confusions sur les termes ici...

On n' "exécute" pas de CSS. Les classes HTML n'ont rien à voir avec les classes au sens programmation objet. Une classe HTML, c'est juste une étiquette qu'on colle à un élément pour le permettre de l'identifier plus tard. Si on donne une classe toto à un élément, toutes les règles CSS ayant un sélecteur ciblant cette classe s'appliqueront sur cet élément automatiquement.

On peut aussi venir modifier directement les propriétés de style, sans passer par des classes. C'est ce que tu fais en jQuery avec les méthodes .css() et .animate(). Il ne s'agit plus de l'attribut "class" mais de l'attribut "style" de l'élément qui est alors modifié. On dit aussi qu'on modifie les styles "en inline" ou "en dur". La priorité de ces règles CSS est alors supérieure à celle définie par les classes ou autres sélecteurs.

animate n'a pas besoin de "connaître" les attributs CSS3, il se contente de les appliquer à l'élément et le navigateur se débrouille avec, selon s'il les supporte ou non. Donc si ça ne marche pas, c'est que tu as mal dû les passer. Attention, en JavaScript les propriétés de style sont en camelCase et non en hyphens donc "-webkit-transform" devient "webkitTransform" par exemple.

Bonjour,

Merci de ta réponse !
Les termes employés étaient juste pour illustrer quelques chose ! :)
Comme je le disais je pensais qu'en Jquery il était possible de faire "appel" à une class CSS sans avoir à passé par .css ou .animate ! :)

J'ai enfin trouvé la solution, si cela peut servir ! :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
setInterval(function() {
    $('.hvr-icon-hang').css({
        "-webkit-animation-name": "hvr-icon-hang-sink, hvr-icon-hang",
        "animation-name": "hvr-icon-hang-sink, hvr-icon-hang",
        "-webkit-animation-duration": ".3s, 1.5s",
        "animation-duration": ".3s, 1.5s",
        "-webkit-animation-delay": "0s, .3s",
        "animation-delay": "0s, .3s",
        "-webkit-animation-timing-function": "ease-out, ease-in-out",
        "animation-timing-function": "ease-out, ease-in-out",
        "-webkit-animation-iteration-count": "1, infinite",
        "animation-iteration-count": "1, infinite",
        "-webkit-animation-fill-mode": "forwards",
        "animation-fill-mode": "forwards",
        "-webkit-animation-direction": "normal, alternate",
        "animation-direction": " normal, alternate"
    });
}, 600);

Merci encore pour votre aide ! :)
++

22/09/2015, 17h50
SylvainPV

Tu as conscience que ta solution n'utilise pas du tout les fonctions d'animation de jQuery, qu'elle se contente d'appliquer en inline les styles auparavant attribués avec une classe ?

Retirer le ":hover" dans le sélecteur a exactement le même effet...

J'ai bien conscience que je n'utilise pas la fonction animation de Jquery ! :)

On change un peu de sujet mais, ce qui permet à "mon animation" d'être "joué" tous le temps, c'est la suppression du Hover (je n'avais pas pensé à ça), t'as raison mais aussi et surtout les lignes ci-dessous.
Sans ça ça ne tourne pas ! ;)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 @-webkit-keyframes hvr-icon-hang { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); } 50% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes hvr-icon-hang { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); } 50% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } }
Ces lignes là (@keyframes hvr-icon-hang) amène un autre soucis, notamment avec l'effet parallaxe ! Il y a des soucis de défilement.
Pour l'instant je ne sais pas pourquoi. Dés que je peux j'essayerais de comprendre ! Sans doute un conflit CSS ou quelques chose qu'il n'aime pas ! :mouarf:

Ci-dessous le tuto. que j'utilise, les CSS, les JS,...
http://tympanus.net/Blueprints/ScrollingLayout/
http://tympanus.net/codrops/2013/05/...olling-layout/

++
:)