jQuery Lettering.js + Tweenmax.js Moving Letter Animation in HTML5 CSS3 and Javascript Full Example Project For Beginners

jQuery Lettering.js + Tweenmax.js Moving Letter Animation in HTML5 CSS3 and Javascript Full Example Project For Beginners

 

Welcome folks today in this blog post we will be building moving letter animation in html5 css3 and javascript using jquery lettering.js and tweenmax.js . All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<section class="container">
  <h1>
    <span class="title">A   U   Y   K</span>
    <span class="title">Aao Unhe Yaad Karai</span>
    <span class="title">Kashmir's Podcast App</span>
    <span class="title">#1</span>
  </h1>
  
  
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <div class="button">restart</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>

 

See also  Deno.js PostgreSQL Database Driver Tutorial to Perform CRUD Operations in TypeScript Using deno-postgres Library Full Project For Beginners

 

Now make a style.css file and copy paste the following code

 

style.css

 

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
 html {
     height: 100%;
}
 body {
     font-family: 'Fjalla One', sans-serif;
     background: linear-gradient(to bottom, yellow 0%, darkorange 100%);
}
 .container {
     transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
     display: block;
     position: absolute;
     max-width: 450px;
}
 .button {
     float: left;
     position: relative;
     bottom: -65px;
     left: 50%;
     transform: translateX(-50%) rotate(-10deg);
     color: #e55643;
     text-transform: uppercase;
     opacity: 0;
     visibility: hidden;
     cursor: pointer;
}
 .button span {
     transform: skew(-10deg);
     display: block;
     float: left;
     text-shadow: black 1px 1px, black 2px 2px, black 3px 3px, black 4px 4px;
}
 h1 {
     color: #fff;
     text-transform: uppercase;
     font-size: 42px;
     margin: 0;
     line-height: 47px;
     letter-spacing: 2px;
}
 .title {
     transform: translateX(-50%) rotate(-10deg);
     display: block;
     float: left;
     left: 50%;
     position: relative;
}
 .title span {
     transform: skew(-10deg);
     display: block;
     float: left;
     text-shadow: black 1px 1px, black 2px 2px, black 3px 3px, black 4px 4px, black 5px 5px, black 6px 6px;
     min-width: 10px;
     min-height: 10px;
     position: relative;
}
 .title:nth-child(1) {
     color: #e55643;
}
 .title:nth-child(2) {
     color: #2b9f5e;
}
 .title:nth-child(3) {
     color: skyblue;
}

 

See also  Build a Popup Lighbox Modal Dialog Box on Page Load in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

And now make a script.js file and copy paste the below code

 

script.js

 

$(document).ready(function() {
  $(".title").lettering();
  $(".button").lettering();
});





$(document).ready(function() {
  animation();
}, 1000);

$('.button').click(function() {
  animation();
});


function animation() {
  var title1 = new TimelineMax();
  title1.to(".button", 0, {visibility: 'hidden', opacity: 0})
  title1.staggerFromTo(".title span", 0.5, 
  {ease: Back.easeOut.config(1.7), opacity: 0, bottom: -80},
  {ease: Back.easeOut.config(1.7), opacity: 1, bottom: 0}, 0.05);
  title1.to(".button", 0.2, {visibility: 'visible' ,opacity: 1})
}

 

See also  JavaScript Program to Add Element to Start of an Array Using splice() Method Full Project For Beginners

 

 

Now if you open the index.html file inside the browser you will see the below screenshot

 

Leave a Reply