A Pen by Brandon Ward on CodePen.
Created
September 23, 2018 23:27
-
-
Save CodeMyUI/5b1227b7b54581cc23cfe49620026f18 to your computer and use it in GitHub Desktop.
Card stack tutorial animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="inner-container"> | |
<div class="card inactive-1"></div> | |
<div class="card inactive-2"></div> | |
<div class="card"> | |
<div class="content active"> | |
<h1>Step 1</h1> | |
<p>Make perfectly hot homemade coffee. Carefully pour into coffee cup. <i class="em em-coffee"></i></p> | |
<a class="button" href="#">Next step →</a> | |
</div> | |
<div class="content"> | |
<h1>Step 2</h1> | |
<p>Trip. Spill all over the place.</p> | |
<a class="button" href="#">Next step →</a> | |
</div> | |
<div class="content"> | |
<h1>Step 3</h1> | |
<p>Repeat.</p> | |
<a class="button" href="#">Next step →</a> | |
</div> | |
<div class="progress-container"> | |
<div class="step"></div> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
var content = $('.content'); | |
var currentItem = content.filter('.active'); | |
var steps = $('.card').filter('.steps'); | |
var inactive1 = $('.inactive-1'); | |
var inactive2 = $('.inactive-2'); | |
$('.button').click(function() { | |
var nextItem = currentItem.next(); | |
var lastItem = content.last(); | |
var contentFirst = content.first(); | |
currentItem.removeClass('active'); | |
if (currentItem.is(lastItem)) { | |
currentItem = contentFirst.addClass('active'); | |
currentItem.css({'right': '10%', 'opacity': '1'}); | |
$('.step').animate({width: '33%'}); | |
inactive1.animate({height: '8px', marginLeft:'20px', marginRight:'20px'}, 100); | |
inactive2.animate({height: '8px', marginLeft:'10px', marginRight:'10px'}, 100); | |
} else if (currentItem.is(contentFirst)) { | |
currentItem.animate({opacity: 0}, 1000); | |
currentItem = nextItem.addClass('active'); | |
$('.step').animate({width: '66%'}); | |
inactive2.animate({height: '0', marginLeft:'0px', marginRight:'0px'}, 100); | |
} else { | |
currentItem = nextItem.addClass('active'); | |
$('.step').animate({width: '100%'}); | |
inactive1.animate({height: '0', marginLeft:'0px', marginRight:'0px'}, 100); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,700,900'); | |
@import url('https://fonts.googleapis.com/css?family=Palanquin:300'); | |
@import url('https://afeld.github.io/emoji-css/emoji.css'); | |
$aqua: #00CED1; | |
$blueberry: #2575fc; | |
$grape: #6a11cb; | |
$darkcloud: #8f959a; | |
body { | |
height: 100vh; | |
width: 100%; | |
margin: 0; | |
font-family: 'Palanquin', sans-serif; | |
font-size: 21px; | |
color: $darkcloud; | |
line-height: 1.5; | |
background: linear-gradient(0deg, $grape 0%, $blueberry 100%); | |
} | |
.container { | |
margin: 4em auto; | |
} | |
.inner-container { | |
position: relative; | |
max-width: 20%; | |
min-width: 360px; | |
height: 300px; | |
width: 100%; | |
margin: 0 auto 100px; | |
} | |
.content { | |
position: absolute; | |
opacity: 0; | |
top: 2em; | |
left: 10%; | |
width: 80%; | |
margin: 0 auto; | |
} | |
.active { | |
display: block !important; | |
margin: 0 auto; | |
opacity: 1; | |
transition: ease-in-out 1s; | |
} | |
.card { | |
position: relative; | |
background: #fff; | |
border-radius: 5px; | |
padding: 2em 0; | |
height: 300px; | |
box-sizing: border-box; | |
transition: .3s ease; | |
box-shadow: 0 3px 10px -2px rgba(0,0,0,0.35); | |
&:first-child, | |
&:nth-child(2) { | |
background: darken($aqua, 2%); | |
height: 8px; | |
border-radius: 5px 5px 0 0; | |
padding: 0; | |
box-shadow: none; | |
} | |
&:first-child { | |
margin: 0 20px; | |
background: darken($aqua, 6%); | |
} | |
&:nth-child(2) { | |
margin: 0 10px; | |
} | |
.progress-container { | |
background: rgba($blueberry, 0.2); | |
height: 6px; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
width: 100%; | |
border-radius: 0 0 5px 5px; | |
.step { | |
background-color: $blueberry; | |
height: 6px; | |
width: 33%; | |
border-radius: 0 0 0 5px; | |
} | |
} | |
} | |
h1 { | |
font-family: 'Titillium Web', sans-serif; | |
font-weight: 700; | |
font-size: 3rem; | |
color: darken($aqua, 3%); | |
margin: 0; | |
} | |
p { | |
margin-top: 0; | |
} | |
a { | |
color: $aqua; | |
text-decoration: none; | |
position: relative; | |
&:before { | |
content: ''; | |
position: absolute; | |
bottom: 2px; | |
left: 0; | |
width: 0%; | |
border-bottom: 2px solid $aqua; | |
transition: 0.3s; | |
} | |
&:hover:before { | |
width: 80%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment