Graphs - animated on scroll, responsive, data-driven

Developer
EricPorter
Size
7,477 Kb
Views
26,312
  1. Graphs - animated on scroll, responsive, data-driven Previews
  2. Graphs - animated on scroll, responsive, data-driven HTML Codes
  3. Graphs - animated on scroll, responsive, data-driven CSS Codes
  4. Graphs - animated on scroll, responsive, data-driven JS Codes

How do I make an graphs - animated on scroll, responsive, data-driven?

Scroll triggered with unlimited triggers on page. Graph dimensions are taken from the HTML data-percentage="" markup, so the data can be inline dynamic.. What is a graphs - animated on scroll, responsive, data-driven? How do you make a graphs - animated on scroll, responsive, data-driven? This script and codes were developed by EricPorter on 03 September 2022, Saturday.

Graphs - animated on scroll, responsive, data-driven Previews
IQ Test

Graphs - animated on scroll, responsive, data-driven - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Graphs - animated on scroll, responsive, data-driven</title> <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Animated Graphs</h1>
<h2>Scroll Triggered, Responsive, Data-driven</h2>
<p>&nbsp;</p>
<div class="chartBarsWrap"> <div class="chartBars chartBars1"> <ul class="numbers"> <li><span>100%</span></li> <li><span>80%</span></li> <li><span>60%</span></li> <li><span>40%</span></li> <li><span>20%</span></li> <li><span>0%</span></li> </ul> <ul class="bars"> <li> <span class="tooltip"> <span class="tooltipContent">Very important info that you should read!</span> <div data-percentage="52" class="bar greenBar trigger"></div> </span> <b>Alpha</b> </li> <li> <span class="tooltip"> <span class="tooltipContent">This one is trending well.</span> <div data-percentage="83" class="bar blueBar trigger"></div> </span> <b>Beta</b> </li> <li> <span class="tooltip"> <span class="tooltipContent">I like cheese!</span> <div data-percentage="94" class="bar orangeBar trigger"></div> </span> <b>Gamma</b> </li> <li> <span class="tooltip"> <span class="tooltipContent">Monkey's are funny!</span> <div data-percentage="64" class="bar purpleBar trigger"></div> </span> <b>Delta</b> </li> </ul> </div>
</div>
<p>Bacon ipsum do lor amet porchetta jowl jerky short loin, tri-tip flank c ow. Strip steak meat ball picanha t-bone pork loin filet mignon, pancetta jerky kielba sa sirloin ball t ip hamburger turkey pork belly ham hock. Chicken swine tail s pa re ribs,pork loin tongue picanha strip steak ribeye pancetta bresaola landjaeger flank ham shank. Picanha t-bone meatball, corned beef tail tri-tip flank capicola alcatra spare ribs. Flank tail pork loin pork belly sirloin tri-tip.</p>
<h3>Responsive? Yep.</h3>
<div class="chartBarsWrap"> <div class="chartBars chartBars2"> <ul class="numbers"> <li><span>100%</span></li> <li><span>80%</span></li> <li><span>60%</span></li> <li><span>40%</span></li> <li><span>20%</span></li> <li><span>0%</span></li> </ul> <ul class="bars"> <li> <div data-percentage="92" class="bar greenBar trigger"></div><b>Alpha</b></li> <li> <div data-percentage="33" class="bar orangeBar trigger"></div><b>Beta</b></li> <li> <div data-percentage="64" class="bar blueBar trigger"></div><b>Gamma</b></li> <li> <div data-percentage="44" class="bar purpleBar trigger"></div><b>Delta</b></li> </ul> </div>
</div>
<p>Bacon ipsum do lor amet porchetta jowl jerky short loin, tri-tip flank c ow. Strip steak meat ball picanha t-bone pork loin filet mignon, pancetta jerky kielba sa sirloin ball t ip hamburger turkey pork belly ham hock. Chicken swine tail s pa re ribs, pork loin tongue picanha strip steak ribeye pancetta bresaola landjaeger flank ham shank. Picanha t-bone meatball, corned beef tail tri-tip flank capicola alcatra spare ribs. Flank tail pork loin pork belly sirloin tri-tip. Bresaola salmi.</p>
<div class="box-piesite"> <ul> <li class="design"> <div class="piesite" id="pie_0" data-pie="82"></div> </li> <li class="usability"> <div class="piesite" id="pie_2" data-pie="55"></div> </li> <li class="creativity"> <div class="piesite" id="pie_1" data-pie="33"></div> </li> </ul>
</div>
<p>Bacon ipsum do lor amet porchetta jowl jerky short loin, tri-tip flank c ow. Strip steak meat ball picanha t-bone pork loin filet mignon, pancetta jerky kielba sa sirloin ball t ip hamburger turkey pork belly ham hock. Chicken swine tail s pa re ribs,pork loin tongue picanha strip steak ribeye pancetta bresaola landjaeger flank ham shank. Picanha t-bone meatball, corned beef tail tri-tip flank capicola alcatra spare ribs. Flank tail pork loin pork belly sirloin tri-tip..</p>
<!-- <p>&nbsp;</p> -->
<h3>Just add more bars, they sqeeze in. Sweet!</h3>
<div class="chartBarsWrap"> <div class="chartBars chartBars3"> <ul class="numbers"> <li><span>100%</span></li> <li><span>80%</span></li> <li><span>60%</span></li> <li><span>40%</span></li> <li><span>20%</span></li> <li><span>0%</span></li> </ul> <ul class="bars"> <li><div data-percentage="92" class="bar greenBar trigger"></div><b>Alpha</b></li> <li><div data-percentage="33" class="bar blueBar trigger"></div><b>Beta</b></li> <li><div data-percentage="64" class="bar orangeBar trigger"></div><b>Gamma</b></li> <li><div data-percentage="41" class="bar purpleBar trigger"></div><b>Delta</b></li> <li><div data-percentage="52" class="bar greenBar trigger"></div><b>Epsilon</b></li> <li><div data-percentage="58" class="bar blueBar trigger"></div><b>Zeta</b></li> <li><div data-percentage="65" class="bar orangeBar trigger"></div><b>Eta</b></li> <li><div data-percentage="91" class="bar purpleBar trigger"></div><b>Theta</b></li> <li><div data-percentage="32" class="bar greenBar trigger"></div><b>Iota</b></li> <li><div data-percentage="68" class="bar blueBar trigger"></div><b>Kappa</b></li> </ul> </div>
</div>
<p>Bacon ipsum do lor amet porchetta jowl jerky short loin, tri-tip flank c ow. Strip steak meat ball picanha t-bone pork loin filet mignon, pancetta jerky kielba sa sirloin ball t ip hamburger turkey pork belly ham hock. Chicken swine tail s pa re ribs,pork loin tongue picanha strip steak ribeye pancetta bresaola landjaeger flank ham shank.</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Graphs - animated on scroll, responsive, data-driven - Script Codes CSS Codes

