Site icon Init HTML

Kết hợp Cards của Bootstrap 4 với WOW.js

Admin

Tham khảo các bài viết:

Ví dụ

<!doctype html>
<html class="no-js" lang="vi">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Cards with WOW.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<section class="container mt-5 mb-5">
    <div class="card-columns">
        <div class="card wow bounce"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.x45315.jpg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title that wraps to a new line</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card wow flash p-3">
            <blockquote class="card-block card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow pulse"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/img-comp-580x315.x45315.jpg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow rubberBand card-inverse card-primary p-3 text-center">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                <footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow shake text-center">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow headShake"> <img class="card-img img-fluid" src="https://www.inithtml.com/demo/parallax/img/reflection-nebula-750x763.x45315.jpg" alt="Card image"> </div>
        <div class="card wow swing p-3 text-right">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow tada">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow wobble"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.x45315.jpg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title that wraps to a new line</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card wow jello p-3">
            <blockquote class="card-block card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow bounceIn"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.x45315.jpg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title that wraps to a new line</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card wow bounceInDown p-3">
            <blockquote class="card-block card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow bounceInLeft"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/img-comp-580x315.x45315.jpg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow bounceInRight card-inverse card-primary p-3 text-center">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                <footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow bounceInUp text-center">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow fadeIn">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow fadeInDown"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.x45315.jpg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title that wraps to a new line</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card wow fadeInDownBig p-3">
            <blockquote class="card-block card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow fadeInLeft"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/img-comp-580x315.x45315.jpg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow fadeInLeftBig card-inverse card-primary p-3 text-center">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                <footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow fadeInRight text-center">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow fadeInRightBig"> <img class="card-img img-fluid" src="https://www.inithtml.com/demo/parallax/img/reflection-nebula-750x763.x45315.jpg" alt="Card image"> </div>
        <div class="card wow swing p-3 text-right">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow fadeInUp">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow fadeInUpBig"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.x45315.jpg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title that wraps to a new line</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card wow flipInX card-inverse card-primary p-3 text-center">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                <footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow flipInY text-center">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow lightSpeedIn"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.x45315.jpg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title that wraps to a new line</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card wow rotateIn"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/img-comp-580x315.x45315.jpg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow rotateInDownLeft card-inverse card-primary p-3 text-center">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                <footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow rotateInDownRight text-center">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow rotateInUpLeft"> <img class="card-img img-fluid" src="https://www.inithtml.com/demo/parallax/img/reflection-nebula-750x763.x45315.jpg" alt="Card image"> </div>
        <div class="card wow swing p-3 text-right">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow rotateInUpRight">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow hinge card-inverse card-primary p-3 text-center">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                <footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow rollIn text-center">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow zoomIn">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow zoomInDown"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/img-comp-580x315.x45315.jpg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow zoomInLeft card-inverse card-primary p-3 text-center">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                <footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow zoomInRight text-center">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow zoomInUp"> <img class="card-img img-fluid" src="https://www.inithtml.com/demo/parallax/img/reflection-nebula-750x763.x45315.jpg" alt="Card image"> </div>
        <div class="card p-3 text-right">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow slideInDown text-center">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow slideInLeft"> <img class="card-img img-fluid" src="https://www.inithtml.com/demo/parallax/img/reflection-nebula-750x763.x45315.jpg" alt="Card image"> </div>
        <div class="card wow swing p-3 text-right">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer>
            </blockquote>
        </div>
        <div class="card wow slideInRight">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card wow slideInUp"> <img class="card-img-top img-fluid" src="https://www.inithtml.com/wp-content/uploads/2017/04/recaptcha-580x315.x45315.jpg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title that wraps to a new line</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
        </div>
    </div>
</section>
    
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script type="text/javascript">
    new WOW().init();
</script>
</body>
</html>

Xem demo Tải về

Chúc các bạn thành công!

Exit mobile version