Директивы

Mouse move parallax

Добавляет паралакс на движение мыши

import { mouse_parallax as mouseParallax } from '@brickdev/brick-code'
Vue.directive('paralax', mouseParallax)

В параметрах объекта передаваемых директиве:

• modifier: количество движения в зависимости удаленности от центра картинки отрицательное/положительное число. По умолчанию: 1
• easeModifier: количество плавности - положительное число: По умолчанию: 0.1.

Пример использования

<div v-paralax="{ modifier: -0.8, easeModifier: 0.025 }"></div>

Добавление классов на скролл страницы

Добавляет классы к ноде: toTop - когда нода находится за верхней рамкой, toBottom - когда нода находится за нижней рамкой. inThreshold при монтировании ноды, если указать параметр inThresholdClassWhenInViewport = true

import { c_toggle as cToggle } from '@brickdev/brick-code'
Vue.directive('c-toggle', cToggle)

В параметрах объекта передаваемых директиве:

• thresholdTop - число в отрезке [-1, 1] размеры зон верхней границы экрана. По умолчанию: 0.15
• thresholdBottom - число в отрезке [-1, 1] размеры зон нижней границы экрана. По умолчанию: 0.15
• inThresholdClassWhenInViewport - указывать ли класс inThreshold когда при загрузке страницы нода оказалась в области threshold'ов. По умолчанию: false
• once - при загрузке страницы указывается класс в соответствии с состоянием ноды inThreshold - когда в рамках, toBottom - за рамкой внизу, toTop - за рамками вверху. По умолчанию: false

Пример использования

<div v-c-toggle="{ once: true, inThresholdClassWhenInViewport: true }"></div>

Появление ноды при её монтировании

Изменяет изначальное положение ноды при помощи transform стилей, по истечению таймаута заменяет/очищает свойство transform, происходит анимирование (изменине положения и прозрачности) в изначально заданное положение/состояния элемента

import { appear } from '@brickdev/brick-code'
Vue.directive('appear', appear)

Аргументы и параметры директивы:

• keyframes - добавление класса с keyframes анимацией к ноде
• top, left, bottom, right, zoom - направление появления ноды

В параметрах объекта передаваемых директиве:

Для аргумента keyframes:

• delay - setTimeout задержка при добавлении класса с keyframe's анимацией. По умолчанию: 0
• animationClass - название класса с keyframe's анимацией.

Для аргументов top, left, bottom, right, zoom:

• duration - время исполнения анимации. По умолчанию: 500
• delay - setTimeout задержка перед исполнением анимации. По умолчанию: 100
• initial - передается, если в инлайн стилях планируется или есть transform свойство, чтобы его не перезаписать или не удалить. По умолчанию: initial.
• initialTransition - передается, если в инлайн стилях планируется или есть transition свойство, чтобы его не перезаписать или не удалить. По умолчанию: initial.
• targetValue - целое число. Количество пикселей, для смещения по направлениям top, left, bottom, right, zoom. По умолчанию: 50.
• timingFunction - временная функция для свойства transition. Задается строкой. По умолчанию: "cubic-bezier(.1,0,0,1)"

Пример использования

<div v-appear:top="{delay: 500, duration: 700, timingFunction: 'cubic-bezier(0.34, 1.56, 0.64, 1)'}"></div>