Burton Ball

Developer

Size

4,499 Kb

Views

103,224

Burton Ball Previews
Burton Ball HTML Codes
Burton Ball CSS Codes
Burton Ball JS Codes

How do I make an burton ball?

Note: Codepen's preview is a bit wonky with animations on pseudoelements.. What is a burton ball? How do you make a burton ball? This script and codes were developed by Noah Blon on 24 June 2022, Friday.

Burton Ball Previews

Burton Ball - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Burton Ball</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { height: 100%;
}
body { background: #fff;
}
#stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; margin: auto; width: 300px; height: 300px; border-radius: 50%; perspective: 9999px; transform-style: preserve-3d;
}
#stage:before { content: ''; position: absolute; left: 43px; width: calc(70% + 9px); height: 15%; top: 375px; border-radius: 50%; background: rgba(0, 0, 0, 0.1);
}
#stage:after { content: ''; display: block; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 -18.75px 0 rgba(0, 0, 0, 0.15) inset, 0 -75px 75px rgba(0, 0, 0, 0.25) inset; border: 7.5px solid #fff; transform: translateZ(300px);
}
#ball { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; margin: auto; width: 300px; height: 300px; transform: rotateY(45deg); transform-style: preserve-3d;
}
.ring { display: block; width: 100%; height: 100%; position: absolute; top: 0; transform: translateZ(180px); animation: doit 5000ms infinite ease-in-out forwards;
}
.ring:after { width: 100%; height: 100%; position: absolute; border-radius: 50%; background: #222; content: ''; transform: scale(0); animation: toit 2500ms infinite ease-in-out alternate;
}
.ring:nth-child(even):after { background: #fff;
}
.ring:nth-child(1),
.ring:nth-child(1):after { animation-delay: -416.66667ms;
}
.ring:nth-child(2),
.ring:nth-child(2):after { animation-delay: -833.33333ms;
}
.ring:nth-child(3),
.ring:nth-child(3):after { animation-delay: -1250ms;
}
.ring:nth-child(4),
.ring:nth-child(4):after { animation-delay: -1666.66667ms;
}
.ring:nth-child(5),
.ring:nth-child(5):after { animation-delay: -2083.33333ms;
}
.ring:nth-child(6),
.ring:nth-child(6):after { animation-delay: -2500ms;
}
.ring:nth-child(7),
.ring:nth-child(7):after { animation-delay: -2916.66667ms;
}
.ring:nth-child(8),
.ring:nth-child(8):after { animation-delay: -3333.33333ms;
}
.ring:nth-child(9),
.ring:nth-child(9):after { animation-delay: -3750ms;
}
.ring:nth-child(10),
.ring:nth-child(10):after { animation-delay: -4166.66667ms;
}
.ring:nth-child(11),
.ring:nth-child(11):after { animation-delay: -4583.33333ms;
}
.ring:nth-child(12),
.ring:nth-child(12):after { animation-delay: -5000ms;
}
@keyframes doit { 100% { transform: translateZ(-172.5px); }
}
@keyframes toit { 100% { transform: scale(1); }
}
*, *:after { animation-play-state: running !important;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="stage"> <div id="ball"> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Burton Ball - Script Codes CSS Codes

html, body { height: 100%;
}
body { background: #fff;
}
#stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; margin: auto; width: 300px; height: 300px; border-radius: 50%; perspective: 9999px; transform-style: preserve-3d;
}
#stage:before { content: ''; position: absolute; left: 43px; width: calc(70% + 9px); height: 15%; top: 375px; border-radius: 50%; background: rgba(0, 0, 0, 0.1);
}
#stage:after { content: ''; display: block; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 -18.75px 0 rgba(0, 0, 0, 0.15) inset, 0 -75px 75px rgba(0, 0, 0, 0.25) inset; border: 7.5px solid #fff; transform: translateZ(300px);
}
#ball { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; margin: auto; width: 300px; height: 300px; transform: rotateY(45deg); transform-style: preserve-3d;
}
.ring { display: block; width: 100%; height: 100%; position: absolute; top: 0; transform: translateZ(180px); animation: doit 5000ms infinite ease-in-out forwards;
}
.ring:after { width: 100%; height: 100%; position: absolute; border-radius: 50%; background: #222; content: ''; transform: scale(0); animation: toit 2500ms infinite ease-in-out alternate;
}
.ring:nth-child(even):after { background: #fff;
}
.ring:nth-child(1),
.ring:nth-child(1):after { animation-delay: -416.66667ms;
}
.ring:nth-child(2),
.ring:nth-child(2):after { animation-delay: -833.33333ms;
}
.ring:nth-child(3),
.ring:nth-child(3):after { animation-delay: -1250ms;
}
.ring:nth-child(4),
.ring:nth-child(4):after { animation-delay: -1666.66667ms;
}
.ring:nth-child(5),
.ring:nth-child(5):after { animation-delay: -2083.33333ms;
}
.ring:nth-child(6),
.ring:nth-child(6):after { animation-delay: -2500ms;
}
.ring:nth-child(7),
.ring:nth-child(7):after { animation-delay: -2916.66667ms;
}
.ring:nth-child(8),
.ring:nth-child(8):after { animation-delay: -3333.33333ms;
}
.ring:nth-child(9),
.ring:nth-child(9):after { animation-delay: -3750ms;
}
.ring:nth-child(10),
.ring:nth-child(10):after { animation-delay: -4166.66667ms;
}
.ring:nth-child(11),
.ring:nth-child(11):after { animation-delay: -4583.33333ms;
}
.ring:nth-child(12),
.ring:nth-child(12):after { animation-delay: -5000ms;
}
@keyframes doit { 100% { transform: translateZ(-172.5px); }
}
@keyframes toit { 100% { transform: scale(1); }
}
*, *:after { animation-play-state: running !important;
}