.chartBarsWrap { padding-left: 40px; margin: 0 30px 0 20px;
}
.chartBars { position: relative; max-width: 600px; height: 300px; margin: 50px auto 100px;
}
.chartBars .bars { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; border-left: 1px solid #bbb; border-bottom: 1px solid #bbb; width: 100%; height: 100%; padding: 0; padding: 0 1%; margin: 0;
}
.chartBars .bars li { display: inline-block; -webkit-box-flex: 0; -ms-flex: 0 1 24%; flex: 0 1 24%; height: 100%; margin: 0; text-align: center; position: relative; font-size: 16px;
}
.chartBars .bars li .bar { width: 100%; background: #49E; position: absolute; bottom: 0; height: 0; overflow: hidden; outline: 2px solid transparent; -webkit-transition: 1.5s height cubic-bezier(0.6, 0.4, 0.4, 1); transition: 1.5s height cubic-bezier(0.6, 0.4, 0.4, 1);
}
.chartBars .bars li .bar:before { color: white; content: attr(data-percentage) '%'; position: absolute; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); top: 10%; font-size: 5vw;
}
.chartBars .bars li b { color: #eee; width: 100%; position: absolute; bottom: -2em; left: 0; text-align: center;
}
.chartBars .numbers { width: 50px; height: 100%; margin: 0; padding: 0; display: inline-block; position: absolute; left: -50px;
}
.chartBars .numbers li { text-align: right; padding-right: 1em; list-style: none; height: 59px; position: relative; font-size: 13px; bottom: 11px; right: -9px; color: #eee;
}
.chartBars .numbers li:after { content: "\00af"; position: relative; right: -5px; font-size: 20px; top: 7px; color: rgba(255, 255, 255, 0.34);
}
.chartBars .numbers li:first-of-type { height: 63px; margin-top: -1px;
}
.chartBars1 .bar { border-top-right-radius: 30px;
}
.chartBars2 { max-width: 350px;
}
.chartBars2 .bars { padding: 0;
}
.chartBars2 .bars li { -webkit-box-flex: 0; -ms-flex: 0 1 25%; flex: 0 1 25%;
}
.chartBars2 .bars li .bar { box-shadow: 0 0 20px #222;
}
.chartBars3 { background: rgba(255, 255, 255, 0.1); border-top: 1px solid #666; border-right: 1px solid #666;
}
.chartBars3 .bars { border-color: #666; padding: 0;
}
.chartBars3 .bars .bar { border-top-right-radius: 3px; border-top-left-radius: 3px;
}
.chartBars3 .bars .bar:before { font-size: 1.2em!important;
}
.bars li .bar.greenBar { background-color: #6B8E23; background: -webkit-radial-gradient(#99cb32, #6B8E23); background: radial-gradient(#99cb32, #6B8E23);
}
.bars li .bar.blueBar { background-color: #49E; background: -webkit-radial-gradient(#8abff4, #49E); background: radial-gradient(#8abff4, #49E);
}
.bars li .bar.orangeBar { background-color: orange; background: -webkit-radial-gradient(#ffc04d, #FFA500); background: radial-gradient(#ffc04d, #FFA500);
}
.bars li .bar.purpleBar { background-color: #6e46af; background: -webkit-radial-gradient(#9778c9, #6e46af); background: radial-gradient(#9778c9, #6e46af);
}
.box-piesite { text-align: center; font-size: 22px;
}
.piesite { position: relative; width: 1em; height: 1em; font-size: 10em; cursor: default;
}
.percent { position: absolute; top: 1.1em; left: .1em; width: 100%; font-size: .3em; text-align: center; z-index: 2;
}
.percent .symbol { font-size: .5em; vertical-align: top; opacity: .5;
}
.piesite > #slice { position: absolute; width: 1em; height: 1em; clip: rect(0px, 1em, 1em, 0.5em);
}
.piesite > #slice.gt50 { clip: rect(auto, auto, auto, auto);
}
.piesite > #slice > .pie { position: absolute; border: .1em solid #444; width: 1em; height: 1em; clip: rect(0em, 0.5em, 1em, 0em); border-radius: 0.5em;
}
li.design .piesite > #slice > .pie { border-color: #49E;
}
li.usability .piesite > #slice > .pie { border-color: #FFA500;
}
li.creativity .piesite > #slice > .pie { border-color: #6B8E23;
}
.piesite > #slice > .pie.fill { -webkit-transform: rotate(180deg) !important; transform: rotate(180deg) !important;
}
.piesite.fill > .percent { display: none;
}
.piesite:after { content: ''; display: block; position: absolute; top: .1em; left: .1em; width: .8em; height: .8em; background: #30303A; border-radius: 100%; z-index: 1;
}
.piesite:before { content: ''; display: block; position: absolute; width: 1em; height: 1em; border-radius: .5em; opacity: .5; z-index: 0;
}
.piesite:before { background: rgba(255, 255, 255, 0.1);
}
.box-piesite ul { padding: 0;
}
.box-piesite ul li { display: inline-block; margin: 10px 20px;
}
@media screen and (min-width: 600px) { .bar:before { font-size: 2em!important; } .chartBars3 .bar:before { font-size: 1.5em!important; }
}
.tooltip > .tooltipContent { display: block; position: absolute; background: none repeat scroll 0 0 #222; color: #F0B015; font-family: 'Helvetica'; font-size: 0.8em; font-weight: normal; line-height: 1.5em; padding: 16px 15px; min-width: 200px; max-width: 500px; top: 0; left: 50%; -webkit-transform: translate(-50%, -110%); transform: translate(-50%, -110%); margin-left: 0; opacity: 0; filter: alpha(opacity=0); text-align: center; z-index: 2; text-transform: none; -webkit-transition: all 0.3s ease; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
.tooltip:hover > .tooltipContent { opacity: 1; filter: alpha(opacity=100); z-index: 99; -webkit-transform: translate(-50%, -130%); transform: translate(-50%, -130%); -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.tooltip .tooltipContent:after { border-color: #222 rgba(0, 0, 0, 0); border-style: solid; border-width: 15px 15px 0; bottom: -15px; content: ""; display: block; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); position: absolute; width: 0;
}
* { box-sizing: border-box;
}
body { background: #30303A; font-family: 'Quicksand', sans-serif; color: #ddd;
}
h1,
h2,
h3 { text-align: center;
}
h1 { margin: 100px auto 0; color: #F0B015;
}
h2 { margin: 20px auto 0; font-size: 1.2em;
}
p { margin: 5vw auto; padding: 0 5vw; line-height: 2em; max-width: 60em;
}

Graphs - animated on scroll, responsive, data-driven - Script Codes JS Codes

var piesiteFired = 0;
$(document).ready(function() { var $win = $(window), $win_height = $(window).height(), // - A multiple of viewport height - The higher this number the sooner triggered. windowPercentage = ($(window).height() * .9) $win.on('scroll', scrollReveal); function scrollReveal() { var scrolled = $win.scrollTop(); // Bar Charts scroll activate, looking for .trigger class to fire. $(".trigger").each(function() { var $this = $(this), offsetTop = $this.offset().top; if (scrolled + windowPercentage > offsetTop || $win_height > offsetTop) { $(this).each(function(key, bar) { var percentage = $(this).data("percentage"); $(this).css("height", percentage + "%"); }); } else { // To keep them triggered, lose this block. $(this).each(function(key, bar) { $(this).css("height", 0); }); } }); // Pie Charts - scroll activate $(".piesite").each(function() { var $this = $(this), offsetTop = $this.offset().top; if (scrolled + windowPercentage > offsetTop || $win_height > offsetTop) { if(piesiteFired == 0) { timerSeconds = 3; timerFinish = new Date().getTime() + (timerSeconds * 1000); $(".piesite").each(function(a) { pie = $("#pie_" + a).data("pie"); timer = setInterval("stoppie(" + a + ", " + pie + ")", 0); }); piesiteFired = 1; } } else { // To keep them triggered, lose this block. $(".piesite").each(function() { piesiteFired = 0; }); } }); } scrollReveal();
});
///////////////////////////////////////
// The Pie Charts
///////////////////////////////////////
// The following code is originally from the excellent pen:
// https://codepen.io/StephenScaff/pen/VYaQGB by Stephen Scaff
// His does even coolor stuff, go check it out
var timer;
var timerFinish;
var timerSeconds;
function drawTimer(c, a) { $("#pie_" + c).html('<div class="percent"></div><div id="slice"' + (a > 50 ? ' class="gt50"' : "") + '><div class="pie"></div>' + (a > 50 ? '<div class="pie fill"></div>' : "") + "</div>"); var b = 360 / 100 * a; $("#pie_" + c + " #slice .pie").css({ "-moz-transform": "rotate(" + b + "deg)", "-webkit-transform": "rotate(" + b + "deg)", "-o-transform": "rotate(" + b + "deg)", transform: "rotate(" + b + "deg)" }); a = Math.floor(a * 100) / 100; arr = a.toString().split("."); intPart = arr[0]; $("#pie_" + c + " .percent").html('<span class="int">' + intPart + '</span>' + '<span class="symbol">%</span>')
}
function stoppie(d, b) { var c = (timerFinish - (new Date().getTime())) / 1000; var a = 100 - ((c / timerSeconds) * 100); a = Math.floor(a * 100) / 100; if (a <= b) { drawTimer(d, a) } else { b = $("#pie_" + d).data("pie"); arr = b.toString().split("."); $("#pie_" + d + " .percent .int").html(arr[0]); }
}
Graphs - animated on scroll, responsive, data-driven - Script Codes
Graphs - animated on scroll, responsive, data-driven - Script Codes
Home Page Home
Developer EricPorter
Username EricPorter
Uploaded September 03, 2022
Rating 4
Size 7,477 Kb
Views 26,312
Do you need developer help for Graphs - animated on scroll, responsive, data-driven?

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!

EricPorter (EricPorter) Script Codes
Name
CSS Vertical Centering Options
Image Slider - responsive, modular, autoplay
Text Image Masking
CSS Tabs
Back to Top Button - animated
CSS Buttons Set
Lazy Loading
Jive Turkey - css animation
Scroll Image Reveal effects
CSS Magnifying Glass
Create amazing web content 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!