Example Infographic

Developer
Andy Hullinger
Size
3,882 Kb
Views
30,360
  1. Example Infographic Previews
  2. Example Infographic HTML Codes
  3. Example Infographic CSS Codes
  4. Example Infographic JS Codes

How do I make an example infographic?

Lots to explore here but note: 1.) Very little HTML 2.) CSS for layout with as "Parent" element has positioning explicitly declared. Then all the "Children" are position:absolute within it's boundaries.. What is a example infographic? How do you make a example infographic? This script and codes were developed by Andy Hullinger on 15 September 2022, Thursday.

Example Infographic Previews
IQ Test

Example Infographic - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Example Infographic</title> <meta name="viewport" content="width=device-width"> <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 id="infographic"> <p id="mdCloud" class="cloud med"><em>medium</em>cloud</p> <p id="lgCloud" class="cloud lrg"><em>large</em>cloud</p> <img id="rainbow" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/infogfx_rainbow.png"> <h1>Which Summer month<span>is Evanston&rsquo;s rainiest?</span></h1> <h2>August in Evanston brings nearly <em>5 inches</em> of rainfall!</h2> <img id="grass" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/infogfx_grass.png"> <button id="jun"></button> <button id="jul"></button> <button id="aug"></button> <ul id="rainData"> <li id="junData">3.86"</li> <li id="julData">3.5"</li> <li id="augData">4.84"</li> </ul>
</figure> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Example Infographic - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Amaranth:700);
* { margin: 0; padding: 0;
}
ul { list-style-type: none;
}
em { font-style: normal;
}
body { margin: 50px auto; width: 500px; font-family: 'Amaranth', sans-serif;
}
h1,
h2 { margin: 10px auto; width: 100%; text-align: center; text-shadow: 3px 3px 5px rgba(0, 0, 0, .5); letter-spacing: -2px; font-size: 44px; line-height: 44px;
}
h2 { color: #b2e7ff;
}
h1 { color: #f7da00;
}
span { display: block;
}
figure { position: relative;
}
figure p,
figure h1,
figure h2,
figure img,
figure button { position: absolute;
}
figure { overflow: hidden; width: 500px; height: 400px; background: #b2e7ff -webkit-linear-gradient(45deg, #30bfff 0%, transparent 100%); background: #b2e7ff linear-gradient(45deg, #30bfff 0%, transparent 100%);
}
#grass { bottom: 0; left: 0;
}
button { width: 93px; height: 93px; outline: none; border: none; background-color: transparent; cursor: pointer;
}
#jun { top: 285px; left: 40px; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/infogfx_flowerJun.png);
}
#jul { top: 300px; left: 210px; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/infogfx_flowerJul.png);
}
#aug { top: 270px; left: 380px; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/infogfx_flowerAug.png);
}
#rainData li { position: absolute; top: 230px; left: 200px; color: white; letter-spacing: -3px; font-size: 60px;
}
#rainbow { top: 110px; left: 30px; -webkit-transform-origin: bottom center; transform-origin: bottom center;
}
#lgCloud { top: 20px;
}
#mdCloud { top: 80px;
}
.cloud { background-color: white; color: transparent; font-size: 0;
}
.lrg { margin-top: 80px; width: 300px; height: 80px; border-top-left-radius: 50px; border-bottom-right-radius: 80px; border-bottom-left-radius: 50px;
}
.lrg::before { position: absolute; bottom: 0; left: 10%; width: 120px; height: 120px; border-radius: 50%; background-color: inherit; content: '';
}
.lrg::after { position: absolute; bottom: 10px; left: 33%; width: 150px; height: 150px; border-radius: 50%; background-color: inherit; content: '';
}
.lrg em { position: absolute; right: -10px; bottom: 0; width: 120px; height: 120px; border-radius: 50%; background-color: inherit;
}
.med { margin-top: 50px; width: 90px; height: 90px; border-radius: 50%;
}
.med::before { position: absolute; top: -10px; left: 120px; width: 80px; height: 80px; border-radius: 50%; background-color: inherit; content: '';
}
.med::after { position: absolute; top: -30px; left: 40px; width: 130px; height: 130px; border-radius: 50%; background-color: inherit; content: '';
}

