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: January 17, 2024
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});

});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...