Simple slider in a minimal style to show off images. part of the image pops out on each slide. Has some lag issues due to the blur and hi res images.
A Pen by Nathan Taylor on CodePen.
.slider | |
.slider__slide.slider__slide--active( data-slide="1" ) | |
.slider__wrap | |
.slider__back | |
.slider__inner | |
.slider__content | |
h1 Slide <br> One | |
a.go-to-next next | |
.slider__slide( data-slide="2" ) | |
.slider__wrap | |
.slider__back | |
.slider__inner | |
.slider__content | |
h1 Slide <br> Two | |
a.go-to-next next | |
.slider__slide( data-slide="3" ) | |
.slider__wrap | |
.slider__back | |
.slider__inner | |
.slider__content | |
h1 Slide <br> Three | |
a.go-to-next next | |
.slider__indicators | |
a(href="http://nathan.tokyo" target="_blank").sig NATHAN.TOKYO |
Simple slider in a minimal style to show off images. part of the image pops out on each slide. Has some lag issues due to the blur and hi res images.
A Pen by Nathan Taylor on CodePen.
$(document).ready(function(){ | |
for (var i=1; i <= $('.slider__slide').length; i++){ | |
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>') | |
} | |
setTimeout(function(){ | |
$('.slider__wrap').addClass('slider__wrap--hacked'); | |
}, 1000); | |
}) | |
function goToSlide(number){ | |
$('.slider__slide').removeClass('slider__slide--active'); | |
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active'); | |
} | |
$('.slider__next, .go-to-next').on('click', function(){ | |
var currentSlide = Number($('.slider__slide--active').data('slide')); | |
var totalSlides = $('.slider__slide').length; | |
currentSlide++ | |
if (currentSlide > totalSlides){ | |
currentSlide = 1; | |
} | |
goToSlide(currentSlide); | |
}) |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
$main: #777; | |
$back: #aaa; | |
$accent: hsl(220,50%,40%); | |
$sans: 'Open Sans', sans-serif; | |
$heebo: 'Heebo', sans-serif; | |
$base: 3vh; | |
$time: 1800ms; | |
$ease-out: cubic-bezier(0.260, 0.005, 0.135, 1.000); | |
$ease-in-out: cubic-bezier(0.785, 0.135, 0.150, 0.860); | |
body{ | |
background: $back; | |
font-family: $sans | |
} | |
.slider{ | |
position: relative; | |
height: 100vh; | |
width: 100vw; | |
background: $main; | |
overflow: hidden;; | |
&__wrap{ | |
position: absolute; | |
width: 100vw; | |
height: 100vh; | |
transform: translateX(100vw); | |
top: 0%; | |
left: 0; | |
right: auto; | |
overflow: hidden; | |
transition: transform $time/4 $ease-in-out; | |
transform-origin: 0% 50%; | |
transition-delay: $time/4; | |
opacity: 0; | |
&--hacked{ | |
opacity: 1; | |
} | |
} | |
&__back{ | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
background-size: auto 100%; | |
background-position: center; | |
background-repeat: none; | |
transition: filter $time/4 $ease-in-out; | |
} | |
&__inner{ | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
top: 0; | |
left: 0%; | |
background-size: auto 133.3333%; | |
background-position: center; | |
background-repeat: none; | |
transform: scale(0.75); | |
transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out, opacity $time/4 step-end; | |
opacity: 0; | |
box-shadow: 0 $base $base rgba(darken($accent,50%),0); | |
padding: $base*5; | |
box-sizing: border-box; | |
} | |
&__content{ | |
position: relative; | |
top: 50%; | |
width: auto; | |
transform: translateY(-50%); | |
color: white; | |
font-family: $heebo; | |
opacity: 0; | |
transition: opacity $time/4; | |
h1{ | |
font-weight: 900; | |
font-size: $base*3; | |
line-height: 0.85; | |
margin-bottom: $base/4; | |
pointer-events: none; | |
text-shadow: 0 $base/8 $base/4 rgba(darken($accent,50%),0.1); | |
} | |
a{ | |
cursor: pointer; | |
font-size: $base*0.8; | |
letter-spacing: $base*0.1; | |
font-weight: 100; | |
position: relative; | |
&:after{ | |
content: ''; | |
display: block; | |
width: $base*3; | |
background: white; | |
height: 1px; | |
position: absolute; | |
top: 50%; | |
left: $base*2; | |
transform: translateY(-50%); | |
transform-origin: 0% 50%; | |
transition: transform $time/2 $ease-in-out; | |
} | |
&:before{ | |
content: ''; | |
border-top: 1px solid white; | |
border-right: 1px solid white; | |
display: block; | |
width: $base/3; | |
height: $base/3; | |
transform: translateX(0) translateY(-50%) rotate(45deg); | |
position: absolute; | |
font-family: $heebo; | |
font-weight: 100; | |
top: 50%; | |
left: $base*5; | |
transition: transform $time/2 $ease-in-out; | |
} | |
&:hover{ | |
&:after{ | |
transform: scaleX(1.5); | |
transition: transform $time*2/3 $ease-in-out; | |
} | |
&:before{ | |
transform: translateX(#{$base*2}) translateY(-50%) rotate(45deg); | |
transition: transform $time*2/3 $ease-in-out; | |
} | |
} | |
} | |
} | |
&__slide{ | |
position: absolute; | |
left: 0; | |
height: 100vh; | |
width: 100vw; | |
//transform: translatex(-100%); | |
transition: transform $time/3 $ease-in-out; | |
transition-delay: $time/3; | |
pointer-events: none; | |
z-index: 0; | |
&--active{ | |
transform: translatex(0%); | |
z-index: 2; | |
.slider__wrap{ | |
transform: translateX(0); | |
transform-origin: 100% 50%; | |
opacity: 1; | |
animation: none; | |
} | |
.slider__back{ | |
filter: blur(#{$base*0.5}); | |
transition: filter $time/2 $ease-in-out; | |
transition-delay: $time/2 !important; | |
} | |
.slider__inner{ | |
transform: scale(0.80); | |
box-shadow: 0 $base/3 $base*2 rgba(darken($accent,50%),0.2); | |
pointer-events: auto; | |
opacity: 1; | |
transition: transform $time/2 $ease-in-out, box-shadow $time/2 $ease-in-out, opacity 1ms step-end; | |
transition-delay: $time/2; | |
} | |
.slider__content{ | |
opacity: 1; | |
transition-delay: $time*3/4; | |
} | |
} | |
&:not(.slider__slide--active) .slider__wrap{ | |
@keyframes hack{ | |
0%{ | |
transform: translateX(0); | |
opacity: 1; | |
} | |
50%{ | |
transform: translateX(-100vw); | |
opacity: 1; | |
} | |
51%{ | |
transform: translateX(-100vw); | |
opacity: 0; | |
} | |
52%{ | |
transform: translateX(100vw); | |
opacity: 0; | |
} | |
100%{ | |
transform: translateX(100vw); | |
opacity: 1; | |
} | |
} | |
animation-name: hack; | |
animation-duration: $time/2; | |
animation-delay: $time/4; | |
animation-timing-function: $ease-in-out; | |
} | |
&:nth-child(1) .slider__back, &:nth-child(1) .slider__inner{ | |
background-image: url(https://unsplash.it/1600/800/?image=931); | |
//background: #eee; | |
} | |
&:nth-child(2) .slider__back, &:nth-child(2) .slider__inner{ | |
background-image: url(https://unsplash.it/1600/800/?image=929); | |
//background: #aaa; | |
} | |
&:nth-child(3) .slider__back, &:nth-child(3) .slider__inner{ | |
background-image: url(https://unsplash.it/1600/800/?image=927); | |
//background: #888; | |
} | |
} | |
} | |
.sig{ | |
position: fixed; | |
bottom: 8px; | |
right: 8px; | |
text-decoration: none; | |
font-size: 12px; | |
font-weight: 100; | |
font-family: sans-serif; | |
color: rgba(255,255,255,0.4); | |
letter-spacing: 2px; | |
z-index: 9999; | |
} |