Card stack tutorial animation

Developer
Brandon Ward
Size
3,815 Kb
Views
16,192
  1. Card stack tutorial animation Previews
  2. Card stack tutorial animation HTML Codes
  3. Card stack tutorial animation CSS Codes
  4. Card stack tutorial animation JS Codes

How do I make an card stack tutorial animation?

What is a card stack tutorial animation? How do you make a card stack tutorial animation? This script and codes were developed by Brandon Ward on 18 December 2022, Sunday.

Card stack tutorial animation Previews
IQ Test

Card stack tutorial animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Card stack tutorial animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Card stack tutorial animation - Script Codes CSS Codes

@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");
body { height: 100vh; width: 100%; margin: 0; font-family: 'Palanquin', sans-serif; font-size: 21px; color: #8f959a; line-height: 1.5; background: linear-gradient(0deg, #6a11cb 0%, #2575fc 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);
}
.card:first-child, .card:nth-child(2) { background: #00c4c7; height: 8px; border-radius: 5px 5px 0 0; padding: 0; box-shadow: none;
}
.card:first-child { margin: 0 20px; background: #00b0b2;
}
.card:nth-child(2) { margin: 0 10px;
}
.card .progress-container { background: rgba(37, 117, 252, 0.2); height: 6px; position: absolute; bottom: 0; left: 0; width: 100%; border-radius: 0 0 5px 5px;
}
.card .progress-container .step { background-color: #2575fc; height: 6px; width: 33%; border-radius: 0 0 0 5px;
}
h1 { font-family: 'Titillium Web', sans-serif; font-weight: 700; font-size: 3rem; color: #00bfc2; margin: 0;
}
p { margin-top: 0;
}
a { color: #00CED1; text-decoration: none; position: relative;
}
a:before { content: ''; position: absolute; bottom: 2px; left: 0; width: 0%; border-bottom: 2px solid #00CED1; transition: 0.3s;
}
a:hover:before { width: 80%;
}

Card stack tutorial animation - Script Codes JS Codes

$(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); } });
});
Card stack tutorial animation - Script Codes
Card stack tutorial animation - Script Codes
Home Page Home
Developer Brandon Ward
Username brandondward
Uploaded December 18, 2022
Rating 4.5
Size 3,815 Kb
Views 16,192
Do you need developer help for Card stack tutorial animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brandon Ward (brandondward) Script Codes
Name
Flexbox template
Social icon hover animation
A Pen by Brandon Ward
Floating background shapes animation
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!