Slider Animation Effect
How do I make an slider animation effect?
Leveraged CSS border-image & clip-path to create a slider animation effect. Inspiration from: https://dribbble.com/shots/2375246-Fashion-Butique-slider-animation. What is a slider animation effect? How do you make a slider animation effect? This script and codes were developed by Emily Hayman on 14 June 2022, Tuesday.
Slider Animation Effect Previews
Slider Animation Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slider Animation Effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Playfair+Display:700,900'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app" class="wrapper" v-cloak v-bind:class="{'is-previous': isPreviousSlide, 'first-load': isFirstLoad}"> <div class="slide-wrapper" v-for="(slide, index) in slides" v-bind:class="{ active: index === currentSlide }" v-bind:style="{ 'z-index': (slides.length - index), 'background-image': 'url(' + slide.bgImg + ')' }"> <div class="slide-inner"> <div class="slide-bg-text"> <p>{{ slide.headlineFirstLine }}</p> <p>{{ slide.headlineSecondLine }}</p> </div> <div class="slide-rect-filter"> <div class="slide-rect" v-bind:style="{'border-image-source': 'url(' + slide.rectImg + ')'}"></div> </div> <div class="slide-content"> <h1 class="slide-content-text"><p>{{ slide.headlineFirstLine }}</p><p>{{ slide.headlineSecondLine }}</p></h1><a class="slide-content-cta">Call To Action</a></div> <h2 class="slide-side-text"><span>{{ slide.sublineFirstLine }} / </span><span>{{ slide.sublineSecondLine }}</span></h2></div> </div> <div class="controls-container"> <button class="controls-button" v-for="(slide, index) in slides" v-bind:class="{ active: index === currentSlide }" v-on:click="updateSlide(index)">{{ slide.headlineFirstLine }} {{ slide.headlineSecondLine }}</button> </div> <div class="pagination-container"> <span class="pagination-item" v-for="(slide, index) in slides" v-bind:class="{ active: index === currentSlide }" v-on:click="updateSlide(index)"></span> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Slider Animation Effect - Script Codes CSS Codes
html { box-sizing: border-box;
}
*,
*:before,
*:after { box-sizing: inherit;
}
.slide-content-cta, .slide-side-text, .controls-button { font-family: 'Montserrat'; text-transform: uppercase; color: #fff; letter-spacing: .12rem; font-size: .7rem; line-height: 1;
}
[v-cloak] { opacity: 0;
}
body { cursor: default;
}
body ::-moz-selection { background-color: rgba(46, 49, 52, 0.7); color: #f5f5f1;
}
body ::selection { background-color: rgba(46, 49, 52, 0.7); color: #f5f5f1;
}
body ::-moz-selection { background-color: rgba(46, 49, 52, 0.7); color: #f5f5f1;
}
.wrapper { height: calc(100vh - 50px); min-height: 36rem; position: relative;
}
@media (max-width: 630px) { .wrapper { height: 100vh; min-height: 0; }
}
.slide-wrapper { background-size: cover; height: 100%; background-position: center center; position: absolute; width: 100%; background-blend-mode: darken;
}
.slide-wrapper:nth-child(1) { background-color: rgba(115, 129, 153, 0.4);
}
.slide-wrapper:nth-child(1):before { background-color: rgba(115, 129, 153, 0.25);
}
.slide-wrapper:nth-child(1) .slide-content-text { text-shadow: 2px 5px 45px rgba(85, 96, 113, 0.25);
}
.slide-wrapper:nth-child(2) { background-color: rgba(144, 171, 184, 0.7);
}
.slide-wrapper:nth-child(2):before { background-color: rgba(144, 171, 184, 0.3);
}
.slide-wrapper:nth-child(2) .slide-content-text { text-shadow: 2px 5px 45px rgba(121, 142, 152, 0.2);
}
.slide-wrapper:nth-child(3) { background-color: rgba(86, 125, 156, 0.5);
}
.slide-wrapper:nth-child(3):before { background-color: rgba(86, 125, 156, 0.2);
}
.slide-wrapper:nth-child(3) .slide-content-text { text-shadow: 2px 5px 55px rgba(57, 83, 103, 0.4);
}
.slide-wrapper:before { content: ""; position: absolute; width: 100%; height: 100%; z-index: 1;
}
.slide-inner { position: relative; z-index: 2; height: 100%; overflow: hidden;
}
.slide-bg-text { font-family: 'Playfair Display'; color: #000; font-size: 42vh; line-height: .8; opacity: .03; font-weight: 900; margin-top: -4rem; position: absolute; top: 50%; left: 5vw; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.slide-bg-text > p:last-child { padding-left: 4rem;
}
.slide-content { color: #fff; margin-top: 5rem; position: absolute; top: 50%; left: calc(13vw + (.7) * 48vh); -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
@media (max-width: 1000px) { .slide-content { left: calc(13vw + 1rem); }
}
@media (max-height: 730px) { .slide-content { top: 30%; -webkit-transform: translateY(-30%); transform: translateY(-30%); left: calc(9vw + (.7) * 16vw); }
}
.slide-content-text { font-family: 'Playfair Display'; font-size: 9rem; letter-spacing: .2rem; line-height: .87; font-weight: 700; will-change: auto;
}
@media (max-height: 790px) { .slide-content-text { font-size: 7rem; }
}
@media (max-width: 1150px) { .slide-content-text { font-size: 7rem; }
}
@media (max-width: 840px) { .slide-content-text { font-size: 5.5rem; }
}
@media (max-width: 630px) { .slide-content-text { margin-bottom: 5.5rem; }
}
@media (max-width: 500px) { .slide-content-text { font-size: 3.5rem; }
}
.slide-content-text > p:last-child { padding-left: 3rem;
}
.slide-content-cta { cursor: pointer; -ms-flex-item-align: start; align-self: flex-start; margin-top: 4.5rem; margin-left: calc((.3) * 48vh + 4.5rem); padding: .9rem 2.2rem; border-left: 1px solid #fff; border-right: 1px solid #fff; -webkit-transition: .18s ease-in-out; transition: .18s ease-in-out; font-weight: 700;
}
@media (max-width: 1000px) { .slide-content-cta { background-color: rgba(255, 255, 255, 0.3); padding-top: 1.2rem; padding-bottom: 1.2rem; }
}
@media (max-width: 630px) { .slide-content-cta { display: none; }
}
.slide-content-cta:hover { color: #000; background-color: #fff;
}
.slide-rect { height: 62vh; width: 48vh; border-image-slice: 10%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 13vw; border-width: 5vh; border-style: solid; box-shadow: 2px 2px 90px 30px rgba(41, 50, 61, 0.22); will-change: auto;
}
@media (max-height: 790px) { .slide-rect { left: 9vw; height: 20vw; width: 16vw; border-width: 5vh; }
}
@media (max-height: 730px) { .slide-rect { top: 30%; -webkit-transform: translateY(-30%); transform: translateY(-30%); }
}
.slide-rect-filter { -webkit-filter: brightness(110%) contrast(110%) saturate(110%); filter: brightness(110%) contrast(110%) saturate(110%);
}
.slide-side-text { position: absolute; left: calc(13vw - 3rem); -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; top: calc((50% - (62vh / 2)) + (5vh / 2));
}
@media (max-height: 790px) { .slide-side-text { left: calc(9vw - 3rem); top: calc((50% - (20vw / 2)) + (5vh / 2)); }
}
@media (max-height: 730px) { .slide-side-text { top: calc((40% - (20vw / 2)) + (5vh / 2)); }
}
.slide-side-text > span:first-child { font-weight: 700;
}
.slide-side-text:after { content: ""; width: 1px; background-color: #fff; height: 40px; display: block; position: absolute; top: calc(100% + 25px); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.controls-container { position: absolute; z-index: 200; display: -webkit-box; display: -ms-flexbox; display: flex; bottom: 0; right: 0; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
}
@media (max-width: 630px) { .controls-container { display: none; }
}
.controls-button { cursor: pointer; background-color: rgba(208, 206, 204, 0.32); border: 0; padding: 1.6rem 2.2rem; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-width: 15rem; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out; outline: 0;
}
@media (max-width: 730px) { .controls-button { padding: 1.2rem 1.4rem; min-width: 13rem; }
}
.controls-button:not(.active):hover { color: #000; background-color: #fff;
}
.controls-button.active { cursor: default; font-weight: 700; background-color: #3b3e45; padding-top: 1.9rem; padding-bottom: 1.9rem; margin-bottom: -0.3rem; position: relative;
}
@media (max-width: 730px) { .controls-button.active { padding-top: 1.4rem; padding-bottom: 1.4rem; margin-bottom: -0.15rem; }
}
.controls-button.active:after { content: ""; background-color: #e3e3e3; height: 5px; width: calc(100% - 8px); position: absolute; top: 100%; left: 4px;
}
.controls-button:not(.active) + .controls-button { border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.pagination-container { position: absolute; z-index: 200; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; right: 2rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
@media (max-width: 920px) { .pagination-container { display: none; }
}
.pagination-item { width: 30px; height: 1px; background-color: rgba(255, 255, 255, 0.6); -webkit-transition: .18s ease-in-out; transition: .18s ease-in-out;
}
.pagination-item + .pagination-item { margin-top: 1rem;
}
.pagination-item.active { background-color: #fff; position: relative; -webkit-transform: translateX(-0.6rem); transform: translateX(-0.6rem); width: 35px;
}
.pagination-item.active:after { content: ""; height: 4px; width: 2px; border-radius: 35%; background-color: #fff; display: inline-block; position: absolute; right: 0; top: 50%; -webkit-transform: translateX(0.6rem) translateY(-50%); transform: translateX(0.6rem) translateY(-50%);
}
.pagination-item:not(.active) { cursor: pointer;
}
.pagination-item:not(.active):hover { background-color: #fff; width: 35px;
}
@-webkit-keyframes slideLeft { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
@keyframes slideLeft { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
@-webkit-keyframes slideRight { from { -webkit-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes slideRight { from { -webkit-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(0); transform: translateX(0); }
}
@-webkit-keyframes cutTextUp { from { -webkit-clip-path: inset(0 0 -10% 0); clip-path: inset(0 0 -10% 0); } to { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); }
}
@keyframes cutTextUp { from { -webkit-clip-path: inset(0 0 -10% 0); clip-path: inset(0 0 -10% 0); } to { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); }
}
@-webkit-keyframes cutTextDown { from { -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); } to { -webkit-clip-path: inset(-10% 0 -20% 0); clip-path: inset(-10% 0 -20% 0); opacity: 1; }
}
@keyframes cutTextDown { from { -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); } to { -webkit-clip-path: inset(-10% 0 -20% 0); clip-path: inset(-10% 0 -20% 0); opacity: 1; }
}
@-webkit-keyframes cutTextDownFromTop { from { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); } to { -webkit-clip-path: inset(0 0 -30% 0); clip-path: inset(0 0 -30% 0); opacity: 1; }
}
@keyframes cutTextDownFromTop { from { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); } to { -webkit-clip-path: inset(0 0 -30% 0); clip-path: inset(0 0 -30% 0); opacity: 1; }
}
@-webkit-keyframes rectMovement { 0% { -webkit-transform: translateX(0) rotate(0) translateY(-50%); transform: translateX(0) rotate(0) translateY(-50%); } 60% { opacity: 1; } 100% { -webkit-transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%); transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%); opacity: 0; }
}
@keyframes rectMovement { 0% { -webkit-transform: translateX(0) rotate(0) translateY(-50%); transform: translateX(0) rotate(0) translateY(-50%); } 60% { opacity: 1; } 100% { -webkit-transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%); transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%); opacity: 0; }
}
@media (max-height: 730px) { @-webkit-keyframes rectMovement { 0% { -webkit-transform: translateX(0) rotate(0) translateY(-30%); transform: translateX(0) rotate(0) translateY(-30%); } 60% { opacity: 1; } 100% { -webkit-transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%); transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%); opacity: 0; } } @keyframes rectMovement { 0% { -webkit-transform: translateX(0) rotate(0) translateY(-30%); transform: translateX(0) rotate(0) translateY(-30%); } 60% { opacity: 1; } 100% { -webkit-transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%); transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%); opacity: 0; } }
}
@-webkit-keyframes rectMovementFromRight { 0% { -webkit-transform: translateX(calc(48vh)) rotate(12deg) translateY(-50%); transform: translateX(calc(48vh)) rotate(12deg) translateY(-50%); opacity: 0; } 60% { opacity: 1; } 100% { -webkit-transform: translateX(0) rotate(0) translateY(-50%); transform: translateX(0) rotate(0) translateY(-50%); opacity: 1; @media (max-height: 730px) { -webkit-transform: translateX(0) rotate(0) translateY(-30%); transform: translateX(0) rotate(0) translateY(-30%); } }
}
@keyframes rectMovementFromRight { 0% { -webkit-transform: translateX(calc(48vh)) rotate(12deg) translateY(-50%); transform: translateX(calc(48vh)) rotate(12deg) translateY(-50%); opacity: 0; } 60% { opacity: 1; } 100% { -webkit-transform: translateX(0) rotate(0) translateY(-50%); transform: translateX(0) rotate(0) translateY(-50%); opacity: 1; @media (max-height: 730px) { -webkit-transform: translateX(0) rotate(0) translateY(-30%); transform: translateX(0) rotate(0) translateY(-30%); } }
}
@media (max-height: 730px) { @-webkit-keyframes rectMovementFromRight { 0% { -webkit-transform: translateX(calc(48vh)) rotate(12deg) translateY(-30%); transform: translateX(calc(48vh)) rotate(12deg) translateY(-30%); opacity: 0; } 60% { opacity: 1; } 100% { -webkit-transform: translateX(0) rotate(0) translateY(-30%); transform: translateX(0) rotate(0) translateY(-30%); opacity: 1; } } @keyframes rectMovementFromRight { 0% { -webkit-transform: translateX(calc(48vh)) rotate(12deg) translateY(-30%); transform: translateX(calc(48vh)) rotate(12deg) translateY(-30%); opacity: 0; } 60% { opacity: 1; } 100% { -webkit-transform: translateX(0) rotate(0) translateY(-30%); transform: translateX(0) rotate(0) translateY(-30%); opacity: 1; } }
}
@-webkit-keyframes rectMovementRight { 0% { -webkit-transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%); transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%); } 40% { opacity: 1; } 100% { -webkit-transform: translateX(0) rotate(0) translateY(-50%); transform: translateX(0) rotate(0) translateY(-50%); opacity: 1; @media (max-height: 730px) { -webkit-transform: translateX(0) rotate(0) translateY(-30%); transform: translateX(0) rotate(0) translateY(-30%); } }
}
@keyframes rectMovementRight { 0% { -webkit-transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%); transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%); } 40% { opacity: 1; } 100% { -webkit-transform: translateX(0) rotate(0) translateY(-50%); transform: translateX(0) rotate(0) translateY(-50%); opacity: 1; @media (max-height: 730px) { -webkit-transform: translateX(0) rotate(0) translateY(-30%); transform: translateX(0) rotate(0) translateY(-30%); } }
}
@media (max-height: 730px) { @-webkit-keyframes rectMovementRight { 0% { -webkit-transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%); transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%); } 40% { opacity: 1; } 100% { -webkit-transform: translateX(0) rotate(0) translateY(-30%); transform: translateX(0) rotate(0) translateY(-30%); opacity: 1; } } @keyframes rectMovementRight { 0% { -webkit-transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%); transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%); } 40% { opacity: 1; } 100% { -webkit-transform: translateX(0) rotate(0) translateY(-30%); transform: translateX(0) rotate(0) translateY(-30%); opacity: 1; } }
}
@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }
}
.slide-wrapper { opacity: 0; -webkit-transition-delay: 1.4s; transition-delay: 1.4s; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-property: opacity; transition-property: opacity; will-change: opacity, transform;
}
.slide-wrapper:not(.active) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-name: slideLeft; animation-name: slideLeft; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-animation-timing-function: cubic-bezier(0.18, 0.54, 0.52, 0.93); animation-timing-function: cubic-bezier(0.18, 0.54, 0.52, 0.93); pointer-events: none;
}
.slide-wrapper:not(.active) .slide-content-text > p,
.slide-wrapper:not(.active) .slide-side-text { -webkit-animation-name: cutTextUp; animation-name: cutTextUp; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;
}
.slide-wrapper:not(.active) .slide-rect { -webkit-animation-name: rectMovement; animation-name: rectMovement; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.slide-wrapper.active { -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 1;
}
.slide-wrapper.active .slide-content-text > p { opacity: 0; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; -webkit-animation-name: cutTextDown; animation-name: cutTextDown; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.slide-wrapper.active .slide-rect { opacity: 0; -webkit-animation-name: rectMovementFromRight; animation-name: rectMovementFromRight; -webkit-animation-duration: 0.45s; animation-duration: 0.45s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: 0.9s; animation-delay: 0.9s;
}
.is-previous .slide-wrapper:not(.active) { -webkit-animation: none; animation: none;
}
.is-previous .slide-wrapper:not(.active) .slide-rect { -webkit-animation: none; animation: none;
}
.is-previous .slide-wrapper.active { -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-name: slideRight; animation-name: slideRight; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-timing-function: cubic-bezier(0.18, 0.54, 0.52, 0.93); animation-timing-function: cubic-bezier(0.18, 0.54, 0.52, 0.93);
}
.is-previous .slide-wrapper.active .slide-rect { opacity: 0; -webkit-animation-name: rectMovementRight; animation-name: rectMovementRight; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: 0.9s; animation-delay: 0.9s;
}
.first-load .slide-wrapper.active .slide-side-text,
.first-load .slide-wrapper.active .slide-content-cta,
.first-load .slide-wrapper.active .slide-rect,
.first-load .controls-container { opacity: 0; -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-delay: .3s; animation-delay: .3s; -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;
}
.first-load .slide-wrapper.active .slide-content-text > p { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-duration: 0.7s; animation-duration: 0.7s;
}
Slider Animation Effect - Script Codes JS Codes
var app = new Vue({ el: '#app', data: { currentSlide: 0, isPreviousSlide: false, isFirstLoad: true, slides: [ { headlineFirstLine: "Lorem", headlineSecondLine: "Vitaer", sublineFirstLine: "Nihil sub sole", sublineSecondLine: "novum", bgImg: "https://s27.postimg.org/iz6qk21wz/slide0.jpg", rectImg: "https://s27.postimg.org/rgouhim83/slide_rect0.jpg" }, { headlineFirstLine: "Nulla", headlineSecondLine: "Auctor", sublineFirstLine: "Il n'y a rien de neuf sous", sublineSecondLine: "le soleil", bgImg: "https://s24.postimg.org/3xfyl0zat/slide1.jpg", rectImg: "https://s27.postimg.org/r00xg9gib/slide_rect1.jpg" }, { headlineFirstLine: "Nullam", headlineSecondLine: "Ultricies", sublineFirstLine: "Τίποτα καινούργιο κάτω από", sublineSecondLine: "τον ήλιο", bgImg: "https://s29.postimg.org/80bb1536f/slide2.jpg", rectImg: "https://s28.postimg.org/a2i6ateul/slide_rect2.jpg" } ] }, mounted: function () { var productRotatorSlide = document.getElementById("app"); var startX = 0; var endX = 0; productRotatorSlide.addEventListener("touchstart", (event) => startX = event.touches[0].pageX); productRotatorSlide.addEventListener("touchmove", (event) => endX = event.touches[0].pageX); productRotatorSlide.addEventListener("touchend", function(event) { var threshold = startX - endX; if (threshold < 150 && 0 < this.currentSlide) { this.currentSlide--; } if (threshold > -150 && this.currentSlide < this.slides.length - 1) { this.currentSlide++; } }.bind(this)); }, methods: { updateSlide(index) { index < this.currentSlide ? this.isPreviousSlide = true : this.isPreviousSlide = false; this.currentSlide = index; this.isFirstLoad = false; } }
})
| Developer | Emily Hayman |
| Username | eehayman |
| Uploaded | June 14, 2022 |
| Rating | 4.5 |
| Size | 8,794 Kb |
| Views | 123,464 |
Do you need developer help for Slider Animation Effect?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Emily Hayman (eehayman) Script Codes
| Name | Size |
| Custom Dropdown List | 4,266 Kb |
| SVG Stroke Animation - Origami Crane | 12,007 Kb |
| The Rhetoric of Donald Trump - A Data Visualization | 10,050 Kb |
| A Pen by Emily Hayman | 1,569 Kb |
| Single Div Apple Mouse | 2,987 Kb |
| CSS Variable-Powered Clock | 3,362 Kb |
| Full Page Parallax Scroll Effect | 4,446 Kb |
Create amazing sales emails with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Very Simple Slider | Doodlemarks | 2,682 Kb |
| Learning canvas drawing | Aurer | 2,204 Kb |
| SVG Scalable Text | Said_FD | 1,451 Kb |
| CSS Google Now | Jackmoran | 3,196 Kb |
| Background Images | Jooonebug | 2,100 Kb |
| CSS3 Form | Tusharbandal | 1,836 Kb |
| Loading Bar | Jaradlight | 2,333 Kb |
| Direction-icon | Alexandremasy | 3,323 Kb |
| SCSS Unit Conversion | Jakob-e | 8,210 Kb |
| Brent Burns Tribute Page | Nevada48 | 2,569 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!