Dot Hopper - Pagination

Developer
Elliot Geno
Size
2,579 Kb
Views
38,456
  1. Dot Hopper - Pagination Previews
  2. Dot Hopper - Pagination HTML Codes
  3. Dot Hopper - Pagination CSS Codes
  4. Dot Hopper - Pagination JS Codes

How do I make an dot hopper - pagination?

Inspired by Chris Gannon's post! http://codepen.io/chrisgannon/details/xVOjZq. What is a dot hopper - pagination? How do you make a dot hopper - pagination? This script and codes were developed by Elliot Geno on 11 September 2022, Sunday.

Dot Hopper - Pagination Previews
IQ Test

Dot Hopper - Pagination - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dot Hopper - Pagination</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg viewBox="0 0 300 200">
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dot Hopper - Pagination - Script Codes CSS Codes

body{ margin:0; overflow:hidden; background:#222;
}
svg{ width:100%; height:100vh;
}

Dot Hopper - Pagination - Script Codes JS Codes

var numItems = 5;
var svg = document.querySelector("svg");
var spacing = 25;
var radius = 8;
var strokeWidth=2;
var index = 0;
var ringList=[];
var initX = (300-spacing*(numItems-1))*.5;
var dot = createElement("circle",{cx:initX+(index*spacing),cy:100,fill:"#fff",r:radius-(strokeWidth*2)});
svg.appendChild(dot);
paginate();
disable(ringList[index]);
TweenMax.set(dot,{fill:ringList[index].color});
gotoIndex(3);
function onSelect(e){ gotoIndex(e.target.index);
}
function gotoIndex(targetIndex){ var distance= Math.abs(targetIndex-index)*spacing*.5; var duration=Math.min((distance/spacing)*.2,.4); TweenMax.to(dot,.15,{scaleX:1.5,scaleY:.5,transformOrigin:"bottom",ease:Sine.easeOut,yoyo:true,repeat:1}); TweenMax.to(dot,duration,{delay:.175,fill:ringList[targetIndex].color,x:targetIndex*spacing,ease:Sine.easeInOut}); TweenMax.to(dot,duration*.5,{delay:.175,y:-distance,ease:Sine.easeOut,yoyo:true,repeat:1,onComplete:squish}); enable(ringList[index]); disable(ringList[targetIndex]); index=targetIndex;
}
function enable(target){ target.setAttribute("pointer-events","all");
}
function disable(target){ target.setAttribute("pointer-events","none");
}
function squish(){ TweenMax.to(dot,.15,{scaleX:1.5,scaleY:.75,transformOrigin:"bottom",ease:Sine.easeOut,yoyo:true,repeat:1});
}
function paginate() { for (var i = 0; i < numItems; i++) { var randomColor = "hsl("+(((i/(numItems))*360))+", 65%, 55%)"; var ring = createElement("circle", { cx: initX+(i * spacing), cy: "50%", fillOpacity: 0, r: radius, stroke: randomColor, cursor:"pointer", strokeWidth: strokeWidth, }); ring.index=i; ringList.push(ring); ring.color = randomColor; ring.addEventListener("click",onSelect); svg.appendChild(ring); }
}
function setAttributes(element, attributes) { var keyword, key; for (keyword in attributes) { key = keyword.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); element.setAttributeNS(keyword === "xlink:href" ? "http://www.w3.org/1999/xlink" : null, key, attributes[keyword]); }
}
function createElement(type, attributes) { var element = document.createElementNS("http://www.w3.org/2000/svg", type); setAttributes(element, attributes); return element;
}
Dot Hopper - Pagination - Script Codes
Dot Hopper - Pagination - Script Codes
Home Page Home
Developer Elliot Geno
Username pyrografix
Uploaded September 11, 2022
Rating 4.5
Size 2,579 Kb
Views 38,456
Do you need developer help for Dot Hopper - Pagination?

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!

Elliot Geno (pyrografix) Script Codes
Name
A Pen by Elliot Geno
Stained Glass
Gnat Attack
Cat Silhouette
Swarm
Geometric
Iris
Bullseye Game
Solar Explorer
Crash Loader
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!