In this article, we are going to learn to flip card block in HTML using JQuery. We will be using JQuery and plugins including wow.js , sticky.js and slick.js in order to achieve this.
Full Source Code :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-js/1.3.0/sticky.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<style>
.wrapper{
width:50%;
margin:0 auto;
margin-top:100px;
}
.cards {
position: relative;
list-style-type: none;
padding: 0;
max-width: 100%;
width: 100%
}
.card:before {
content: "";
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
position: absolute;
top: 6px;
left: 15px
}
.card {
position: absolute;
top: 0;
left: 0;
z-index: 2;
color: #fff;
background: #cd810e;
border-radius: 30px;
padding: 20px;
box-shadow: 0 0 20px #5e5e5e;
transform: translateY(0) rotate(4deg) translateX(25px) scale(1);
transform-origin: 0 0;
transition: transform .6s cubic-bezier(.8, .2, .1, .8) .1s, background .4s linear;
cursor: pointer;
user-select: none
}
@media(min-width:768px) {
.card {
padding: 40px
}
}
.card:last-child {
margin-bottom: 0
}
.card--next {
z-index: 5;
transform: translateY(-25px) rotate(4deg) translateX(25px) scale(1)
}
.card--out {
animation: card-out .6s cubic-bezier(.8, .2, .1, .8);
transform: translateY(-50px) rotate(8deg) translateX(55px) scale(.95);
z-index: 1;
background: #905c0d
}
@keyframes card-out {
0% {
z-index: 20;
transform: translateY(0px) rotate(-4deg)
}
50% {
transform: translateY(-120%) rotate(-5deg) translateX(-40px)
}
80% {
z-index: 1
}
100% {
transform: translateY(-50px) rotate(8deg) translateX(55px) scale(.95)
}
}
.card--current {
cursor: auto;
user-select: auto;
position: relative;
z-index: 10;
opacity: 1;
background: #fb9b09;
transform: rotate(-1deg) translateX(0%) scale(1);
min-height: 110px;
}
.card--current p {
position: absolute;
transform: translateX(-50%);
left: 50%;
font-size:28px;
font-weight: bold;
color:#000000;
width: calc(100% - 80px)
}
.main-wrap {
margin-top: 5rem;
min-height: 276px
}
@media(min-width:768px) {
.main-wrap {
min-height: inherit
}
}
</style>
<div class="wrapper">
<ul class="cards">
<li class="card">
<p>1. Introduction to Web Technology</p>
</li>
<li class="card">
<p>2. Basics to HTML and CSS</p>
</li>
<li class="card">
<p>3. Server Side vs Client Side Scripting</p>
</li>
<li class="card">
<p>4. JavaScript and JQuery Basics</p>
</li>
<li class="card">
<p>5. Setup Apache, MySQL and PHP (AMP)</p>
</li>
<li class="card">
<p>6. Basics : variables, data types, functions, looping and functional statements</p>
</li>
<li class="card">
<p>7. Playing with Array and Strings</p>
</li>
<li class="card">
<p>8. Database Management System (DBMS) and RDBMS</p>
</li>
<li class="card">
<p>9. Introduction to MySQL</p>
</li>
<li class="card">
<p>10. Basic MySQL Queries</p>
</li>
<li class="card">
<p>11. Advanced PHP and Object Oriented Programming (OOP)</p>
</li>
<li class="card">
<p>12. JSON and XML handling in PHP</p>
</li>
<li class="card">
<p>13. File Handling</p>
</li>
<li class="card">
<p>14. Optimization and Debugging Techniques</p>
</li>
<li class="card">
<p>15. Web Security</p>
</li>
<li class="card">
<p>16. PHP Frameworks (Laravel/Zend/Codeigniter)</p>
</li>
<li class="card">
<p>17. Get Change to work on Realtime Projects</p>
</li>
<li class="card">
<p>18. Version Control (Git)</p>
</li>
<li class="card">
<p>19. Make your websit live in production server</p>
</li>
<li class="card">
<p>20. cPanel, Domain Registration, Web Hosting and FTP, Cronjobs</p>
</li>
</ul>
</div>
<script>
$(document).ready(function() {
wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: false,
live: true
})
wow.init();
var sticky = new Sticky('.selector');
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
speed: 600,
autoplaySpeed: 5000,
autoplay: true,
infinite: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
arrows: false,
centerPadding: '0px',
dots: false,
speed: 600,
autoplaySpeed: 5000,
infinite: true,
autoplay: true,
centerMode: true,
focusOnSelect: true
});
$.fn.commentCards = function() {
return this.each(function() {
var $this = $(this),
$cards = $this.find('.card'),
$current = $cards.filter('.card--current'),
$next;
$cards.on('click', function() {
if (!$current.is(this)) {
$cards.removeClass('card--current card--out card--next');
$current.addClass('card--out');
$current = $(this).addClass('card--current');
$next = $current.next();
$next = $next.length ? $next : $cards.first();
$next.addClass('card--next');
}
});
if (!$current.length) {
$current = $cards.last();
$cards.first().trigger('click');
}
$this.addClass('cards--active');
})
};
$('.cards').commentCards();
});
</script>