Burton Ball - Script Codes JS Codes

// js for mouse following
var RADIUS = 150;
var MAX_ANGLE = 45;
var SELECTOR = 'ball';
var ball = document.getElementById(SELECTOR);
var xOrigin, yOrigin, x, y, rafId;
function calculateYRotation(x,y) { var distance = Math.sqrt(x*x + y*y); return distance < RADIUS ? distance / RADIUS * MAX_ANGLE : MAX_ANGLE;
}
function calculateZRotation(x,y) { var radians = Math.atan2(y,x); return radians/Math.PI * 180;
}
var setOrigins = _.debounce(function(e) { xOrigin = window.innerWidth / 2; yOrigin = window.innerHeight / 2;
}, 500);
function rotateBall(e) {	x = e.pageX - xOrigin;	y = e.pageY - yOrigin;
};
function updateStyle(){ var yDeg = calculateYRotation(x,y); var zDeg = calculateZRotation(x,y); ball.style.cssText = '-webkit-transform: rotateZ('+zDeg+'deg) rotateX(0deg) rotateY('+yDeg+'deg);-moz-transform: rotateZ('+zDeg+'deg) rotateX(0deg) rotateY('+yDeg+'deg);transform: rotateZ('+zDeg+'deg) rotateX(0deg) rotateY('+yDeg+'deg);'; raf = requestAnimationFrame(updateStyle);
}
setOrigins();
window.addEventListener('resize', setOrigins, false);
window.addEventListener('mousemove', rotateBall);
window.onmouseover = function(event){ raf = requestAnimationFrame(updateStyle);
}
window.onmouseout = function(event){ cancelAnimationFrame(raf);
}

Home Page	Home
Developer	Noah Blon
Username	noahblon
Uploaded	June 24, 2022
Rating	4.5
Size	4,499 Kb
Views	103,224

Do you need developer help for Burton Ball?

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!

Noah Blon (noahblon) Script Codes

Name	Size
CSS Jellyfish	5,609 Kb
Juggle	3,302 Kb
An Intro to SVG Animation with SMIL - Example 1	1,987 Kb
Colored SVG background-image - Filter Method	2,392 Kb
Glitch Pop	4,644 Kb
Sass-managed SVG Background-Image icons	3,926 Kb
Responsive Image Grid using SVG wrappers	3,859 Kb
Cross-Browser Range Input With Solid Lower Fill	1,912 Kb
Colored SVG background-image - Mask Method	2,328 Kb
Carousel	3,349 Kb

Create amazing captions 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!

Similar Scripts & Codes

Name	Username	Size
A Pen by Alexandru Pora	Axpro	1,615 Kb
React TODO	Enieste	3,320 Kb
Ionic Infinite outside ion-content with ion-pane	Felquis	3,117 Kb
Countdown with Rings	Ewganoel	2,490 Kb
V.35 The Monolith Update - Hero Release Notes	Jordan	12,045 Kb
Super Discount	Orrinward	3,225 Kb
Fellowship of the Ring	Aussieyang	2,639 Kb
Slick Slider	Wearebold	5,913 Kb
A Pen by Gregory Potdevin	GregoryPotdevin	1,713 Kb
CSS eye follow	Pedrocampos	2,592 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!