Bouncing ball arc horizontal

Developer
Chris Wright
Size
4,602 Kb
Views
42,504
  1. Bouncing ball arc horizontal Previews
  2. Bouncing ball arc horizontal HTML Codes
  3. Bouncing ball arc horizontal CSS Codes
  4. Bouncing ball arc horizontal JS Codes

How do I make an bouncing ball arc horizontal?

Attempting to get a ball to bounce in an arc across the screen.This is something that I always found particularly easy in Flash an After Effects. In CSS it's a bit like trying to draw a semi-circle with a protractor made of bricks.. What is a bouncing ball arc horizontal? How do you make a bouncing ball arc horizontal? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.

Bouncing ball arc horizontal Previews
IQ Test

Bouncing ball arc horizontal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bouncing ball arc horizontal</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! */ *, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { font-size: 100%; line-height: 1.6em; font-weight: 400; font-family: Verdana; background-color: #f5cc3e;
}
.main-banner-stage:after, .main-banner:after, .main-banner-rotation:after { content: ""; display: table; clear: both;
}
.main-banner-stage { width: 48em; height: 20em; display: block; margin: 2em auto 0 auto; position: relative; overflow: hidden; border-left: 5px solid #b58f0c; border-right: 5px solid #b58f0c;
}
.main-banner { display: block; transform-origin: center center;
}
.main-banner h1 { display: block; font-size: 5em; font-weight: 700; line-height: 1em; text-align: left; width: 80%; margin: 0 auto; text-align: center;
}
.main-banner-rotation { margin-top: 5em; width: 25em; height: 25em; display: block; position: relative; transform: rotate(0deg); animation: outerArc 10s; animation-iteration-count: 1; animation-fill-mode: forwards; transform-origin: center right;
}
.main-banner-ball { width: 25em; height: 25em; position: relative; display: block; border-radius: 50%; animation-timing-function: ease-in; animation: bouncingArc 10s; animation-iteration-count: 1; animation-iteration-count: 1; animation-fill-mode: forwards; transform-style: preserve-3d; transform-origin: center center;
}
.main-banner-ball:after { width: 3em; height: 3em; content: ""; bottom: 44%; left: -7%; position: absolute; background-color: #963223; border-radius: 50%; display: block; animation: bouncingBall 10s; transform-origin: bottom center;
}
@keyframes bouncingBall { 0% { transform: scaleY(1) scaleX(1); transform-origin: top center; } 24.5% { transform: scaleY(1) scaleX(1); } 24.6% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(0.5) scaleX(0.9); } 32% { transform: scaleY(1) scaleX(1); } 100% { transform: scaleY(1) scaleX(1); }
}
@keyframes outerArc { 0% { transform: rotate(0deg) translateX(0em) translateY(0em); } 25% { transform: rotate(0deg) translateX(0em) translateY(0em); } 25.1% { transform: rotate(180deg) translateX(0em) translateY(0em); } 25.2% { transform: rotate(180deg) translateX(0em) translateY(0em); } 50% { transform: rotate(180deg) translateX(0em) translateY(0em); } 50.01% { transform: rotate(180deg) translateX(0em) translateY(0em); } 100% { transform: rotate(180deg) translateX(0em) translateY(0em); }
}
@keyframes bouncingArc { 0% { transform-origin: center center; transform: rotate(0deg); animation-timing-function: ease-in; } 25% { transform: rotate(180deg); animation-timing-function: ease-in; } 25.01% { transform: rotate(180deg); } 50% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="main-banner-stage">	<div class="main-banner-rotation">	<div class="main-banner-ball"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bouncing ball arc horizontal - Script Codes CSS Codes

*, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { font-size: 100%; line-height: 1.6em; font-weight: 400; font-family: Verdana; background-color: #f5cc3e;
}
.main-banner-stage:after, .main-banner:after, .main-banner-rotation:after { content: ""; display: table; clear: both;
}
.main-banner-stage { width: 48em; height: 20em; display: block; margin: 2em auto 0 auto; position: relative; overflow: hidden; border-left: 5px solid #b58f0c; border-right: 5px solid #b58f0c;
}
.main-banner { display: block; transform-origin: center center;
}
.main-banner h1 { display: block; font-size: 5em; font-weight: 700; line-height: 1em; text-align: left; width: 80%; margin: 0 auto; text-align: center;
}
.main-banner-rotation { margin-top: 5em; width: 25em; height: 25em; display: block; position: relative; transform: rotate(0deg); animation: outerArc 10s; animation-iteration-count: 1; animation-fill-mode: forwards; transform-origin: center right;
}
.main-banner-ball { width: 25em; height: 25em; position: relative; display: block; border-radius: 50%; animation-timing-function: ease-in; animation: bouncingArc 10s; animation-iteration-count: 1; animation-iteration-count: 1; animation-fill-mode: forwards; transform-style: preserve-3d; transform-origin: center center;
}
.main-banner-ball:after { width: 3em; height: 3em; content: ""; bottom: 44%; left: -7%; position: absolute; background-color: #963223; border-radius: 50%; display: block; animation: bouncingBall 10s; transform-origin: bottom center;
}
@keyframes bouncingBall { 0% { transform: scaleY(1) scaleX(1); transform-origin: top center; } 24.5% { transform: scaleY(1) scaleX(1); } 24.6% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(0.5) scaleX(0.9); } 32% { transform: scaleY(1) scaleX(1); } 100% { transform: scaleY(1) scaleX(1); }
}
@keyframes outerArc { 0% { transform: rotate(0deg) translateX(0em) translateY(0em); } 25% { transform: rotate(0deg) translateX(0em) translateY(0em); } 25.1% { transform: rotate(180deg) translateX(0em) translateY(0em); } 25.2% { transform: rotate(180deg) translateX(0em) translateY(0em); } 50% { transform: rotate(180deg) translateX(0em) translateY(0em); } 50.01% { transform: rotate(180deg) translateX(0em) translateY(0em); } 100% { transform: rotate(180deg) translateX(0em) translateY(0em); }
}
@keyframes bouncingArc { 0% { transform-origin: center center; transform: rotate(0deg); animation-timing-function: ease-in; } 25% { transform: rotate(180deg); animation-timing-function: ease-in; } 25.01% { transform: rotate(180deg); } 50% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
}

Bouncing ball arc horizontal - Script Codes JS Codes

//This is still in a very experimental stage - I haven't nailed it yet, still need to make the bounce look less crappy and fix up the easing/cushioning.
//I like to call this the shot-put technique.
//its an extension of what Lea Verou has covered in animating in a circular arc, except this is in semi circular arcs over a horizontal space.
//The components involved:
//3 animations
//1. Squishing ball, the initial arc, and a wider arc around that to rotate the arc itself to continue the animation
//the ball itself lives in the :after pseudo element
Bouncing ball arc horizontal - Script Codes
Bouncing ball arc horizontal - Script Codes
Home Page Home
Developer Chris Wright
Username chriswrightdesign
Uploaded July 12, 2022
Rating 3
Size 4,602 Kb
Views 42,504
Do you need developer help for Bouncing ball arc horizontal?

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!

Chris Wright (chriswrightdesign) Script Codes
Name
IPhone SVG
Background Noisy Radial Gradient
SVG Shadows
SVG Noise blended radial
Experiments with nth-of-type animation
SVG animate hamburger to cross
Timeline animation
Inverted shadow with fade
Grid - Row with minmax
SVG Noise over gradient Experiment
Create amazing love letters 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!