Lightning fast jQuery flip plugin

1. Introduction

JustFlipIt is super lightweight jQuery plugin designed to flip every HTML component. Based on CSS3 animations and Bootstrap 4 framework. JustFlipIt allows creating the backside of the flipped card dynamically using JavaScript code. The plugin is easy to customize with CSS styles.

Lightning fast jquery flip plugin

2. Plugin Overview

Library	justFlipIt
Author	SimHub
Licence	MIT Licence
Repository	GitHub
Dependencies	jQuery 1.3.1 or Latest version, Bootstrap 4.1.3 , Semantic UI and Retina Js

Demo

3. How to install and use JustFlipIt plugin

Below steps will show you how to install and use JustFlipIt plugin on your website.

1. load Bootstrap and jQuery dependencies and Retina library

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Retina Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.1.3/retina.min.js"></script>

2. card layout used Semantic UI, so we have to add all necessary CSS

<!-- Semantic ui -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/table.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/button.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/card.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/label.min.css">

3. after adding all dependencies we can start creating our first basic card that will contain an image to be flipped

<div class="flipWrapperImg">
    <div class="template">
        <div class="ui card" style="margin: 0 auto">
            <div class="image ">
                <img src="../helen.jpg" />
            </div>
        </div>
    </div>
</div>

4. to initialize the JustFlipIt plugin use the following script

  $(function() {
        setTimeout(() => {
          $('.click').justFlipIt({
            Click: true,
            Style: [{el: 'self', style: {margin: '0 auto', cursor: 'pointer'}}],
            Template:
              '<div class="ui card" style="margin: 0 auto">\n' +
              '      <div class="image ">\n' +
              '              <img src="img/stevie.jpg">' +
              '      </div>\n' +
              '                <div class="extra content" style="position: absolute;' +
              '                                                  background: black;' +
              '                                                  width: 100%;' +
              '                                                  top: 250px;">' +
              '                   <div style="color:white;text-align:center">$("[elementName]").justFlipIt(); </div>' +
              '                    </div>\n' +
              '                </div>\n' +
              '  </div> <br>',
          });
});

The plugin will attach CSS animation to given element and handle click event. To change backside of flipped card use 'Template' attribute during initialization.

4. Conclusion

In this article, we presented a jQuery plugin JustFlipIt designed to flip any HTML element on the website. You can use it to give your cards a second dimension and put more extra content on the backside.