Velocity Example

Developer
Jon Christensen
Size
2,150 Kb
Views
44,528
  1. Velocity Example Previews
  2. Velocity Example HTML Codes
  3. Velocity Example CSS Codes
  4. Velocity Example JS Codes

How do I make an velocity example?

Just some simple Velocity animation.. What is a velocity example? How do you make a velocity example? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.

Velocity Example Previews
IQ Test

Velocity Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Velocity Example</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/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button type="button" id="run">RUN</button>
<div class="container">
<span id="ball1" class="ball"></span>
<span id="ball2" class="ball"></span>
<span class="text">This is some text</span>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js'></script>
<script src='http://cdn.jsdelivr.net/velocity/1.1.0/velocity.ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Velocity Example - Script Codes CSS Codes

html, body { height: 100%; overflow: hidden;
}
#run { position: fixed; top: 0; left: 0;
}
.ball { border-radius: 100%; background: red; display: block; height: 100px; width: 100px; position: absolute; top: 0; bottom: 0; margin: auto;
}
#ball1 { left: 1em;
}
#ball2 { right: 1em;
}
.container { width: 100%; text-align: center; height: 100%; padding: 1em; overflow: hidden; box-sizing: border-box;
}
.text { color: red; font-weight: bold; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; display: block; height: 1em;
}

Velocity Example - Script Codes JS Codes

function reset(){ $('.ball').velocity({ opacity: 0, translateY: '200%' }, { duration: 0 }); $('.text').velocity({ opacity: 0 }, 0);
}
function run(){ $('#ball1').velocity({ opacity: 1, translateY: [0, [400,15]] }, { duration: 1000 }); $('#ball2').velocity({ opacity: 1, translateY: [0, [400,15]] }, { duration: 1000, delay: 500}); $('.text').velocity({ opacity: 1 }, { duration: 300, delay: 1500 });
}
reset();
run();
$('#run').on('click', function(){	reset();	run();
});
Velocity Example - Script Codes
Velocity Example - Script Codes
Home Page Home
Developer Jon Christensen
Username JMChristensen
Uploaded August 03, 2022
Rating 3
Size 2,150 Kb
Views 44,528
Do you need developer help for Velocity Example?

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!

Jon Christensen (JMChristensen) Script Codes
Name
Simple CSS Loaders
Vue JS Filtering
Raphael SVG Circle Timer
Graphs and Snap.svg
3D Cube
SVG Animated Stroke Dash
Table Cell Slideshow
Panel Navigation
Animated gradient text
Section Diagonal Areas
Create amazing SEO content 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!