/** * Add Custom Dynamic Variables. * * @link https://total.wpexplorer.com/docs/snippets/add-custom-dynamic-variables/ * @since 5.6.1 */ add_filter(…
SLIDER – KEN BURNS Effect
/*SLIDER KEN BURNS*/
.sp-mask .wpex-slider-media img {
animation: move 30s infinite;
}
.wpex-slider-media {
overflow: hidden;
}
.wpex-slider__overlay {
z-index: 1000;
}
@keyframes kenburns {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
95% {
transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);
animation-timing-function: ease-in;
opacity: 1;
}
100% {
transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px);
opacity: 0;
}
}
.sp-mask {
/* width: 100%;
height: 50vw;
margin: 0 auto;*/
/* overflow: hidden;*/
/* position: relative;*/
}
.sp-mask .wpex-slider-media img {
/* width: 100%;
animation: move 40s ease;
-ms-animation: move 40s ease;
-webkit-animation: move 40s ease;
-0-animation: move 40s ease;
-moz-animation: move 40s ease;
position: absolute;*/
}
@-webkit-keyframes move {
0% {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
transform: scale3d(1.0);
-ms-transform: scale(1.0);
/* IE 9 */
-webkit-transform: scale(1.0);
/* Safari and Chrome */
-o-transform: scale(1.0);
/* Opera */
-moz-transform: scale(1.0);
/* Firefox */
}
70% {
transform: scale3d(1.2);
-ms-transform: scale(1.2);
/* IE 9 */
-webkit-transform: scale(1.2);
/* Safari and Chrome */
-o-transform: scale(1.2);
/* Opera */
-moz-transform: scale(1.2);
/* Firefox */
}
100% {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
transform: scale3d(1.0);
-ms-transform: scale(1.0);
/* IE 9 */
-webkit-transform: scale(1.0);
/* Safari and Chrome */
-o-transform: scale(1.0);
/* Opera */
-moz-transform: scale(1.0);
/* Firefox */
}
}
.wpex-slider-caption {
z-index: 1001;
font-family: "Univers Regular",sans-serif;
font-weight: 600;
text-transform: uppercase;
white-space: unset !important;
font-size: 50px;
line-height: 1.2em;
color: #f7f7f7;
}
