Skip to content

Instantly share code, notes, and snippets.

@LieutenantChips

LieutenantChips/gears.html

Created September 12, 2017 23:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LieutenantChips/7335855a8413d1e096bc46327581971b to your computer and use it in GitHub Desktop.
Save LieutenantChips/7335855a8413d1e096bc46327581971b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gears.html
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function createDivGear(color, strokeWidth, dashArray, cx, cy, r, time, rot){
var svg = d3.select("svg");
var circle = svg.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", r)
.style("stroke-dasharray", dashArray.join(','))
.style("stroke-width", strokeWidth)
.style("fill", "none")
.style("stroke", color)
.style("stroke-miterlimit", 10);
circle.append("animateTransform")
.attr("attributeType", "xml")
.attr("attributeName", "transform")
.attr("type", "rotate")
.attr("from", "0 " + cx + " " + cy)
.attr("to", (rot*360) + " " + cx + " " + cy)
.attr("dur", time + 's')
.attr("repeatCount", "indefinite");
}
function windowSize(){
var w = window.innerWidth;
var h = window.innerHeight;
return [h,w];
}
function makeWindowSize(sizeTo){
var x = windowSize();
$(sizeTo).css("height", "" + x[0].toString())
.css("width", "" + x[1].toString())
.css("z-index", "-1")
.css("position", "absolute");
}
function sizeButtons(){
var width = $(".buttonContainer").width();
var newWidth = width * 0.80;
var elementWidth = Math.round((newWidth-1)/4);
$(".element").css("width", elementWidth + "px");
}
$(document).ready(function() {
var svg = d3.select("svg")
.attr("width", "650px")
.attr("height", "250px");
var svgHeight = $("svg").height();
var svgWidth = $("svg").width();
var smallestLength = (svgHeight > svgWidth) ? svgWidth : svgHeight;
var biggestLength = (svgHeight < svgWidth) ? svgWidth : svgHeight;
var sizeScale = d3.scaleLinear().domain([0,smallestLength]).range([0, biggestLength*0.4]);
var dashArray = [12,12,12,12,12];
createDivGear("#19547c", sizeScale(20), dashArray, 0.85*svgWidth, 0.85*svgHeight, sizeScale(200) ,100,-1);
dashArray = [0];
createDivGear("#19547c", sizeScale(5), dashArray, 0.85*svgWidth, 0.85*svgHeight, sizeScale(219),200,-1);
dashArray = [0];
createDivGear("#19547c", sizeScale(10), dashArray, 0.85*svgWidth, 0.85*svgHeight, sizeScale(70),200,-1);
dashArray = [15];
createDivGear("#19547c", sizeScale(10), dashArray, 0.85*svgWidth, 0.85*svgHeight, sizeScale(79),75,1);
dashArray = [8, 140, 5];
createDivGear("#19547c", sizeScale(30), dashArray, 0.85*svgWidth, 0.85*svgHeight, sizeScale(150), 50,1);
dashArray = [12,12,12,12,12,12,12];
createDivGear("#19547c", sizeScale(3), dashArray, 0.5*svgWidth, 0.5*svgHeight, sizeScale(206), 40,-1);
dashArray = [20,20,20,20,20, 20, 20];
createDivGear("#19547c", sizeScale(3), dashArray, 0.5*svgWidth, 0.5*svgHeight, sizeScale(194), 30,1);
dashArray = [0];
createDivGear("#19547c", sizeScale(10), dashArray, 0.5*svgWidth, 0.5*svgHeight, sizeScale(150) ,100,1);
dashArray = [0];
createDivGear("#19547c", sizeScale(5), dashArray, 0.5*svgWidth, 0.5*svgHeight, sizeScale(130), 100, 1);
dashArray = [10, 10];
createDivGear("#19547c", sizeScale(10), dashArray, 0.5*svgWidth, 0.5*svgHeight, sizeScale(159), 100,-1);
dashArray = [8, 8, 8, 50];
createDivGear("#19547c", sizeScale(40), dashArray, 0.5*svgWidth, 0.5*svgHeight, sizeScale(40), 10,1);
dashArray = [0];
createDivGear("#19547c", sizeScale(5), dashArray, 0.95*svgWidth, 0.55*svgHeight, sizeScale(30), 100, 1);
dashArray = [20];
createDivGear("#19547c", sizeScale(1), dashArray, 0.95*svgWidth, 0.55*svgHeight, sizeScale(40), 15,-1);
dashArray = [5];
createDivGear("#19547c", sizeScale(4), dashArray, 0.95*svgWidth, 0.55*svgHeight, sizeScale(32), 20, 1);
dashArray = [10];
createDivGear("#19547c", sizeScale(10), dashArray, 0.99*svgWidth, -0.1*svgHeight, sizeScale(150), 15,-1);
dashArray = [0];
createDivGear("#19547c", sizeScale(10), dashArray, 0.99*svgWidth, -0.1*svgHeight, sizeScale(141), 15,-1);
dashArray = [0];
createDivGear("#19547c", sizeScale(5), dashArray, 0.99*svgWidth, -0.1*svgHeight, sizeScale(159), 15,-1);
dashArray = [10];
createDivGear("#19547c", sizeScale(10), dashArray, 0.1*svgWidth, 0.90*svgHeight, sizeScale(150), 15,-1);
dashArray = [0];
createDivGear("#19547c", sizeScale(10), dashArray, 0.1*svgWidth, 0.90*svgHeight, sizeScale(141), 15,-1);
dashArray = [0];
createDivGear("#19547c", sizeScale(5), dashArray, 0.1*svgWidth, 0.90*svgHeight, sizeScale(159), 15,-1);
dashArray = [10];
createDivGear("#19547c", sizeScale(10), dashArray, 0.0*svgWidth, 0.65*svgHeight, sizeScale(50), 15,-1);
dashArray = [10, 7, 2];
createDivGear("#19547c", sizeScale(10), dashArray, 0.0*svgWidth, 0.65*svgHeight, sizeScale(68), 15,-1);
dashArray = [0];
createDivGear("#19547c", sizeScale(10), dashArray, 0.0*svgWidth, 0.65*svgHeight, sizeScale(59), 15,-1);
dashArray = [0];
createDivGear("#19547c", sizeScale(5), dashArray, 0.0*svgWidth, 0.65*svgHeight, sizeScale(20), 15,-1);
sizeButtons();
});
var moveForce = 30; // max popup movement in pixels
var rotateForce = 20; // max popup rotation in deg
$(document).mousemove(function(e) {
var docX = $(document).width();
var docY = $(document).height();
var moveX = (e.pageX - docX/2) / (docX/2) * -moveForce;
var moveY = (e.pageY - docY/2) / (docY/2) * -moveForce;
var rotateY = (e.pageX / docX * rotateForce*2) - rotateForce;
var rotateX = -((e.pageY / docY * rotateForce*2) - rotateForce);
$('.popupBox')
.css('left', moveX+'px')
.css('top', moveY+'px')
.css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)');
});
function hidePopup(){
$(".popup").remove();
}
function popup(){
$("body").append("<div class='popup'></div>");
$(".popup")
.append("<span class='closeButton'>&#x292C;</span>")
.css("position", "absolute")
.css("height", "100%")
.css("width", "100%")
.css("background", "rgba(0,0,0,0.8)")
.attr("onClick", "hidePopup()")
.append("<div class='popupBox'></div>");
$(".popupBox")
.append("<span class='attentionSign'>&#9888;</span>")
.append("<div class='textBox'><p>This will start a <span style='color:#168193; font-weight:900;'>download</span>.</p><div>");
$(".textBox")
.append("<p> Would like to proceed?</p>")
.append("<p><span style='color:#ff9c00;' class='downloadYes'>Yes </span> | <span style='color:#ff9c00;'> No</span></p>");
}
function aboutPage(){
window.open("/vkTraining.htm");
}
</script>
<style>
.closeButton{
position:absolute;
margin-top:10px;
margin-left: 90%;
font-size:50px;
font-weight:900;
color:rgba(255,255,255,0.5);
}
.closeButton:hover{
color:rgba(255,255,255,0.8);
}
.textBox{
margin-top:-100px;
text-align: center;
border:solid;
border-radius: 10px;
border-width: 2px;
border-color: #ff9c00;
background:#0f0f11;
color: rgba(255,255,255,0.8);
height:120px;
width:100%;
}
.attentionSign{
color:#ff9c00;
font-size:300px;
height:300px;
width:300px;
}
.popupBox {
margin-top:0%;
margin-left:35%;
width:300px;
height:200px;
}
body{
background-color:#0f0f11;
}
.onTopOfSvg{
position: absolute;
padding-left: 30%;
padding-right: 30%;
padding-top: 10%;
text-align: center;
}
p.mainText {
font-size: 110%;
color: rgba(255,255,255,1);
}
.elementMargin {
display: inline-block;
color: transparent;
}
.element {
display: inline-block;
background-color: #ff9c00;
height: 40px;
/*width: 100px;*/
text-align: center;
padding: 1px;
margin-right: 5px;
margin-left: 5px;
transform: skew(15deg);
border-radius: 2px;
}
.element:hover {
background-color: rgba(255,156, 0, 0.7);
}
.buttonContainer{
margin:0 auto;
}
p.btnText{
padding: 1px;
color: white;
font-size: 20px;
font-weight: 900;
transform: skew(-15deg);
margin-top:6px;
}
.imgHolder{
margin-left:42%;
}
img{
height:70px;
width:70px;
}
</style>
</head>
<body>
<svg>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment