Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.pug

Created Nov 23, 2017
Embed
What would you like to do?
Ken Burns effect CSS only
#CrossFade
each img in [1043,1039,1017,929]
img(src='//unsplash.it/1600/900?image='+img, alt="img")
.intro
h1 Lorem ipsum dolor sit amet
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis impedit facilis nesciunt quam vitae voluptatibus ullam vero.
*
margin 0
padding 0
box-sizing border-box
:root
font-size calc(.5vw + 1vh + .5vmin)
body
font 100 50%/1.5 'Roboto', sans-serif
.intro
position relative
margin 2em
padding .2em .6em
cursor pointer
// &:hover
// background rgba(96, 125, 139, 0.5);
color #FFF
font-size 2em
max-width 26em
h1
margin-bottom .5em
line-height 1
font-weight 100
//===== #CrossFade =======
#CrossFade
background #FFF //no flash
display flex
align-items flex-end
height 100vh
overflow hidden
position relative
img
position absolute
min-width 100%
min-height 100%
height auto
background #000
backface-visibility hidden
opacity 0
transform scale(1.4) rotate(12deg)
animation CrossFade 24s infinite
&:nth-child(3)
animation-delay 6s
&:nth-child(2)
animation-delay 12s
&:nth-child(1)
animation-delay 18s
@keyframes CrossFade
25%
opacity 1
transform scale(1) rotate(0)
40%
opacity 0
//===== #CrossFadeMixin =======
/*
$duration = 12
$slides = 4
$step = $duration/$slides
setDelayRevers($duration, $slides)
for index in (2..$slides)
&:nth-child({index -1})
animation-delay ($step*index)s
#CrossFade
height 100vh
overflow hidden
position relative
display flex
img
align-self center
position absolute
min-width 100%
min-height 100%
height auto
backface-visibility hidden
opacity 0
transform scale(1.4) rotate(12deg)
animation CrossFade ($duration)s infinite
setDelayRevers($duration, $slides)
@keyframes CrossFade
25%
opacity 1
transform scale(1) rotate(0)
40%
opacity 0
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment