Velocity Sequence

In this example below you will see how to do a Velocity Sequence with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by JLCarmona, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JLCarmona ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Velocity Sequence</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="circleBase type1">1</div>
<div class="circleBase type2">2</div>
<div class="circleBase type3">3</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2/velocity.ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/JLCarmona/velocity-sequence-aBbEYZ */
.circleBase {
position: absolute; 
    border-radius: 50%;
text-align: center;
}
.type1 {
    width: 50px;
    height: 50px;
    background: yellow;
    border: 3px solid red;
  z-index:10;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
  z-index:100;
}
.type3 {
    width: 50px;
    height: 50px;
    background: aqua;
    border: 3px solid blue;
  z-index:200;
}

/*Downloaded from https://www.codeseek.co/JLCarmona/velocity-sequence-aBbEYZ */
/* jquery.js */
/* velocity.js */
/* velocity.ui.js */

'use strict';
var $type1, $type2, $type3, w, h, ow, oh;

$type1 = $("div").eq(0);
$type2 = $("div").eq(1);
$type3 = $("div").eq(2);
w = window.innerWidth;
h = window.innerHeight;
ow = window.outerWidth; //including toolbars and status bar etc.
oh = window.outerHeight;

var mySequence = [
    { e: $type1, p: {
      translateX: w-$type1.width(),
      //translateX: "800",
      scale: "0.5",
    } },
    { e: $type2, p: {
      translateX: w-$type2.width(),
      scale: "0.5",
    } },
    { e: $type3, p: {
      translateX: w-$type3.width(), 
      scale: "0.5",
    },options: { 
      sequenceQueue: false
    } },
    { e: $type3, p: {
      translateY: h-$type3, 
    } },
    { e: $type2, p: {
      translateY: h-$type2.height(),
    } },
    { e: $type1, p: {
      translateY: h-$type1.height(),
      //scale:"1" 
    } }
  
  ];

$.Velocity.RunSequence(mySequence);

Comments