IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

JQuery et CSS3


Sujet :

jQuery

  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    240
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 240
    Par défaut 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 css : Sélectionner tout - Visualiser dans une fenêtre à part
    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 !

  2. #2
    Membre expérimenté
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    294
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2008
    Messages : 294
    Par défaut
    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.

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    240
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 240
    Par défaut
    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: ) ?

    D'avance merci
    ++

  4. #4
    Membre expérimenté
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    294
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2008
    Messages : 294
    Par défaut
    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

  5. #5
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    240
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 240
    Par défaut
    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 css : Sélectionner tout - Visualiser dans une fenêtre à part
    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;
    }

    ++

  6. #6
    Membre expérimenté
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    294
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2008
    Messages : 294
    Par défaut
    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) ?

  7. #7
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    240
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 240
    Par défaut
    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) !


    ++

  8. #8
    Membre expérimenté
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    294
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2008
    Messages : 294
    Par défaut
    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

  9. #9
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    240
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 240
    Par défaut
    C'est pas évident à expliquer avec des mots !

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 !



  10. #10
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    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.

  11. #11
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    240
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 240
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 !
    ++

  12. #12
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    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...

  13. #13
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    240
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 240
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 !

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

    ++

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Article] Une image map avec des infobulles CSS3 et jQuery
    Par Bovino dans le forum Publications (X)HTML et CSS
    Réponses: 5
    Dernier message: 06/11/2012, 07h50
  2. [CSS 3] Une image map avec des infobulles CSS3 et jQuery
    Par Bovino dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 06/11/2012, 07h50
  3. [JavaScript] Effet de zoom : utilisation de "rem" (CSS3) et de jQuery. IE9 et mieux.
    Par danielhagnoul dans le forum Contribuez
    Réponses: 0
    Dernier message: 22/09/2011, 21h49

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo