jQuery Animation

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

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

Technologies

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

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

  
</head>

<body>

  <html>
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

    <link rel="stylesheet" href="animate.css">
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/134199/jquery-3.1.0.min.js"></script>       <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/134199/jquery.lettering.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/134199/jquery.textillate.js"></script>
    <link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/134199/animate.css">
    
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    
  <div class="wrap">
    <div id="animate-container">
      <div class="i-dot-container"><div class="i-dot"></div></div>
      <h1 class="tlt" id="title">
        <ul class="texts"  id="myList">
          <li class="text1">
            <span class="letter">C</span>
            <span class="letter">u</span>
            <span class="letter">r</span>
            <span class="letter">I</span>
            <span class="letter">o</span>
            <span class="letter">s</span>
            <span class="letter">I</span>
            <span class="letter">t</span>
            <span class="letter">y</span>
          </li>
        </ul>
      </h1>
    </div> <!--end animate container-->
  </div> <!--end wrap-->


   

    <script>
      

      
 

</script>
    <!--
$('.tlt').textillate({
  
  minDisplayTime: 1000,
  loop: true
});




$('.tlt').textillate({
  
  minDisplayTime: 1000,
  loop: true
});




     
      
$('.text1').textillate({
  in: { 
    effect: 'fadeInLeft', 
    delay:100 
  },
  out: { 
    effect: 'fadeOutRight', 
    delay:100 
  },
  minDisplayTime: 1000
});
      
$('.text2').textillate({
  in: { 
    effect: 'fadeInLeft', 
    delay:100 
  },
  out: { 
    effect: 'fadeOutRight', 
    delay:100 
  },
});
      
$('.text3').textillate({
  in: { 
    effect: 'fadeInUp', 
    delay:100 
  },
  out: { 
    effect: 'fadeOutRight', 
    delay:100 
  },
  sync: true,
  minDisplayTime: 1000
});
      
$('.text4').textillate({
  in: { 
    effect: 'fadeInLeft', 
    delay:100 
  },
  out: { 
    effect: 'fadeOutRight', 
    delay:100 
  },
  minDisplayTime: 1000
});
 
$('.text5').textillate({
  in: { 
    effect: 'fadeInLeftBig', 
    delay:100 
  },
  out: { 
    effect: 'fadeOutRight', 
    delay:100 
  },
  sync: true,
  minDisplayTime: 1000
});



<div class="canvas-container">
  	<canvas id="canvas" width="1200" height="960"></canvas>
    </div>

http://jsfiddle.net/masteram/kavTe/2/

http://stackoverflow.com/questions/17841554/having-multiple-words-cycle-through-using-textillate-js

-->
  </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/heagar/jquery-animation-vXRZQd */
@import 'https://fonts.googleapis.com/css?family=Hind';

body {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
  background: transparent;
  font-family: 'Hind', sans-serif;        
}
#animate-container {
  top: 0;
  left: 0;
  width: 100%;
  position: absolute;
  height: 100%;
  background:#ccc;
  min-height: 768px;
}
.wrap {
  width: 96%;
  margin: 0 auto;
  border: 5px solid #000;
  height: auto; 
  position: relative;
}
ul{padding: 0;}
li{list-style: none;}

h1 {
  position: relative;
  left: 0;
  top: 30%;
  /*margin-top: -2em;*/
  width: 100%;
  text-align: center;
  font-size: 2.5em;
  padding: 2vmin 0;
  /*text-shadow: 0.15vmin 0.15vmin rgba(0, 0, 0, 0.4);*/
  letter-spacing: 1px;
}

li.text1{
  color: #000;
  background: #fff;
}
li.text2{
  color: #fff;
  background: #000;
}
.letter {
   /* position: relative;
   top: -webkit-calc(50% - 60px);
   top: calc(50% - 60px);
   text-shadow: 0px 0px 3px white;*/
   opacity: 0;
}
.letter:nth-child(1) {
  -webkit-animation: fadeIn 4s 200ms;
  animation: fadeIn 4s 200ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.letter:nth-child(2) {
  -webkit-animation: fadeIn 4s 400ms;
  animation: fadeIn 4s 400ms; 
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.letter:nth-child(3) {
  -webkit-animation: fadeIn 4s 600ms;
  animation: fadeIn 4s 600ms; 
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.letter:nth-child(4) {
  -webkit-animation: fadeIn 4s 800ms;
  animation: fadeIn 4s 800ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.letter:nth-child(5) {
  -webkit-animation: fadeIn 4s 1000ms;
  animation: fadeIn 4s 1000ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.letter:nth-child(6) {
  -webkit-animation: fadeIn 4s 1200ms;
  animation: fadeIn 4s 1200ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.letter:nth-child(7) {
  -webkit-animation: fadeIn 4s 1400ms;
  animation: fadeIn 4s 1400ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.letter:nth-child(8) {
  -webkit-animation: fadeIn 4s 1800ms;
  animation: fadeIn 4s 1800ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.letter:nth-child(9) {
  -webkit-animation: fadeIn 4s 2000ms;
  animation: fadeIn 4s 2000ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes fadeIn {
  0%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeIn {
  0%  { opacity: 0; }
  100% { opacity: 1; }
}
 /*  @-webkit-keyframes fadeOut {
        0%  { opacity: 1; }
        100% { opacity: 0; }
     
    }
    @keyframes fadeOut {
        0%  { opacity: 1; }
        100% { opacity: 0; }
    }
*/
.i-dot {
  position: absolute;
  left: 80%;
  top: 0%;
  margin-top: -4vmin;
  -webkit-animation: xAxis 10s cubic-bezier(0.02, 0.01, 0.21, 1);
  animation: xAxis 10s cubic-bezier(0.02, 0.01, 0.21, 1);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.i-dot::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: #444;
  -webkit-animation: yAxis 10s cubic-bezier(0.3, 0.27, 0.07, 1.64);
  animation: yAxis 10s cubic-bezier(0.3, 0.27, 0.07, 1.64);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes yAxis {
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    -webkit-transform: translateY(56vh);
    transform: translateY(56vh);
  }
}
@keyframes yAxis {
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    -webkit-transform: translateY(40vh);
    transform: translateY(40vh);
  }
}
@-webkit-keyframes xAxis {
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    -webkit-transform: translateX(-25vw);
    transform: translateX(-25vw);
  }
}
@keyframes xAxis {
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    -webkit-transform: translateX(-25vw);
    transform: translateX(-25vw);
  }
}
/*****BEGIN MEDIA*****/

@media only screen and (min-width: 481px) {}
@media only screen and (min-width: 768px) {
   .wrap {
    width: 760px;
    position: relative; 
  }
}
@media only screen and (min-width: 960px) {
   .wrap {
    width: 760px;
    position: relative; 
  }
}
@media only screen and (min-width: 1024px) {
  .wrap {
    width: 1024px; 
    display: block;
  }
  #animate-container{
    /*  top: 50%;
    left: 50%;
margin-top: -512px;
    margin-left: -512px;*/
    width: 100%;
    height: 100%;
    position: absolute; 
   }
}
/**********END MEDIA *********/

Comments