Juggle
How do I make an juggle?
What is a juggle? How do you make a juggle? This script and codes were developed by Noah Blon on 24 June 2022, Friday.
Juggle - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Juggle</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ #container { width: 200px; height: 50px; position: absolute; top: calc(50% + 50px); left: calc(50% + 50px); opacity: 0; animation: fadeIn 1s 1; animation-fill-mode: forwards;
}
.wrap { animation: translateX 1000ms infinite ease-in-out alternate; position: absolute;
}
.ball { width: 50px; height: 50px; box-shadow: 0 -5px 0 rgba(0, 0, 0, 0.15) inset; background-color: #397BF9; border-radius: 50%; animation: translateY 500ms infinite ease-in-out alternate; border: 2px solid black;
}
.wrap:after { content: ''; width: 50px; height: 7.5px; background: #eee; position: absolute; bottom: 0; top: 70px; border-radius: 50%; animation: scale 500ms infinite ease-in-out alternate;
}
#wrap2, #ball2, #wrap2:after { animation-delay: -400ms;
}
#wrap3, #ball3, #wrap3:after { animation-delay: -800ms;
}
#wrap4, #ball4, #wrap4:after { animation-delay: -1200ms;
}
#wrap5, #ball5, #wrap5:after { animation-delay: -1600ms;
}
#ball2 { background-color: #F4B400;
}
#ball3 { background-color: #EEEEEE;
}
#ball4 { background-color: #00A656;
}
#ball5 { background-color: #E3746B;
}
@keyframes translateX { 100% { transform: translateX(-150px); }
}
@keyframes translateY { 100% { transform: translateY(-187.5px); }
}
@keyframes scale { 100% { transform: scale(1.15); }
}
@keyframes fadeIn { 100% { opacity: 1; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="container"> <div class='wrap' id='wrap1'> <div class='ball' id='ball1'></div> </div> <div class='wrap' id='wrap2'> <div class='ball' id='ball2'></div> </div> <div class='wrap' id='wrap3'> <div class='ball' id='ball3'></div> </div> <div class='wrap' id='wrap4'> <div class='ball' id='ball4'></div> </div> <div class='wrap' id='wrap5'> <div class='ball' id='ball5'></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Juggle - Script Codes CSS Codes
#container { width: 200px; height: 50px; position: absolute; top: calc(50% + 50px); left: calc(50% + 50px); opacity: 0; animation: fadeIn 1s 1; animation-fill-mode: forwards;
}
.wrap { animation: translateX 1000ms infinite ease-in-out alternate; position: absolute;
}
.ball { width: 50px; height: 50px; box-shadow: 0 -5px 0 rgba(0, 0, 0, 0.15) inset; background-color: #397BF9; border-radius: 50%; animation: translateY 500ms infinite ease-in-out alternate; border: 2px solid black;
}
.wrap:after { content: ''; width: 50px; height: 7.5px; background: #eee; position: absolute; bottom: 0; top: 70px; border-radius: 50%; animation: scale 500ms infinite ease-in-out alternate;
}
#wrap2, #ball2, #wrap2:after { animation-delay: -400ms;
}
#wrap3, #ball3, #wrap3:after { animation-delay: -800ms;
}
#wrap4, #ball4, #wrap4:after { animation-delay: -1200ms;
}
#wrap5, #ball5, #wrap5:after { animation-delay: -1600ms;
}
#ball2 { background-color: #F4B400;
}
#ball3 { background-color: #EEEEEE;
}
#ball4 { background-color: #00A656;
}
#ball5 { background-color: #E3746B;
}
@keyframes translateX { 100% { transform: translateX(-150px); }
}
@keyframes translateY { 100% { transform: translateY(-187.5px); }
}
@keyframes scale { 100% { transform: scale(1.15); }
}
@keyframes fadeIn { 100% { opacity: 1; }
}
![Juggle - Script Codes](http://shots.codepen.io/noahblon/pen/guFvw-512.jpg)
Developer | Noah Blon |
Username | noahblon |
Uploaded | June 24, 2022 |
Rating | 4.5 |
Size | 3,302 Kb |
Views | 76,912 |
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!
Name | Size |
9 Pens | 3,350 Kb |
An Intro to SVG Animation with SMIL - Example 1 | 1,987 Kb |
CSS Jellyfish | 5,609 Kb |
3D CSS Text with Perspective | 4,044 Kb |
Burton Ball | 4,499 Kb |
Sass-managed SVG Background-Image icons | 3,926 Kb |
Free Radicals | 33,329 Kb |
Responsive Image Grid using SVG wrappers | 3,859 Kb |
SVG Christmas Light Icon Animated with CSS | 2,224 Kb |
Carousel | 3,349 Kb |
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!
Name | Username | Size |
3D flipping card | Ssaakkaa | 2,238 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Responsive Boxes without Images | Andymcfee | 4,120 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
404 Error Page | WebSonick | 3,203 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
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!