Simple animated infographic

Developer
Andy Hullinger
Size
2,803 Kb
Views
36,432
  1. Simple animated infographic Previews
  2. Simple animated infographic HTML Codes
  3. Simple animated infographic CSS Codes
  4. Simple animated infographic JS Codes

How do I make an simple animated infographic?

What is a simple animated infographic? How do you make a simple animated infographic? This script and codes were developed by Andy Hullinger on 15 September 2022, Thursday.

Simple animated infographic Previews
IQ Test

Simple animated infographic - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>simple animated infographic</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <figure> <ol> <li><p>72M</p></li> <li><p>70M</p></li> <li><p>68M</p></li> <li><p>66M</p></li> <li><p>64M</p></li> <li><p>62M</p></li> <li><p>60M</p></li> <li><p>58M</p></li> <li><p>56M</p></li> <li><p>54M</p></li> <li><p>55M</p></li> </ol> <div class="democrat"></div> <div class="republican"></div> <nav> <button id="08btn">2008</button> <button id="12btn">2012</button> <button id="16btn">2016</button> </nav> <h1><span>Voting Demographics?</span>It&rsquo;s not who votes, but how many of us do.</h1>
</figure> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple animated infographic - Script Codes CSS Codes

/* ALWAYS USE A RESET */
* { margin: 0; padding: 0; box-sizing: border-box;
}
figure { font-family: Arial; width: 600px; height: 360px;
}
li { border-bottom: 1px solid silver;
}
/* FIRST! create a parent/child positioning context */
figure { position: relative;
}
ol,
div,
nav,
h1 { position: absolute;
}
/* Then, layout the child elements inside the parent container*/
ol { width: 100%; height: 100%; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
h1 { width: 100%; text-align: center; font-size: 48px; line-height: 1; padding: 60px; top: 50px;
}
div { width: 25%; height: 100%; top: 0; -webkit-transform: scaleY(.9); transform: scaleY(.9); -webkit-transform-origin: bottom center; transform-origin: bottom center;
}
div:nth-of-type(1) { left: 20%;
}
div:nth-of-type(2) { left: 60%;
}
nav { width: 80%; left: 80px; top: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around;
}
/* Add any art direction and design details */
h1 span { font-weight: bold; text-transform: uppercase;
}
ol { padding: 20px 40px 0 80px; color: silver;
}
p { position: relative; font-size: 12px; left: -30px; top: 6px;
}
.democrat { background-color: rgba(0, 0, 255, .3);
}
.republican { background-color: rgba(255, 0, 0, .3);
}
button { padding: 10px 30px; font-size: 18px;
}
.hilite { background-color: black; color: white;
}
/* codepen prettifying */
body { height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}

Simple animated infographic - Script Codes JS Codes

// 2008 d=.78 r=.36
// 2012 d=.63 r=.4
// 2016 d=.33 r=.31
TweenMax.from('h1', 1, {delay:.5, opacity:0, y:'+=30'});
TweenMax.from('.democrat, .republican', 1, {delay:2, scaleY:0, ease:Power2.easeOut});
TweenMax.to('h1', .5, {delay:5, opacity:0});
function show2008data(){ //2008 results TweenMax.to('.democrat', 2, {scaleY:.78}); TweenMax.to('.republican', 2, {scaleY:.36});
}
function show2012data(){ //2012 results TweenMax.to('.democrat', 2, {scaleY:.63}); TweenMax.to('.republican', 2, {scaleY:.4});
}
function show2016data(){ //2012 results TweenMax.to('.democrat', 2, {scaleY:.33}); TweenMax.to('.republican', 2, {scaleY:.31});
}
//$(elem).hover(func,func);
$('#08btn').click(show2008data);
$('#12btn').click(show2012data);
$('#16btn').click(show2016data);
Simple animated infographic - Script Codes
Simple animated infographic - Script Codes
Home Page Home
Developer Andy Hullinger
Username andyhullinger
Uploaded September 15, 2022
Rating 3
Size 2,803 Kb
Views 36,432
Do you need developer help for Simple animated infographic?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Hullinger (andyhullinger) Script Codes
Name
Presentation Template with Animation
Mageractive Class 1
Solved By Flexbox - an excerpt
A Pen by Andy Hullinger
Simple Parallax ala Nike Better World
Banner Example
Simple example infographic pen
Example Infographic
Simple photo captions
MFA iteration example
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!