Text Mask Cursor Moving Animation using HTML CSS & Jquery

Text Mask Cursor Moving Animation using HTML CSS & Jquery

January 06, 2023
Text Mask Cursor Moving Animation using HTML CSS & Jquery

Here I am going to making a Text mask effect cursor moving animation using HTML, CSS and Jquery. I am using the simple Jquery code without any plugins. I have included some examples in this.


HTML Code

Copy 
<!doctype html>
<html lang="en">
   <head>
   
      <title>Masking Animation</title>
      
      <!--- Boorstrap5 --->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      
      <!--- Style --->
      <link href="style.css" rel="stylesheet">
   
   </head>
   <body>
   
      <!--- Example1 --->
      <section class="d-flex align-items-center justify-content-center">
         <div>
            <h3 class="mb-5">Example #1</h3>
            <h1 class="mask-title example1">
               Masking <br/>Animation
            </h1>
            <h3 class="mt-5 mb-0">HTML, CSS & Jquery</h3>
         </div>
      </section>
	  
      <!--- Example2 --->
      <section class="d-flex align-items-center justify-content-center">
         <div>
            <h3 class="mb-5">Example #2</h3>
            <h1 class="mask-title example2">
               Masking <br/>Animation
            </h1>
            <h3 class="mt-5 mb-0">HTML, CSS & Jquery</h3>
         </div>
      </section>
	  
      <!--- Example3 --->
      <section class="bg-img d-flex align-items-center justify-content-center">
         <div>
            <h3 class="mb-5">Example #3</h3>
            <h1 class="mask-title example3">
               Masking <br/>Animation
            </h1>
            <h3 class="mt-5 mb-0">HTML, CSS & Jquery</h3>
         </div>
      </section>
	  
      <!--- Example4 --->
      <section class="bg-color d-flex align-items-center justify-content-center">
         <div>
            <h3 class="mb-5">Example #4</h3>
            <h1 class="mask-title example4">
               Masking <br/>Animation
            </h1>
            <h3 class="mt-5 mb-0">HTML, CSS & Jquery</h3>
         </div>
      </section>
	  
      <!--- Example5 --->
      <section class="d-flex align-items-center justify-content-center">
         <div>
            <h3 class="mb-5">Example #5</h3>
            <h1 class="mask-title example5">
               Masking <br/>Animation
            </h1>
            <h3 class="mt-5 mb-0">HTML, CSS & Jquery</h3>
         </div>
      </section>
	  
      <!--- JS --->
      <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
      <script src="main.js"></script>
	  
   </body>
</html>

CSS

Create style.css and put the below code.

Copy 
html,
body {
   height: 100%
}
body {
   text-align: center;
   font-family: "Montserrat", sans-serif;
}
h1 {
   font-size: 170px;
   line-height: 150px;
   font-weight: 700;
}
h3 {
   font-size: 40px;
   font-weight: 700;
}
section {
   height: 100%
}
.bg-img {
   background-image: url(https://images.pexels.com/photos/1287075/pexels-photo-1287075.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
   background-size: cover;
   background-position: bottom center;
}
.bg-img h3 {
   color: #fff;
}
.bg-color {
   background: #db2a2a;
}
.bg-color h3 {
   color: #fff;
}

/*---Masking style----*/

.mask-title-outer {
   position: relative;
   overflow: hidden;
   cursor: crosshair;
   display: inline-block;
}
.mask-title {
   margin-bottom: 0;
   text-transform: uppercase;
   padding: 0 6px;
}
.clone-outer {
   position: absolute;
   top: 0;
   left: 0;
   width: 230px;
   height: 230px;
   border-radius: 50%;
   margin-top: -115px;
   margin-left: -115px;
   overflow: hidden;
   transition: all 0.3s ease-out 0s;
}
.clone-title {
   position: absolute;
   top: 0;
   left: 0;
   margin-top: 115px;
   margin-left: 115px;
   transition: all 0.3s ease-out 0s;
}
.mask-title.example1:not(.clone-title) {
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke-color: #212529;
   -webkit-text-stroke-width: 2px;
}
.mask-title.example1.clone-title {
   color: #212529;
}
.mask-title.example2:not(.clone-title) {
   color: #ccc;
}
.mask-title.example2.clone-title {
   color: #212529;
}
.mask-title.example3:not(.clone-title) {
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke-color: #fff;
   -webkit-text-stroke-width: 3px;
   opacity: 0.3;
}
.mask-title.example3.clone-title {
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke-color: #fff;
   -webkit-text-stroke-width: 3px;
}
.mask-title.example4:not(.clone-title) {
   color: transparent;

}
.mask-title.example4.clone-title {
   color: #fff;
}
.mask-title.example5:not(.clone-title) {
   color: transparent;
}
.mask-title.example5.clone-title {
   background: url(https://images.pexels.com/photos/593655/pexels-photo-593655.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-size: cover;
}

Jquery

Create main.js and put the below code.

Copy 
$(document).ready(function () {
   $(function () {
      $('.mask-title').wrap('<div class="mask-title-outer"></div>');
      $('.mask-title-outer').each(function () {

         var textMask = $(this).find('.mask-title');

         $(textMask).clone().appendTo(this).addClass('clone-title').wrap('<div class="clone-outer"></div>');
         var cloneOuter = $(this).find('.clone-outer');
         var cloneText = $(this).find('.clone-title');

         $(this).mousemove(function (e) {
            var x = e.offsetX;
            var y = e.offsetY;
            $(cloneText).css({
               left: -x,
               top: -y
            });
            $(cloneOuter).css({
               left: x,
               top: y
            });
         });
      });
   });
});
Tags: