Animated Frame Slideshow
https://animejs.com/
artspider designerhttps://www.youtube.com/channel/UCD10SZSEyZCFAR4DFx_uNyg
SOURCE CODE
HTML SOURCE_CODE:-
index .html
👇
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated Frame Slideshow </title>
<meta name="description" content="A slideshow that shows an animated SVG frame on the transitions between slides" />
<meta name="keywords" content="slideshow, javascript, frame, animation, svg, shape, path, web design "/>
<meta name= "author" content="Codrops" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body class="demo-6 loading">
<div class="header">
<a href="#" class="logo">
T.
</a>
<div class="loc">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">CONTACT</a></li>
</div>
</div>
<main>
<div class="slideshow">
<div class="slides slides--images">
<div class="slide slide--current">
<div class="slide__img" style="background-image: url(img/13.jpg) "></div>
</div>
<div class="slide">
<div class="slide__img" style="background-image: url(img/14.jpg) "></div>
</div>
<div class="slide">
<div class="slide__img" style="background-image: url(img/15.jpg) "></div>
</div>
<div class="slide">
<div class="slide__img" style="background-image: url(img/16.jpg) "></div>
</div>
</div>
<div class="slides slides--titles">
<div class="slide slide--current">
<h2 class="slide__title">Artspider</h2>
</div>
<div class="slide">
<h2 class="slide__title">Discover</h2>
</div>
<div class="slide">
<h2 class="slide__title">Design</h2>
</div>
<div class="slide">
<h2 class="slide__title">Create</h2>
</div>
</div>
<nav class="slidenav">
<button class="slidenav__item slidenav__item--prev" ><i class="fas fa-arrow-alt-circle-left" id="pr_button"></i></button>
<button class="slidenav__item slidenav__item--next" ><i class="fas fa-arrow-alt-circle-right" id="ne_button"></i></button>
</nav>
</div>
</main>
<script src="js/demo.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/demo6.js"></script>
</body>
</html>
CSS SOURCE_CODE:-
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
background: #fff;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
min-height: 100vh;
color: #57585c;
color: var(--color-text);
background-color: #fff;
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.header{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding:10px 100px;
display: flex;
justify-content:space-between;
align-items: center;
z-index: 400;
}
.logo{
position: relative;
max-width: 60px;
font-size: 35px;
transform: rotate(360deg);
font-family: cursive;
transition: 0.5s;
color: rgb(235, 235, 235);
text-decoration: none;
}
.logo:hover{
transform: rotate(0deg);
color: rgb(10, 10, 10);
}
.header ul{
position: relative;
display: flex;
}
.header ul li{
list-style: none;
}
.header ul li a{
display: inline-block;
color: rgb(240, 239, 245);
font-weight: 400;
margin-left: 40px;
text-decoration: none;
font-size: 12px;
font-family: sans-serif;
transition: .5s;
}
.header ul li a:hover{
color: rgb(233, 218, 18);
}
/* Color schemes */
.slide__img{
background-size: cover;
}
.demo-6 {
--color-text: rgb(235, 228, 228);
--color-bg: #303030;
--color-link: rgb(246, 245, 245);
--color-link-hover: #f5f841;
--color-stitle: #e9e6e6;
--fontsize-stitle: 12vw;
--color-nav: rgb(240, 238, 238);
--color-nav-hover: #f5f841;
}
/* Fade effect */
.js body {
opacity: 0;
transition: opacity 0.3s;
}
.js body.render {
opacity: 1;
}
main {
position: relative;
width: 100%;
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
min-height: 100vh;
}
.content--fixed {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
display: grid;
align-content: space-between;
width: 100%;
max-width: none;
min-height: 0;
height: 100vh;
padding: 1.5em;
pointer-events: none;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto 4em;
grid-template-areas: 'header github'
'... ...'
'... demos';
}
.content--fixed a {
pointer-events: auto;
}
.demos {
position: relative;
display: block;
align-self: end;
text-align: center;
grid-area: demos;
}
.demo {
margin: 0 0.15em;
}
.demo:hover,
.demo:focus {
opacity: 0.5;
}
.demo span {
white-space: nowrap;
text-transform: lowercase;
pointer-events: none;
}
.demo span::before {
content: '#';
}
a.demo--current {
pointer-events: none;
}
#pr_button {
font-size: 50px;
}
#ne_button {
font-size: 50px;
}
.slideshow {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slides {
position: absolute;
width: 100%;
height: 100%;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
align-items: center;
}
.slide--current {
opacity: 1;
pointer-events: auto;
}
.slide__img {
position: absolute;
top: -200px;
left: -200px;
width: calc(100% + 400px);
height: calc(100% + 400px);
background-size: cover;
background-position: 50% 50%;
}
.slidenav {
position: absolute;
width: 300px;
margin-left: -150px;
left: 90%;
bottom: 0;
padding: 2em;
}
.slidenav__item {
border: 0;
background: none;
font-weight: bold;
color: var(--color-nav);
}
.slidenav__item:focus {
outline: none;
}
.slidenav__item:hover {
color: var(--color-nav-hover);
}
.shape {
position: absolute;
width: 100%;
height: 100%;
fill: var(--color-shape-fill);
top: 0;
pointer-events: none;
}
.slide__title {
position: relative;
font-size: var(--fontsize-stitle);
margin: 0;
cursor: default;
line-height: 1;
color: var(--color-stitle);
}
.slide__desc {
position: relative;
font-size: 1.5em;
margin: 0 0 2em 0;
cursor: default;
color: var(--color-sdesc);
padding: 0 1em;
text-align: center;
}
.slide__link {
position: relative;
font-size: 1em;
font-weight: bold;
padding: 1em 2em;
display: block;
color: var(--color-slink);
background: var(--color-slink-bg);
transition: color 0.3s, background 0.3s;
}
.slide__link:hover {
color: var(--color-slink-hover);
background: var(--color-slink-hover-bg);
}
Javascript (.js file) SOURCE_CODE:-
{
setTimeout(() => document.body.classList.add('render'), 60);
const navdemos = Array.from(document.querySelectorAll('nav.demos > .demo'));
const navigate = (linkEl) => {
document.body.classList.remove('render');
document.body.addEventListener('transitionend', () => window.location = linkEl.href);
};
navdemos.forEach(link => link.addEventListener('click', (ev) => {
ev.preventDefault();
navigate(ev.target);
}));
}
{
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
class Slideshow {
constructor(el) {
this.DOM = {};
this.DOM.el = el;
this.settings = {
animation: {
slides: {
duration: 1000,
easing: 'easeOutQuint'
},
shape: {
duration: 300,
easing: {in: 'easeOutQuint', out: 'easeOutQuad'}
}
},
frameFill: 'url(#gradient1)'
}
this.init();
}
init() {
this.DOM.slides = Array.from(this.DOM.el.querySelectorAll('.slides--images > .slide'));
this.slidesTotal = this.DOM.slides.length;
this.DOM.nav = this.DOM.el.querySelector('.slidenav');
this.DOM.titles = this.DOM.el.querySelector('.slides--titles');
this.DOM.titlesSlides = Array.from(this.DOM.titles.querySelectorAll('.slide'));
this.DOM.nextCtrl = this.DOM.nav.querySelector('.slidenav__item--next');
this.DOM.prevCtrl = this.DOM.nav.querySelector('.slidenav__item--prev');
this.current = 0;
this.createFrame();
this.initEvents();
}
createFrame() {
this.rect = this.DOM.el.getBoundingClientRect();
this.frameSize = this.rect.width/12;
this.paths = {
initial: this.calculatePath('initial'),
final: this.calculatePath('final')
};
this.DOM.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.DOM.svg.setAttribute('class', 'shape');
this.DOM.svg.setAttribute('width','100%');
this.DOM.svg.setAttribute('height','100%');
this.DOM.svg.setAttribute('viewbox',`0 0 ${this.rect.width} ${this.rect.height}`);
this.DOM.svg.innerHTML = `
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#09012d"/>
<stop offset="100%" stop-color="#0f2b73"/>
</linearGradient>
</defs>
<path fill="${this.settings.frameFill}" d="${this.paths.initial}"/>`;
this.DOM.el.insertBefore(this.DOM.svg, this.DOM.titles);
this.DOM.shape = this.DOM.svg.querySelector('path');
}
updateFrame() {
this.paths.initial = this.calculatePath('initial');
this.paths.final = this.calculatePath('final');
this.DOM.svg.setAttribute('viewbox',`0 0 ${this.rect.width} ${this.rect.height}`);
this.DOM.shape.setAttribute('d', this.isAnimating ? this.paths.final : this.paths.initial);
}
calculatePath(path = 'initial') {
if ( path === 'initial' ) {
return `M 0,0 0,${this.rect.height} ${this.rect.width},${this.rect.height} ${this.rect.width},0 0,0 Z M 0,0 ${this.rect.width},0 ${this.rect.width},${this.rect.height} 0,${this.rect.height} Z`;
}
else {
const point1 = {x: this.rect.width/4-50, y: this.rect.height/4+50};
const point2 = {x: this.rect.width/4+50, y: this.rect.height/4-50};
const point3 = {x: this.rect.width-point2.x, y: this.rect.height-point2.y};
const point4 = {x: this.rect.width-point1.x, y: this.rect.height-point1.y};
return `M 0,0 0,${this.rect.height} ${this.rect.width},${this.rect.height} ${this.rect.width},0 0,0 Z M ${point1.x},${point1.y} ${point2.x},${point2.y} ${point4.x},${point4.y} ${point3.x},${point3.y} Z`;
}
}
initEvents() {
this.DOM.nextCtrl.addEventListener('click', () => this.navigate('next'));
this.DOM.prevCtrl.addEventListener('click', () => this.navigate('prev'));
window.addEventListener('resize', debounce(() => {
this.rect = this.DOM.el.getBoundingClientRect();
this.updateFrame();
}, 20));
document.addEventListener('keydown', (ev) => {
const keyCode = ev.keyCode || ev.which;
if ( keyCode === 37 ) {
this.navigate('prev');
}
else if ( keyCode === 39 ) {
this.navigate('next');
}
});
}
navigate(dir = 'next') {
if ( this.isAnimating ) return false;
this.isAnimating = true;
const animateShapeIn = anime({
targets: this.DOM.shape,
duration: this.settings.animation.shape.duration,
easing: this.settings.animation.shape.easing.in,
d: this.paths.final
});
const animateSlides = () => {
return new Promise((resolve, reject) => {
const currentSlide = this.DOM.slides[this.current];
anime({
targets: currentSlide,
duration: this.settings.animation.slides.duration,
easing: this.settings.animation.slides.easing,
translateY: dir === 'next' ? this.rect.height : -1*this.rect.height,
complete: () => {
currentSlide.classList.remove('slide--current');
resolve();
}
});
const currentTitleSlide = this.DOM.titlesSlides[this.current];
anime({
targets: currentTitleSlide.children,
duration: this.settings.animation.slides.duration,
easing: this.settings.animation.slides.easing,
delay: (t,i,total) => dir === 'next' ? i*100 : (total-i-1)*100,
translateY: [0, dir === 'next' ? 100 : -100],
opacity: [1,0],
complete: () => {
currentTitleSlide.classList.remove('slide--current');
resolve();
}
});
this.current = dir === 'next' ?
this.current < this.slidesTotal-1 ? this.current + 1 : 0 :
this.current > 0 ? this.current - 1 : this.slidesTotal-1;
const newSlide = this.DOM.slides[this.current];
newSlide.classList.add('slide--current');
anime({
targets: newSlide,
duration: this.settings.animation.slides.duration,
easing: this.settings.animation.slides.easing,
translateY: [dir === 'next' ? -1*this.rect.height : this.rect.height,0]
});
const newSlideImg = newSlide.querySelector('.slide__img');
anime.remove(newSlideImg);
anime({
targets: newSlideImg,
duration: this.settings.animation.slides.duration*3,
easing: this.settings.animation.slides.easing,
translateY: [dir === 'next' ? -100 : 100, 0],
scale: [0.2,1]
});
const newTitleSlide = this.DOM.titlesSlides[this.current];
newTitleSlide.classList.add('slide--current');
anime({
targets: newTitleSlide.children,
duration: this.settings.animation.slides.duration*1.5,
easing: this.settings.animation.slides.easing,
delay: (t,i,total) => dir === 'next' ? i*100+100 : (total-i-1)*100+100,
translateY: [dir === 'next' ? -100 : 100 ,0],
opacity: [0,1]
});
});
};
const animateShapeOut = () => {
anime({
targets: this.DOM.shape,
duration: this.settings.animation.shape.duration,
easing: this.settings.animation.shape.easing.out,
d: this.paths.initial,
complete: () => this.isAnimating = false
});
}
animateShapeIn.finished.then(animateSlides).then(animateShapeOut);
}
};
new Slideshow(document.querySelector('.slideshow'));
imagesLoaded('.slide__img', { background: true }, () => document.body.classList.remove('loading'));
};
web design video My YOUTUBE channel
Tags:
slideshow, javascript, frame, animation, svg, shape, path, web design
Comments
Post a Comment