A Pen by rodolpheb

Thumbnail
This awesome code was written by rodolpheb, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rodolpheb ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  rodolpheb</title>
  
  
  
      <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! */
      * {	margin: 0; padding: 0 }		
body {background: #eee;}

#stage {
			width: 300px;
			height: 300px;
			margin: 50px auto;
			background: #fff;
			position: relative;
			overflow: hidden;
			background: url("https://dl.dropboxusercontent.com/u/12132497/12-principles/stage2.png") ;
		}	
 .ball, .shadow {
			width: 50px;
			height: 50px;
		  position: absolute;
			bottom: 25px;
			left: 225px;
			border-radius: 50px;
			z-index: 2;
			-webkit-animation: ball-y 2s;
			-webkit-transform-origin: 50% 50%;
}
.tennis { -webkit-animation: spin 2.5s; } 		
.ball-arc {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			-webkit-animation: ball-x 2.5s cubic-bezier(0, 0, 0.35, 1);
			}		
.shadow {
			background: #000;
			bottom: 0;
			z-index: 1;			
			-webkit-animation: none;
			-webkit-transform: scaleY(0.25);			
		}
@-webkit-keyframes spin{
  0%  { -webkit-transform: rotate(-180deg);}
  100%{ -webkit-transform: rotate(360deg); }
  
}		
@-webkit-keyframes ball-x {
			0% { -webkit-transform: translateX(-275px); }
			100% { -webkit-transform: translateX(0px); }
		}		
@-webkit-keyframes ball-y {
			0% { -webkit-transform: translateY(-205px); -webkit-animation-timing-function: ease-in; }
			
			40% { -webkit-transform: translateY(-100px); -webkit-animation-timing-function: ease-in; }
			65% { -webkit-transform: translateY(-52px); -webkit-animation-timing-function: ease-in; }
			82% { -webkit-transform: translateY(-25px); -webkit-animation-timing-function: ease-in; }
			92% { -webkit-transform: translateY(-12px); -webkit-animation-timing-function: ease-in; }
			
			25%, 55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px); -webkit-animation-timing-function: ease-out; }
		}
		

.trigger {
			background: tomato;
			font-family: helvetica, sans-serif;
			font-size: 0.7em;
			font-weight: bold;
			text-decoration: none;
			text-transform: lowercase;
			text-align: center;
			color: white;
			padding: 10px;
			border-radius: 8px;
			display: block;
			margin: 0 auto;
			width: 100px;
      transition: background, color, 0.2s ease;		
		}
.trigger:active {
			position: relative;
			top: 2px;
			transition: 0.1s;
		}
.trigger:hover{
  background: white;
  color: tomato;
}
		
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div id="stage" class="running">		
		<div class="ball-arc">
			<div class="shadow"></div>
		</div>
		
		<div class="ball-arc">
			<div class="ball">
			  <img class="tennis" src="https://dl.dropboxusercontent.com/u/12132497/12-principles/ball.png">
			</div>
		</div>
		
		</div>
<a class="trigger" href="#">Restart Animation</a>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/rodolpheb/a-pen-by-rodolpheb-gfkvE */
* {	margin: 0; padding: 0 }		
body {background: #eee;}

#stage {
			width: 300px;
			height: 300px;
			margin: 50px auto;
			background: #fff;
			position: relative;
			overflow: hidden;
			background: url("https://dl.dropboxusercontent.com/u/12132497/12-principles/stage2.png") ;
		}	
 .ball, .shadow {
			width: 50px;
			height: 50px;
		  position: absolute;
			bottom: 25px;
			left: 225px;
			border-radius: 50px;
			z-index: 2;
			-webkit-animation: ball-y 2s;
			-webkit-transform-origin: 50% 50%;
}
.tennis { -webkit-animation: spin 2.5s; } 		
.ball-arc {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			-webkit-animation: ball-x 2.5s cubic-bezier(0, 0, 0.35, 1);
			}		
.shadow {
			background: #000;
			bottom: 0;
			z-index: 1;			
			-webkit-animation: none;
			-webkit-transform: scaleY(0.25);			
		}
@-webkit-keyframes spin{
  0%  { -webkit-transform: rotate(-180deg);}
  100%{ -webkit-transform: rotate(360deg); }
  
}		
@-webkit-keyframes ball-x {
			0% { -webkit-transform: translateX(-275px); }
			100% { -webkit-transform: translateX(0px); }
		}		
@-webkit-keyframes ball-y {
			0% { -webkit-transform: translateY(-205px); -webkit-animation-timing-function: ease-in; }
			
			40% { -webkit-transform: translateY(-100px); -webkit-animation-timing-function: ease-in; }
			65% { -webkit-transform: translateY(-52px); -webkit-animation-timing-function: ease-in; }
			82% { -webkit-transform: translateY(-25px); -webkit-animation-timing-function: ease-in; }
			92% { -webkit-transform: translateY(-12px); -webkit-animation-timing-function: ease-in; }
			
			25%, 55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px); -webkit-animation-timing-function: ease-out; }
		}
		

.trigger {
			background: tomato;
			font-family: helvetica, sans-serif;
			font-size: 0.7em;
			font-weight: bold;
			text-decoration: none;
			text-transform: lowercase;
			text-align: center;
			color: white;
			padding: 10px;
			border-radius: 8px;
			display: block;
			margin: 0 auto;
			width: 100px;
      transition: background, color, 0.2s ease;		
		}
.trigger:active {
			position: relative;
			top: 2px;
			transition: 0.1s;
		}
.trigger:hover{
  background: white;
  color: tomato;
}
		

/*Downloaded from https://www.codeseek.co/rodolpheb/a-pen-by-rodolpheb-gfkvE */
$(document).ready(function() {
		    $('#stage').addClass('running');
		    
		    $('.trigger').click(function() {
		        $('#stage').removeClass('running').delay(10).queue(function(next){
		            $(this).addClass('running');
		            next();
		        });
		        return false;
		    });
		});

Comments