Utiliser les mixins Animated sur le framework PluXml

Rédigé par Djb aucun commentaire

mixins pluxml

Utiliser la librairie Animated SASS sur votre projet

Éditer votre fichier style.scss pour ajouter cette ligne afin d'importer la librairie.

Elle est importée par défaut sur le framewok


@import "animated";

 

puis vous importez l'animation que vous souhaitez utiliser :


@include animation(nom de l'animation);

 

Liste des animations disponibles:

Attention Seekers

  1. bounce
  2. pulse
  3. rubber-band
  4. shake
  5. wobble

 

Bouncing Entrances

  1. bounce-in
  2. bounce-in-down
  3. bounce-in-left
  4. bounce-in-right
  5. bounce-in-up

 

Bouncing Exits

  1. bounce-out
  2. bounce-out-down
  3. bounce-out-left
  4. bounce-out-right
  5. bounce-out-up

 

Fading Entrances

  1. fade-in
  2. fade-in-down
  3. fade-in-down-big
  4. fade-in-left
  5. fade-in-left-big
  6. fade-in-right
  7. fade-in-right-big
  8. fade-in-up
  9. fade-in-up-big

 

Fading Exits

  1. fade-out
  2. fade-out-down
  3. fade-out-down-big
  4. fade-out-left
  5. fade-out-left-big
  6. fade-out-right
  7. fade-out-right-big
  8. fade-out-up
  9. fade-out-up-big

 

Flippers

  1. flip-in-x

 

Sliders

  1. slide-in-down
  2. slide-in-left
  3. slide-in-right
  4. slide-out-up
  5. slide-out-left
  6. slide-out-right

 

Exemple d'utilisation


.blog{
    @include animate(fade-in, .6s, 400ms)
}

 

Ajout  dans votre fichier style.scss de l'animation fade-in pour la class .blog avec les paramètres suivants:

Durée: .6 s (la valeur par défaut est à 1s)

Retard: 400ms

Pour exemple sur le framework j'ai ajouté cette animation sur le fichier _body.scss


aside {
 @include animate(bounce-in-right, 1s, 500ms)
}

 

Projet initial de référence Dan Eden pour visualiser les exemples d'animation.

 

Classé dans : Tutoriel, PluXml Mots clés : SASS, Animated

A propos de l'auteur, Djb:

Fort de notre expérience dans la création et l'intégration de projets web, l'équipe Psd-HTML vous accompagnons dans la définition de votre charte graphique et la réalisation de votre projet Web - Intégrateur chez psd-html.fr

 

Écrire un commentaire