Animated Infographics with HTML CSS & jQuery

A lightweight jQuery plugin to create touch enabled, animated infographics with HTML CSS & jQuery. It lets you to animate / slide contents around circle with smooth transitions.


Plugin Overview

Plugin: circle-slider (Animated Infographics)
Author: neyron163
Licence: MIT Licence
Published: April 19, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and jQuery Touch Swipe 1.6 or Latest

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 2.15 MB

How to Use Animated Infographics :

1. To getting started with Animated Infographics Circle Slider, load the jQuery and Touch Swipe into your HTML page.

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

<!-- jQuery Touch Swipe -->
<script src="http://delanosolutions.com/static/js/jquery.touchSwipe.js"></script>

2. Now, load the index‘s CSS and JavaScript file for circular animations and for basic styles.

<!-- Animated Infographics CSS -->
<link rel="stylesheet" href="./index.css">

<!-- Animated Infographics JS -->
<script src="./index.js"></script>

3. Create basic HTML structure like below for your infographic’s contents.

 <div id="businessCycle">
        <div class="grid no-padding">
          <svg viewBox="0 0 1380 60" class="svg-piece">
            <path id="arch" width="1380px" height="60px" fill="#f5f5f5" d="M0,0h1380c0,31.3,0,31.3,0,60C1139,24.1,914.4,0.2,690,0C464.7-0.2,239.5,23.4,0,60
                C0,45.3,0,45.3,0,0z"></path>
          </svg>
          <div class="flex__container">
            <div class="watch__block">
              <h2 class="title_h1" style="max-width: 300px;">Business Life Cycle</h2>
            </div>
            <div class="slider-circle">

                <div class="slide-item">
                  <div class="icon icon-rocket"></div>
                  <h3 class="rest__title_h4">1. Start-up</h3>
                  <p class="description_small">Starting a new business requires extensive planning and preparation. Many
                    new start-ups fail, simply because they don’t have the resources, infrastructure, or expertise to
                    ensure all the pillars to success are upheld.</p><a href="/startup-consulting/" class="link">Learn More</a>
                </div>
    
                <div class="slide-item">
                  <div class="icon icon-schedule"></div>
                  <h3 class="rest__title_h4">2. Growth</h3>
                  <p class="description_small">Growing your business involves managing the complexity of, not only sales
                    but, organizational structure, processes, and resources.</p><a href="/business-growth-strategies/"
                    class="link">Learn More</a>
                </div>
    
                <div class="slide-item">
                  <div class="icon icon-growth"></div>
                  <h3 class="rest__title_h4">3. Expansion</h3>
                  <p class="description_small">Your organization offers a valuable product or service in the marketplace,
                    and you have been able to reach a growth platform.</p><a href="/business-expansion/" class="link">Learn
                    More</a>
                </div>
    
                <div class="slide-item">
                  <div class="icon icon-portfolio"></div>
                  <h3 class="rest__title_h4">4. Maturity</h3>
                  <p class="description_small">Your business has expanded, and you are reaching the height of your success
                    in your market.</p><a href="/business-maturity/" class="link">Learn More</a>
                </div>
                
                <div class="slide-item">
                  <div class="icon icon-idea"></div>
                  <h3 class="rest__title_h4">5. Transition</h3>
                  <p class="description_small">Your business has expanded, and you are reaching the height of your success
                    in your market.</p><a href="/business-transition/" class="link">Learn More</a>
                </div>
                
                <div class="next"></div>

                </div>
              </div>
          </div>
        </div>

4. Finally, initialize the plugin in jQuery document ready function and done.

$(document).ready(function(){

   $('.slider-circle').wet({speed: 500});

});

Be the first to comment

Leave a Reply

Your email address will not be published.


*