jQuery Animated Border Plugin

In this article, we understand the jquery animated border plugin with the help of various examples. A jQuery Animated Border Plugin is a lightweight jQuery plugin which enables you to add an animated border around any block level element.

Example 1:

<! DOCTYPE html>  
<html>  
       <head>  
       <meta http-equiv = "Content-Type"  
                             content = "text/html; charset=UTF-8" />  
         <title> Example of jquery Animated Border </title>  
                        <meta name = "description"  
                                    content = "jQuery tooltip plugin" />  
                    <meta content = "width=800, initial-scale=1"  
                        name = "viewport" />  
<script src = "https://code.jquery.com/jquery-3.5.1.min.js">  
                        </script>                       
                        <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>  
<style>
body {
  background: #0f222b;
  color: white;
}
.mainContainer {
  background: #333;
  width: 21%;
  height: 300px;
  margin: auto;
  margin-top: 100px;
  position: relative;
}
.topBorder {
    width: 100%;
    height: 100%;
    position: absolute;
    border: 2px solid #5db8ff;
    box-sizing: border-box;
    clip: rect(0px,0px,0px,0px);
}
.bottomBorder {
    width: 100%;
    height: 100%;
    position: absolute;
    border: 2px solid #5db8ff;
    box-sizing: border-box;
    clip: rect(0px,0px,0px,0px);
}
</style>
<body>
<div class = "mainContainer">
  <div class = "topBorder"> </div>
<h1> Example </h1>
  <h2> Jquery Animated Border  </h2>
  <div class = "bottomBorder"> </div>
</div>
var topBorderWidth = $('.topBorder').outerWidth();
var topBorderHeight = $('.topBorder').outerHeight();
(function (jQuery) {
    function getStyle(elem, name) {
        return (elem.currentStyle && elem.currentStyle[name]) || elem.style[name];
    }
    function getClip(elem) {
        var cssClip = jQuery(elem).css('clip') || '';
        if (!cssClip) {    
            var pieces = {
                top: getStyle(elem, 'clipTop'),
                right: getStyle(elem, 'clipRight'),
                bottom: getStyle(elem, 'clipBottom'),
                left: getStyle(elem, 'clipLeft')
            };
            if (pieces.top && pieces.right && pieces.bottom && pieces.left) {
                cssClip = 'rect(' + pieces.top + ' ' + pieces.right + ' ' + pieces.bottom + ' ' + pieces.left + ')';
            }
        }
        return cssClip.replace(/,/g, ' ');
    }
    jQuery.fx.step.clip = function (fx) {
        if (fx.pos === 0) {
            var cRE = /rect\(([0-9\.]{1,})(px|em)[,]?\s+([0-9\.]{1,})(px|em)[,]?\s+([0-9\.]{1,})(px|em)[,]?\s+([0-9\.]{1,})(px|em)\)/;
            fx.start = cRE.exec(getClip(fx.elem));
            if (typeof fx.end === 'string') {
                fx.end = cRE.exec(fx.end.replace(/,/g, ' '));
            } }
        if (fx.start && fx.end) {
            var sarr = new Array(), earr = new Array(), spos = fx.start.length, epos = fx.end.length,
                emOffset = fx.start[ss + 1] == 'em' ? (parseInt($(fx.elem).css('fontSize')) * 1.333 * parseInt(fx.start[ss])) : 1;
            for (var ss = 1; ss < spos; ss += 2) { sarr.push(parseInt(emOffset * fx.start[ss])); }
            for (var es = 1; es < epos; es += 2) { earr.push(parseInt(emOffset * fx.end[es])); }
            fx.elem.style.clip = 'rect(' +
                parseInt((fx.pos * (earr[0] - sarr[0])) + sarr[0]) + 'px ' +
                parseInt((fx.pos * (earr[1] - sarr[1])) + sarr[1]) + 'px ' +
                parseInt((fx.pos * (earr[2] - sarr[2])) + sarr[2]) + 'px ' +
                parseInt((fx.pos * (earr[3] - sarr[3])) + sarr[3]) + 'px)';
        }
    }
})(jQuery);
var IntervalTimer = 1;
varAnmiSpeed = 1000;
setInterval(function(){
  $( window ).resize(function() {
    var topBorderWidth = $('.topBorder').outerWidth();
    var topBorderHeight = $('.topBorder').outerHeight();
  });
  $('.topBorder').animate({'clip':'rect(0px '+topBorderWidth+'px '+(topBorderHeight-topBorderHeight+2)+'px 0px)'}, varAnmiSpeed);
  $('.topBorder').animate({'clip':'rect(0px '+topBorderWidth+'px '+(topBorderHeight)+'px '+(topBorderWidth-2)+'px)'}, varAnmiSpeed);
$('.topBorder').animate({'clip':'rect('+(topBorderHeight-2)+'px '+topBorderWidth+'px '+(topBorderHeight)+'px 0px)'}, varAnmiSpeed);
  $('.topBorder').animate({'clip':'rect(0px '+(topBorderWidth-topBorderWidth+2)+'px '+(topBorderHeight)+'px 0px)'}, varAnmiSpeed)
$('.bottomBorder').animate({'clip':'rect('+(topBorderHeight-2)+'px '+topBorderWidth+'px '+(topBorderHeight)+'px 0px)'}, varAnmiSpeed);
  $('.bottomBorder').animate({'clip':'rect(0px '+(topBorderWidth-topBorderWidth+2)+'px '+(topBorderHeight)+'px 0px)'}, varAnmiSpeed)
  $('.bottomBorder').animate({'clip':'rect(0px '+topBorderWidth+'px '+(topBorderHeight-topBorderHeight+2)+'px 0px)'}, varAnmiSpeed);
  $('.bottomBorder').animate({'clip':'rect(0px '+topBorderWidth+'px '+(topBorderHeight)+'px '+(topBorderWidth-2)+'px)'}, varAnmiSpeed);
  IntervalTimer = varAnmiSpeed * 4;
}, IntervalTimer);
</script>
</body>
</html>

