@include woody-fx($fx_01);

Documentation – Woody FX Mixin

Features :

Reconnaissance automatique du sélecteur
Calcul automatique des transitions et délais
Calcul automatique des valeurs
Application d’effets facilitée
Calcul logique des effets
Sortie CSS optimisée (pas de duplication de propriétés CSS, la dernière prend toujours le dessus)
Utilisation d’une banque de templates
Possibilité d’inclusion de plusieurs templates pour en faire un mix via l’appel d’extends
Facilement personnalisable via des variables
Syntaxe des options flexible
Codé un seul objet SASS.

Syntaxe

Pour insérer la mixin :

.card-link {
    @include woody-fx('fx_09');
}

ou bien

.card-link {
    @include woody-fx((extend: fx_09));
}

Ajout d’options :

.card-link {
    $options: (
        (extend: 'overlay_01'),
        (target: after, fx: slide-in),
    );
    @include woody-fx($options);
}

La variable $options doit être une liste de maps, composés d’arguments.
Ici, extend permet de réutiliser les options du template ‘overlay_01’. (Voir les templates dans la woody library : assets/hover-fx/templates.scss)
La 2ème option ajoute un effet de slide entrante pour le after de notre card. (Voir les selectors et les effets dans l’api).

Liste des arguments utilisables :

target

Accepte un nom de sélecteur facile (Voir les selectors dans l’api)
Exemple: target: img
Accepte une classe css (entre guillements).
Exemple: target: '.imageObject'

fx

Accepte un nom de fx facile (Voir les fx dans l’api)
Exemple: fx: fade-in

value

Accepte une valeur en rapport au fx, à noter que ces valeurs ont des unités et des comportements différents en fonction du fx lié (Voir API). La plupart des fx ont une valeur par défaut qui sera écrasée par l’argument value.
Exemple: (fx: fade-in, value: 0.6,)
La valeur peut accepter 2 paramètres, dans ce cas, cela signifie que l’on souhaite agir sur l’aspect défaut sans hover (1ère valeur), ainsi que l’aspect on-hover.
Exemple:(fx: slide-in, value: (0px, 50px),)
Dans l’exemple ci-dessus, 0px sera la valeur par défaut, et 50px la valeur affectée au survol.
Il est à noter que certains comportements logiques réordonnent correctement vos valeurs, dans le cas où vous utilisez un fx de fade-in, si la première valeur est 1, et la seconde 0, le fx créera tout de même un fade-in d’opacité 0 vers 1, et non l’inverse!

time

Time agit sur le temps des transitions d’un FX
Accepte une ou deux valeurs en secondes, peut être sous la forme 1s, ou « 1s », ou « +1s », ou « -1s ».
Accepte aussi la valeur default, cela permet de n’appliquer une valeur que sur le hover du fx par exemple.
Dans le cas où on utilise un signe + ou -, la valeur s’additionne ou se soustrait avec les valeurs par défaut.
Exemple: (fx: fade-in, value: 0.6, time: 1.2s)
Exemple: (fx: fade-in, value: 0.6, time: "+.2s")
Exemple: (fx: fade-in, value: 0.6, time: "-.2s")
Exemple: (fx: fade-in, value: 0.6, time: (default, "-.2s"))
La valeur peut accepter 2 paramètres, dans ce cas, cela signifie que l’on souhaite agir sur l’aspect défaut sans hover (1ère valeur), ainsi que l’aspect on-hover.
Exemple:(fx: slide-in, value: (0px, 50px), time: (.5s, 1s))
Dans l’exemple ci-dessus, 1 seconde sera attribué au survol, et 0.5 ssecondes sera attribué au retour par défaut.

delay