Example Infographic - Script Codes JS Codes

//SETUP: Use TweenMax.set to move rainbow, answers, and clouds into initial starting positions
TweenMax.set("#lgCloud", {x: 500, alpha: .6});
TweenMax.set("#mdCloud", {x: 500, alpha: .6});
TweenMax.set("#rainbow", {rotation: -180});
TweenMax.set("#rainData li", {alpha: 0});
TweenMax.set("h2", {alpha: 0,y: -100});
//CLOUD LOOP: Use the special "-1" value for the "repeat:" property to keep the clouds in constant motion.
TweenMax.to("#lgCloud", 10, {x: -330,repeat: -1});
TweenMax.to("#mdCloud", 7, {x: -330,repeat: -1,repeatDelay: 1});
//INTRO: display the buttons and initial question
TweenMax.staggerFrom(["#jul", "#aug", "#jun"], 1, {delay: 1,scale: 0,rotation: -180,ease: Bounce.easeOut}, .5);
TweenMax.from("h1", .5, {delay: 3,y: -100,ease: Back.easeOut});
TweenMax.from('h1 span', .7, {y: -100,delay: 3.3,ease: Back.easeOut});
//FUNCTIONS defined to facilitate the interactive animations for each answer.
function showJune() { hideQuestion(); hideAnswer(); TweenMax.to("#rainbow", 1, {rotation: -50,ease: Linear.easeNone}); TweenMax.to("figure", 1, {backgroundColor: "#3489a8" }); TweenMax.to(".cloud", .5, {backgroundColor: "#666" }); TweenMax.to("#junData", 1, {alpha: 1,delay: .5});
}
function showJuly() { hideQuestion(); hideAnswer(); TweenMax.to("#rainbow", 1, {rotation: -62,ease: Linear.easeNone}); TweenMax.to("figure", 1, {backgroundColor: "#52b5d9"}); TweenMax.to(".cloud", .5, {backgroundColor: "#FFF"}); TweenMax.to("#julData", 1, {alpha: 1,delay: .5});
}
function showAugust() { hideQuestion(); TweenMax.to("h2", 1, {y: 0,alpha: 1,delay: 1.5,ease: Back.easeOut}); TweenMax.to('h2 em', .3, {delay: 2.5,color: 'white',repeat: 1,yoyo: false,repeatDelay: 2.5}); TweenMax.to("#rainbow", 1, {rotation: -20,ease: Linear.easeNone}); TweenMax.to("figure", 1, {backgroundColor: "#34466f"}); TweenMax.to(".cloud", .5, {backgroundColor: "#000"}); TweenMax.to("#augData", 1, {alpha: 1,delay: .5});
}
function hideQuestion() { TweenMax.to("h1", 1, {y: -50, alpha: 0, ease: Back.easeIn});
}
function hideAnswer() { TweenMax.to("h2", 1, {y: -50, alpha: 0, ease: Back.easeIn});
}
function startSpin() { TweenMax.to($(this), 1, {rotation: -360,repeat: -1, ease:Linear.easeNone});
}
function stopSpin() { TweenMax.to("#rainData li", .5, {alpha: 0}); TweenMax.to($(this), .5, {rotation: 0});
}
//jQuery buttons for each flower
$("#jun").click(showJune);
$("#jul").click(showJuly);
$("#aug").click(showAugust);
$("#jun").hover(startSpin, stopSpin);
$("#jul").hover(startSpin, stopSpin);
$("#aug").hover(startSpin, stopSpin);
Example Infographic - Script Codes
Example Infographic - Script Codes
Home Page Home
Developer Andy Hullinger
Username andyhullinger
Uploaded September 15, 2022
Rating 3
Size 3,882 Kb
Views 30,360
Do you need developer help for Example 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
GSAP Animation with TweenMax
Rolling Stone Example
Semantic HTML for animated menus
Mageractive Class 1
CSS type and layout - discrete elements
Banner Example
Example Responsive Resume
Clean SVG Map of USA
Simple animated infographic
Presentation Template with Animation
Create amazing blog posts 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!