Explanation:

In the above example, we have created a jquery animated border.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>  
<html>  
        <head>  
         <meta http-equiv = "Content-Type"  
                           content = "text/html; charset=UTF-8" />  
        <title> Example of jquery Animated Border </title>  
                        <meta name = "description"  
                                    content = "jQuery tooltip plugin" />  
                    <meta content = "width=800, initial-scale=1"  
                        name = "viewport" />  
<script src = "https://code.jquery.com/jquery-3.5.1.min.js">  
                        </script>                       
                        <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>  
<style>
* {
  box-sizing: border-box;
  outline: none;
}
*::before {
  box-sizing: border-box;
  outline: none;
}
*::after {
  box-sizing: border-box;
  outline: none;
}
h1, h2, h3, h4, h5, h6, p {
  margin: 5px 0;
}
body {
  margin: 0;
  padding: 0;
}
.intro {
  width: 100%;
  min-height: 100vh;
  position: relative;
}
.intro .animated-bar {
  width: 0;
  height: 3px;
  background: #fff;
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: bar 5s 3 linear;
   animation: bar 5s 3 linear;
}
.intro .slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff0;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  overflow: hidden;
}
.intro .slide.slide-a {
  background: #f26060;
  z-index: 400;
}
.intro .slide.slide-a .slide-a-child {
  transform: translateY(50px);
  opacity: 0;
  transition: all 1s;
}
.intro .slide.slide-a .slide-a-child.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.intro .slide.slide-a p {
  font-size: 25px;
}
.intro .slide.slide-b {
  background: #0EB29A;
  z-index: 300;
}
.intro .slide.slide-b h2 {
  transform: translateX(50px);
}
.intro .slide.slide-b p:first-of-type {
  transform: translateX(-50px);
  margin-bottom: 20px;
}
.intro .slide.slide-b p:last-of-type {
  transform: translateX(50px);
}
.intro .slide.slide-b .slide-b-child {
  transition: all 1s;
  opacity: 0;
}
.intro .slide.slide-b .slide-b-child.is-visible {
  transform: translateX(0);
  opacity: 1;
}
.intro .slide.slide-c {
  background: #3e454d;
  z-index: 200;
}
.intro .slide.slide-c .slide-c-child {
  transition: all 1s cubic-bezier(0.25, 0.25, 0.23, 1.405);
  transform: scale(0.5);
  opacity: 0;
}
.intro .slide.slide-c .slide-c-child.is-visible {
  transform: scale(1);
  opacity: 1;
}
.intro .slide .slide-content {
  text-align: center;
  color: #fff;
  font-family: "Raleway", sans-serif;
}
.intro .slide .slide-content h1 {
  font-size: 70px;
  font-weight: 400;
  margin: 20px 0;
}
.intro .slide .slide-content h2 {
  font-size: 60px;
  font-weight: 400;
  margin: 20px 0;
}
.intro .slide .slide-content p {
  font-size: 25px;
  font-weight: 300;
}
.intro .slide .slide-content p a {
  color: #b6483d;
  text-decoration: none;
  position: relative;
}
.intro .slide .slide-content p a:hover::after {
  width: 180px;
}
.intro .slide .slide-content p a::after {
  content: " ";
  width: 0;
  height: 1px;
  background: #b6483d;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  transition: all 0.5s;
}
.intro .slide .slide-content ul li {
  display: inline-block;
}
.intro .slide .slide-content ul li p {
  position: relative;
}
.intro .slide .slide-content ul li p::after {
  content: " ";
  width: 8px;
  height: 8px;
  background: #fff;
  display: inline-block;
  margin: 0 20px;
  border-radius: 50%;
}
.intro .slide .slide-content ul li:last-of-type p::after {
  display: none;
}
.intro .slide .slide-content button {
  width: 120px;
  height: 120px;
  line-height: 120px;
  border: none;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  background: #CC584C;
  margin-top: 30px;
  border: 2px solid transparent;
  transition: all 0.5;
  cursor: pointer;
  font-size: 18px;
  font-family: "Raleway", sans-serif;
  transition: all 0.5s;
}
.intro .slide .slide-content button:hover {
  background: none;
  border: 2px solid #CC584C;
  color: #b6483d;
}
@-webkit-keyframes bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@media (max-width: 991px) {
  h1 {
    font-size: 50px;
  }
  h2 {
    font-size: 45px;
  }

  p {
    font-size: 22px;
  }
  p a:hover::after {
    width: 160px;
  }
}
@media (max-width: 768px) {
  .slide-c-child {
    display: block;
  }
  p::after {
    display: none;
  }
  button.replay {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 14px;
  }
  a:hover::after {
    width: 140px;
  } }
@media (max-width: 480px) {
  h1 {
    font-size: 40px;
  }
  h2 {
    font-size: 33px;
  }
  p {
    font-size: 18px;
  }
  p a:hover::after {
    width: 130px;
  }
}
</style>
<body>
<div class = "intro">
   <div class = "animated-bar"> </div>
   <div class = "slide slide-a">
      <div class = "slide-content">
         <p class = "slide-a-child"> Example </p>
         <h1 class = "slide-a-child"> jQuery Animated Border </h1>  
      </div>
   </div>
   <div class = "slide slide-b">
      <div class = "slide-content">
         <p class = "slide-a-child"> Example </p>
         <h1 class = "slide-a-child"> jQuery Animated Border </h1>
      </div>
   </div>
   <div class = "slide slide-c">
      <div class = "slide-content">
         <p class = "slide-a-child"> Example </p>
         <h1 class = "slide-a-child"> jQuery Animated Border </h1>
         <ul>
            <li class = "slide-c-child"> <p> Adobe Photoshop </p> </li>
            <li class = "slide-c-child"> <p> HTML5 </p> </li>
            <li class = "slide-c-child"> <p> CSS3</p> </li>
            <li class = "slide-c-child"> <p> Javascript </p> </li>
         </ul>
      </div>
   </div>
</div>
$(document).ready(function () {
    'use strict';
    var slide  = $('.slide'),
        slideAelements = $('.slide-a-child'),
        slideBelements = $('.slide-b-child'),
        slideCelements = $('.slide-c-child'),
        replay = $('button.replay');
        slide.each(function (i) {
        if (i < 3) {
            setTimeout(function () {
                slide.eq(i).fadeOut();
            }, 5000 * (i + 1));
        }
    });
    function animateSlideA() {
      slideAelements.each(function (i) {
          setTimeout(function () {
              slideAelements.eq(i).addClass('is-visible');
          }, 300 * (i + 1));
      });
    }
    function animateSlideB() {
      slideBelements.each(function (i) {
          setTimeout(function () {
              slideBelements.eq(i).addClass('is-visible');
          }, 300 * (i + 1));
      });
   }
     function animateSlideC() {
      slideCelements.each(function (i) {
          setTimeout(function () {
              slideCelements.eq(i).addClass('is-visible');
          }, 150 * (i + 1));
      });
    }
    animateSlideA();
    setTimeout(function () {
       animateSlideB();
    }, 5000);
    setTimeout(function () {
       animateSlideC();
    }, 10000);
   replay.on('click', function () {
     location.reload(true);
   });
});
</script>
</body>
</html>

Explanation:

In the above example, we have created a jquery animated border.

Output:

Following is the output of this example.