Hi everyone, any idea how to import these slideshow codes into the Dawn theme?
It looks something like this..
Website:
html:
css:
@import url(“https://fonts.googleapis.com/css?family=Montserrat:400,900”);
body {
padding: 0;
margin: 0;
display:flex;
justify-content:center;
align-items: center;
height:100vh;
font-family: Montserrat, sans-serif;
font-weight:900;
}
*, *:before, *:after {
box-sizing: border-box;
position: relative;
}
.slider {
position:relative;
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
.status {
position: absolute;
bottom: 10px;
right:10px;
display:flex;
.point {
position: absolute;
width:14px;
height:14px;
top:-2px;
background-color:#ff0;
border-radius:50%;
z-index:15;
transition: left 500ms ease-in-out;
&[data-current=‘0’] {
left: 4px;
}
&[data-current=‘1’] {
left: 24px;
}
&[data-current=‘2’] {
left: 44px;
}
&[data-current=‘3’] {
left: 64px;
}
&[data-current=‘4’] {
left: 84px;
}
&[data-current=‘5’] {
left: 104px;
}
}
.stat {
width:10px;
height:10px;
background-color:transparent;
border-radius:50%;
z-index:20;
margin: 0px 5px;
border: 1px solid #fff;
}
.stat.current {
background-color:#fff;
}
}
.text {
position:absolute;
color: #ff0;
text-shadow: 0 0 5px #0003;
z-index:20;
transform-origin:right top;
transform: rotate(-90deg) translateY( calc( -90vh + 2vw ) );
display:grid;
grid-template-columns:90vh;
grid-template-rows:1fr;
font-size:15vw;
@media (min-width: 70em) {
font-size:7em;
}
text-transform: uppercase;
div {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start:1;
grid-row-end:2;
opacity:0;
&.current {
opacity:.7;
}
}
}
img {
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
filter: sepia(1) hue-rotate(180deg);
display: block;
}
.image {
width: 100%;
margin-right: -100%;
opacity: 0;
overflow: hidden;
transform: translateY(0) scale(1.2);
z-index: 1;
}
.image.current {
z-index: 10;
transform: translateY(0) scale(1);
opacity:1;
}
}
js:
console.clear();
const slider = document.querySelector(‘.slider’)
const allImages = Array.from(document.querySelectorAll(‘.slider .image’));
let state = {
photo: 0,
animationActive: false
};
const elStatus = Array.from(document.querySelectorAll(‘.slider .stat’));
elStatus.forEach( stat => {
stat.addEventListener(‘click’, () => {
if ( !state.animationActive ) {
if(stat.dataset.key!=state.photo) {
state.animationActive = true
slide(stat.dataset.key,state.photo)
}
}
});
});
// handling swipe
var mc = new Hammer(slider);
mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL}) )
// listen to events…
mc.on(“panup pandown”, function(ev) {
if ( !state.animationActive ) {
state.animationActive = true
let dir = 1
if (ev.type==‘panup’) {
dir = -1
}
var next = state.photo + dir
var current = state.photo
slide(next,current)
}
});
// handling mousewhell
slider.addEventListener(“wheel”, function(e) {
e.stopPropagation()
if ( !state.animationActive ) {
state.animationActive = true
let dir = Math.sign(e.deltaY);
var next = state.photo + dir
var current = state.photo
slide(next,current)
}
});
document.onkeydown = function(e) {
if ( !state.animationActive ) {
state.animationActive = true
switch (e.keyCode) {
case 37:
// left
var next = state.photo - 1
var current = state.photo
slide(next,current)
break;
case 38:
// up
var next = state.photo + 1
var current = state.photo
slide(next,current)
break;
case 39:
// right
var next = state.photo + 1
var current = state.photo
slide(next,current)
break;
case 40:
// down
var next = state.photo - 1
var current = state.photo
slide(next,current)
break;
}
}
};
function slide( toSlide, currentSlide ) {
//console.log(‘slide: to/cur ‘+toSlide+’ / ‘+currentSlide )
if ( toSlide > currentSlide ) {
var direction = ‘down’
}
if ( toSlide < currentSlide ) {
var direction = ‘up’
}
var ele = document.querySelector(’.slider .image[data-key="’+currentSlide+‘"]’)
if ( toSlide < 0 ) {
toSlide = allImages.length - 1
}
if ( toSlide > allImages.length-1 ) {
toSlide = 0
}
nextPhoto = toSlide
//console.log(’ nextPhoto: ‘+nextPhoto +’ l '+allImages.length)
currentTextEle = document.querySelector(’ .slider .text .current ‘)
nextTextEle = document.querySelector(’ .slider .text div[data-key=“‘+toSlide+’”] ')
var textOutToTop = anime({
targets: currentTextEle,
translateX: ‘110vh’,
duration: 700,
easing: ‘linear’,
autoplay: false,
complete: function(anim) {
currentTextEle.classList.remove(‘current’)
nextTextEle.classList.add(‘current’)
}
});
var textOutToBottom = anime({
targets: currentTextEle,
translateX: ‘-110vh’,
duration: 700,
easing: ‘linear’,
autoplay: false,
complete: function(anim) {
currentTextEle.classList.remove(‘current’)
nextTextEle.classList.add(‘current’)
}
});
var textInFromTop = anime({
targets: nextTextEle,
translateX: [
{ value: ‘110vh’, duration: 1 },
{ value: 0, duration: 700 }
],
opacity: [
{ value: 0, duration: 1 },
{ value: .8, duration: 700 }
],
scaleX: [
{ value: 1.7, duration: 1 },
{ value: 1, duration: 200, delay:500 }
],
easing: ‘easeInQuad’,
autoplay: false,
});
var textInFromBottom = anime({
targets: nextTextEle,
translateX: [
{ value: ‘-80vh’, duration: 1 },
{ value: 0, duration: 700 }
],
opacity: [
{ value: 0, duration: 1 },
{ value: .8, duration: 700 }
],
scaleX: [
{ value: 1.7, duration: 1 },
{ value: 1, duration: 400, delay:300 }
],
easing: ‘easeInQuad’,
autoplay: false,
});
var eleNext = document.querySelector(‘.slider .image[data-key="’+toSlide+‘"]’)
var outToBottomAni = anime({
targets: ele,
translateY: ‘110vh’,
duration: 700,
easing: ‘linear’,
autoplay: false,
complete: function(anim) {
ele.classList.remove(‘current’)
var resetAni = anime({
targets: ele,
translateY: 0,
duration: 1,
autoplay: false,
scale: 1.4,
opacity: 0,
})
resetAni.play()
}
});
var outToTopAni = anime({
targets: ele,
translateY: ‘-110vh’,
duration: 700,
easing: ‘linear’,
autoplay: false,
complete: function(anim) {
ele.classList.remove(‘current’)
var resetAni = anime({
targets: ele,
translateY: 0,
duration: 1,
autoplay: false,
scale: 1.4,
opacity: 0,
})
resetAni.play()
}
});
var inAni = anime({
targets: eleNext,
translateY: 0,
scale: 1,
opacity: 1,
duration: 1300,
easing: ‘easeOutQuart’,
autoplay: false,
complete: function(anim) {
eleNext.classList.add(‘current’)
state.animationActive = false
}
});
inAni.play()
if ( direction == ‘down’ ) {
outToBottomAni.play()
textOutToBottom.play()
textInFromTop.play()
}
if ( direction == ‘up’ ) {
outToTopAni.play()
textOutToTop.play()
textInFromBottom.play()
}
state.photo = toSlide
let statusPoint = document.querySelector(‘.slider .point’)
statusPoint.dataset.current = toSlide
}
var allImg = document.querySelectorAll(‘.slider .image:not(.current)’)
var init = anime({
targets: allImg,
scale: 1.4
});
