Flip/Animate Cards using JQuery

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>

 

Recommended For You

About the Author: Ritesh Ghimire

Ritesh is a Computer Engineer, Web Developer and an active cricket follower.