Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Card stack tutorial animation
<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 &rarr;</a>
</div>
<div class="content">
<h1>Step 2</h1>
<p>Trip. Spill all over the place.</p>
<a class="button" href="#">Next step &rarr;</a>
</div>
<div class="content">
<h1>Step 3</h1>
<p>Repeat.</p>
<a class="button" href="#">Next step &rarr;</a>
</div>
<div class="progress-container">
<div class="step"></div>
</div>
</div>
</div>
</div>
$(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);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
@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