Delay agit sur le temps de délais des transitions d’un FX
Accepte une ou deux valeurs en secondes.
Accepte aussi la valeur default, cela permet de n’appliquer une valeur que sur le hover du fx par exemple.
Contrairement au time, il n’y a pas de calcul possible via des opérateurs arithmétiques.
Exemple: (fx: fade-in, value: 0.6, delay: .2s)
Exemple: (fx: fade-in, value: 0.6, delay: ".2s")
Exemple: (fx: fade-in, value: 0.6, delay: (default, ".2s"))
La valeur peut accepter 2 paramètres, dans ce cas, cela signifie que l’on souhaite agir sur l’aspect défaut sans hover (1ère valeur), ainsi que l’aspect on-hover.
Exemple:(fx: slide-in, value: (0px, 50px), delay: (.5s, 1s))
Dans l’exemple ci-dessus, 1 seconde sera attribué au survol, et 0.5 secondes sera attribué au retour par défaut.

ease

Ease agit sur la dynamique des transitions d’un FX
Accepte une ou deux valeurs en string ou bézier.
Exemple: (fx: fade-in, value: 0.6, ease: ease-out)
Exemple: (fx: fade-in, value: 0.6, ease: (ease-out, ease-in))
Exemple: (fx: fade-in, value: 0.6, ease: (cubic-bezier(.17,.67,.95,.65)))
La valeur peut accepter 2 paramètres, dans ce cas, cela signifie que l’on souhaite agir sur l’aspect défaut sans hover (1ère valeur), ainsi que l’aspect on-hover.

css

Permet d’ajouter du css personnalisé (utile pour les templates)
Ne s’utilise qu’avec les fx « custom » ou « display »
Accepte toutes les valeurs css, mais séparées par des virgules.
Les propriétés css ajoutées seront appliquées au sélecteur situé dans « target ».
Exemple: (fx: custom, target: card, css:(background:red, opacity: 1))

hover

Permet de définir un comportement au fx
Parfois, on souhaite forcer un effet à n’agir que sur le hover, dans ce cas il suffit de spécifier ce paramètre dans l’option:
Exemple: (fx: custom, css: (margin-top: 30px), hover: true)
Exemple: (fx: custom, css: (margin-top: 30px), hover: default)
La valeur true force à ignorer l’insertion de css lorsqu’il n’y a pas de survol, cependant elle forcera l’insertion de css au hover.
La valeur default permet d’ignorer l’insertion de css au survol, et forcera l’insertion de css directement sur le selecteur.

API

Sélecteurs faciles

Cards

img-after : .imageObject:after
img-before : .imageObject:before
img : .imageObject-img
after : .card-link:after
before : .card-link:before
section : .card-section
texts : .card-texts
title : .card-title
button : .button
card : .card-link

Liste des FX

bg-color

Permet de changer la couleur de fond de l’élément.
Valeurs autorisées : couleurs hexa, couleurs rgba
Règles css utilisées : background-color

color

Permet de changer la couleur du texte de l’élément.
Valeurs autorisées : couleurs hexa, couleurs rgba
Règles css utilisées : color

border

Permet d’ajouter une bordure à l’élément
Valeurs autorisées : cm, mm, in, px, pt, pc, %
Règles css utilisées : border

space

space, space-in, space-out

Permet de changer l’espacement d’un élément.
Valeurs autorisées : cm, mm, in, px, pt, pc, %
Règles css utilisées : width, height, margin

skew

skew, skew-top, skew-right, skew-bottom, skew-left

Permet d’ajouter du skew sur l’élément. Utilise seulement le clip-path mais redimensionne de manière à récupérer la perte. Le fait de stipuler 10px en valeur va agir sur la width ou la height (en fonction du sens), et sur les margins (en fonction du sens), de cette manière : width: calc(100% + 10px * 2); margin-left: -10px; margin-right: -10px;
Valeurs autorisées : cm, mm, in, px, pt, pc
Règles css utilisées : clip-path, width, margin

zoom

zoom, zoom-in, zoom-out

Permet de créer un effet de zoom.
Valeurs autorisées : Numérique entre 0-1
Règles css utilisées : transform: scale()

fade

fade, fade-in, fade-out

Permet de créer un effet de fading sur l’élément.
Valeurs autorisées : Numérique entre 0-1
Règles css utilisées : opacity

blur

blur, blur-in, blur-out

Permet d’ajouter du flou sur l’élément.
Valeurs autorisées : cm, mm, in, px, pt, pc
Règles css utilisées : filter: blur()

grayscale

grayscale, grayscale-in, grayscale-out

Permet d’ajouter un niveau de gris sur l’élément.
Valeurs autorisées : Numérique entre 0-1 ou %
Règles css utilisées : filter: grayscale()

slide

slide, slide-in, slide-out, slide-up, slide-right, slide-down, slide-left, slide-in-up, slide-in-right, slide-in-down, slide-in-left, slide-out-up, slide-out-right, slide-out-down, slide-out-left

Un effet « in » permet un pré-réglage de manière à ce que l’élément provienne de l’extérieur vers l’intérieur.
Un effet « out » permet un pré-réglage de manière à ce que l’élément provienne de l’intérieur vers l’exterieur.

Permet de créer un effet de glissement sur l’élément.
Valeurs autorisées : cm, mm, in, px, pt, pc, %
Règles css utilisées : transform: translate()

overlay (deprecated)

Ne pas utiliser pour l’instant.

display

Permet de créer automatiquement un élément en cible « after » ou « before ».
Peut être associé à un paramètre « css ».
Exemple :

(target: after, fx: display, css: (width: 90%, height: 90%)

Valeurs autorisées : AUCUNE
Règles css utilisées : content: » », top: 0, left: 0, width: 100%, height: 100%, position: absolute,
Uniquement sur un target after : background-color: $primary-color

custom

Permet d’appliquer du css personnalisé.
Doit être associé à un paramètre « css ».
Exemple :

(target: img, fx: custom, css: (opacity: .8,)

Valeurs autorisées : AUCUNE
Règles css utilisées : valeurs dans le paramètre css

translation

Doit être associé au paramètre « specs ».

Permet d’appliquer n’importe quelle propriété css dans un effet de translation.
C’est une manière différente d’appliquer des effets comme le fx « custom », seulement cette fois-ci, une seule propriété css peut être utilisée, et aura pour effet d’agir non seulement sur le css de cette propriété, mais créera également une transition automatique pour celui-ci. C’est un peu le fx à tout faire.

Le fait de n’utiliser qu’une seule valeur dans le paramètre « value », n’appliquera la translation qu’au survol, mais créera tout de même la transition associée.

Exemple :

(target: title, fx: translation, specs: 'top', value: (50%, 100%))

Dans cet exemple, la mixin créera un effet de type « top », lui appliquera une valeur par défaut à 50%, et une valeur au hover de 100%, il créera également une transition automatiquement (toujours personnalisable via les paramètres time, delay, ease…).

Si une seule valeur est spécifiée dans le paramètre « value », alors seulement le hover sera pris en compte et n’appliquera pas de css superflux par défaut.

Exemples

fx_01

$options: (
    (extend: 'img_zoom-in_01'),
    (extend: 'overlay_fade_in'),
    (extend: 'overlay_secondary_color'),
    (extend: 'remove_shadow_hover'),
);

fx_02

$options: (
    (extend: 'img_zoom-out_01'),
    (extend: 'overlay_fade_in', with:(value:(.3, .8), time:('+.5s'))),
    (target: after, fx: bg-color, value:($black, $secondary-color), time:('+.5s')),
    (extend: 'remove_shadow_hover'),
);

fx_03

$options: (
    (extend: 'texts_to_white'),
    (extend: 'square_to_middle'),
    (target: section-after, fx: display, css:(z-index:-1,)),
    (target: section-after, fx: bg-color, value:(transparent, rgba($secondary-color, .7)), ease:(ease-out, default), time:('-0.2s', default)),
    (target: section-after, fx: fade-in, ease:(ease-out, default), time:('-0.2s', default)),
    (target: section-after, fx: border, value:((0px $secondary-color), (15px $secondary-color)), time:('+0.2s', '+0.3s')),
    (target: section, fx: custom, css:(padding:25px,)),
);

fx_04

$options: (
    (extend: 'fx_03'),
    (extend: 'img_zoom-out_01'),
    (extend: 'square_in'),
    (target: section-before, fx: border, value:((0px $secondary-color), (50px $secondary-color)), time:('+0.2s', '+0.3s')),
);

fx_05

$options: (
    (extend: 'texts_to_white'),
    (fx: custom, target: card, css: (overflow: hidden, position: relative)),
    (target: section-after, fx: display, css:(z-index:-1, opacity: .8)),
    (target: section-after, fx: slide-in-up, value:(100%, 0%)),
    (target: section-before, fx: display, css:(z-index:-1, opacity: 1)),
    (target: section-before, fx: bg-color, value: $primary-color),
    (target: section-before, fx: slide-in-up, value:(100%, calc(100% - 10px))),
    (target: img, fx: slide-up, value: 10px, delay: (.0s, .1s)),
    (target: texts, fx: slide-up, delay: (.0s, .05s)),
    (target: button, fx: slide-up, delay: (.0s, .08s)),
);

fx_06

$options: (
    (extend: 'texts_to_white'),
    (extend: 'skewed_fx_01'),
    (fx: custom, target: card, css: (overflow: hidden, position: relative)),
    (target: section-after, fx: display, css:(z-index:-1, opacity: .8)),
    (target: section-after, fx: slide-in-up, value:0),

    (target: section-before, fx: display, css:(z-index:-1, opacity: .7, background: linear-gradient(to right, transparent, $white))),
    (target: section-before, fx: slide-in-right, value:0, delay: (0s, .12s), time: (0s, default)),
    (target: section-before, fx: fade-out, delay: (0s, .12s), time: (0s, '+1.5s')),

    (target: img, fx: slide-right, value: 10px, delay: (.0s, .18s)),
    (target: img, fx: custom, hover: true, css:(transform: scale(1.08))),
);

fx_07

$options: (
    (extend: 'texts_to_white'),
    (extend: 'img_zoom-in_01'),
    (extend: 'fx_08'),
    (extend: 'skewed_fx_01'),
);

fx_08

$options: (
    (extend: 'texts_to_white'),
    (extend: 'img_zoom-in_01'),
    (fx: custom, target: card, css: (overflow: hidden, position: relative)),
    (target: section-after, fx: display, css:(z-index:-1, opacity: .6)),
    (target: section-after, fx: slide-in-up, value:0),

    (target: section-before, fx: display, css:(z-index:-1, opacity: .6,)),
    (target: section-before, fx: bg-color, value: $primary-color),
    (target: section-before, fx: slide-in-right, value:0,),
);

fx_09

$options: (
    (extend: 'texts_to_white'),
    (extend: 'img_zoom-in_01', with:(time:('+.4s'))),

    (fx: custom, target: card, css: (overflow: hidden, position: relative)),

    (target: section-before, fx: display, css:(z-index:-1, opacity: .6, top: 50%)),
    (target: section-before, fx: bg-color, value: $primary-color),
    (target: section-before, fx: slide-in-right, value:0,),
    (target: section-before, fx: zoom-in, value:(0, 2), time:('+.2s')),
    (target: section-before, fx: slide-up, value:(-50%, -50%), time:('+.2s')),
    (extend: 'rounded_full_ratio', with:(target: section-before)),
);

fx_10

$options: (
    (extend: 'fx_09'),
    (target: section-after, fx: display, css:(z-index:-1, opacity: .6, top: 100%)),
    (target: section-after, fx: zoom-in, value:(0, 2), time:('+.3s'), delay: (.05s)),
    (target: section-after, fx: slide-in-up, value:(-50%), time:('+.3s'), delay: (.05s)),
    (target: section-after, fx: translation, value: (100%, 50%), time:('+.3s'), specs: 'top', delay: (.05s)),
    (target: section-after, fx: translation, value: (80%, 0%), time:('+.3s'), specs: 'left', delay: (.05s)),
    (extend: 'rounded_full_ratio', with:(target: section-after)),
);