wp-rdnyc/assets/css/_rolling-mandala.scss

131 lines
3.2 KiB
SCSS
Raw Normal View History

2021-08-04 07:46:55 -04:00
/* rolling mandala */
// @-webkit-keyframes roll-in {
// 0% {
// -webkit-transform: rotate(90deg) translateY(-50%) translateX(-50%);
// -moz-transform: rotate(90deg) translateY(-50%) translateX(-50%);
// -ms-transform: rotate(90deg) translateY(-50%) translateX(-50%);
// -o-transform: rotate(90deg) translateY(-50%) translateX(-50%);
// transform: rotate(90deg) translateY(-50%) translateX(-50%);
// }
// 100% {
// -webkit-transform: rotate(0) translateY(-50%) translateX(0px);
// -moz-transform: rotate(0) translateY(-50%) translateX(0px);
// -ms-transform: rotate(0) translateY(-50%) translateX(0px);
// -o-transform: rotate(0) translateY(-50%) translateX(0px);
// transform: rotate(0) translateY(-50%) translateX(0px);
// }
// }
// @-moz-keyframes roll-in {
// 0% {
// -webkit-transform: rotate(90deg) translateY(-50%) translateX(-50%);
// -moz-transform: rotate(90deg) translateY(-50%) translateX(-50%);
// -ms-transform: rotate(90deg) translateY(-50%) translateX(-50%);
// -o-transform: rotate(90deg) translateY(-50%) translateX(-50%);
// transform: rotate(90deg) translateY(-50%) translateX(-50%);
// }
// 100% {
// -webkit-transform: rotate(0) translateY(-50%) translateX(0px);
// -moz-transform: rotate(0) translateY(-50%) translateX(0px);
// -ms-transform: rotate(0) translateY(-50%) translateX(0px);
// -o-transform: rotate(0) translateY(-50%) translateX(0px);
// transform: rotate(0) translateY(-50%) translateX(0px);
// }
// }
// @keyframes roll-in {
// 0% {
// transform: rotate(90deg) translateY(-50%) translateX(-50%);
// }
// 100% {
// transform: rotate(0) translateY(-50%) translateX(0px);
// }
// }
// .roll-mandala {
// position: absolute;
// right: $mandala_distance_right;
// top: 50%;
// width: $mandala_width;
// pointer-events: none;
// opacity: .5;
// z-index: -999;
// animation: roll-in 2s cubic-bezier(0.51, 0.04, 0.68, 1.08);
// transform: translateY(-50%);
// }
@use "sass:math";
$mandala_height_base: 76vh;
$mandala_right_shift: math.div($mandala_height_base, -2);
$mandala_final_opacity_base: 0.33;
$mandala_final_opacity_md: 0.66;
@keyframes roll-in-down-md {
0% {
transform: rotate(80deg) translateY(-50%) translateX(-50%);
opacity: 1.0;
}
100% {
transform: rotate(0) translateY(-50%) translateX(0px);
opacity: $mandala_final_opacity_base;
}
}
@keyframes roll-in-up-md {
0% {
transform: rotate(80deg) translateY(-50%) translateX(-50%);
opacity: 1.0;
}
100% {
transform: rotate(0) translateY(-50%) translateX(0px);
opacity: $mandala_final_opacity_md;
}
}
.roll-mandala {
height: $mandala_height_base;
max-width: inherit !important;
position: absolute;
right: $mandala_right_shift;
top: 50%;
pointer-events: none;
z-index: -999;
transform: translateY(-50%);
@include media-breakpoint-down(md) {
opacity: $mandala_final_opacity_base;
animation: roll-in-down-md 1.5s cubic-bezier(0.51, 0.04, 0.68, 1.08);
}
@include media-breakpoint-up(md) {
opacity: $mandala_final_opacity_md;
animation: roll-in-up-md 1.5s cubic-bezier(0.51, 0.04, 0.68, 1.08);
}
}