95 lines
1.8 KiB
SCSS
95 lines
1.8 KiB
SCSS
// CONSTANTS
|
|
|
|
$ZOOM-IN: 0;
|
|
$ZOOM-OUT: 1;
|
|
|
|
$FOCUS-IN: 0;
|
|
$FOCUS-OUT: 1;
|
|
|
|
$LINEAR: 0;
|
|
$EASE: 1;
|
|
$EASEINOUT: 2;
|
|
$BACKWARD: 3;
|
|
|
|
// MIXINS
|
|
|
|
/// Gives the Element a focusing Effect
|
|
/// @param {int} $direction
|
|
/// @param {int} $seconds
|
|
/// @param {int} $pixels
|
|
/// @param {int} $performance
|
|
@mixin camera-focus(
|
|
$direction:1,
|
|
$pixels:10,
|
|
$performance:0,
|
|
$seconds:0.5,
|
|
$delay:0
|
|
) {
|
|
/* Camera Focus Effect */
|
|
transition-property: all;
|
|
transition-duration: $seconds+s;
|
|
@include performance($performance);
|
|
&:hover {
|
|
filter: blur($pixels+px);
|
|
|
|
}
|
|
}
|
|
|
|
/// Gives the Element a shake Effect
|
|
/// @param {int} $direction
|
|
/// Degrees
|
|
/// @param {int} $seconds
|
|
/// @param {int} $pixels
|
|
/// @param {int} $performance
|
|
@mixin camera-shake(
|
|
$rotate:10,
|
|
$scale:1.1,
|
|
$x:10,
|
|
$y:10,
|
|
$performance:0,
|
|
$seconds:0.5,
|
|
$delay:0
|
|
) {
|
|
transition-property: all;
|
|
transition-duration: $seconds+s;
|
|
@include performance($performance);
|
|
&:hover {
|
|
@include transform($rotate, $scale, $x, $y);
|
|
}
|
|
}
|
|
|
|
/// Gives the Element a zoom Effect
|
|
/// @param {int} $direction
|
|
/// @param {int} $seconds
|
|
/// @param {int} $pixels
|
|
/// @param {int} $performance
|
|
@mixin camera-zoom(
|
|
$direction:1,
|
|
$scale:1.2,
|
|
$performance:0,
|
|
$seconds:0.5,
|
|
$delay:0
|
|
) {
|
|
transition-property: all;
|
|
transition-duration: $seconds+s;
|
|
@include performance($performance);
|
|
&:hover {
|
|
@include transform(0, $scale, 0, 0)
|
|
}
|
|
}
|
|
|
|
@mixin performance($perform) {
|
|
@if ($perform == 0) {
|
|
transition-timing-function: linear;
|
|
} @else if ($perform == 1) {
|
|
transition-timing-function: ease;
|
|
} @else if ($perform == 2) {
|
|
transition-timing-function: ease-in-out;
|
|
} @else if ($perform == 3) {
|
|
transition-timing-function: cubic-bezier(0.68, - 0.55, 0.27, 1.55);
|
|
}
|
|
}
|
|
|
|
@mixin transform($rotation:0,$scale:1,$x:0,$y:0) {
|
|
transform: rotate($rotation+deg) scale($scale) translate($x+px, $y+px);
|
|
} |