Velocity Sequence

Tutorials of (Velocity sequence) by Jl carmona

<!DOCTYPE html>
<html >
<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/ */
.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/ */
/* 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);

This awesome code ( Velocity Sequence ) is write by JL Carmona, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © JL Carmona