Create A Light Sweep Effect In jQuery - lightSweep.js

lightSweep.js is a super tiny jQuery plugin which applies an animated light sweep effect to any DOM elements (typically text and image) using CSS transform, transition, mask, and filter properties.

How to use it:

1. To use this plugin, load the following JavaScript and CSS files in your html document.

<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>

<!-- jQuery lightSweep.js -->
<script src="jquery.lightSweep.js"></script>
<link href="lightSweep.css" rel="stylesheet">

2. Apply the light sweep effect to your element and specify the animation speed in the second parameter as follows:

<div id="banner">
  <img src="bg.jpg">
</div>

$( window ).on('load',function() {
  lightSweep('#banner','3s');
});

3. To customize the light sweep effect, just override the CSS rules in the lightSweep.css as follows:

.lightSweep {
  position: absolute;
  overflow: hidden;
  -webkit-filter: brightness(1.5);
  -webkit-mask-size: 300% 200%;
  -webkit-mask-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 60%);
  -webkit-transition: -webkit-mask-position;
  -webkit-animation-timing-function: linear;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-filter: brightness(1.5);
  -moz-mask-size: 300% 200%;
  -moz-mask-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 60%);
  -moz-transition: -webkit-mask-position;
  -moz-animation-timing-function: linear;
  -moz-transform: translate3d(0, 0, 0);
  -o-filter: brightness(1.5);
  -o-mask-size: 300% 200%;
  -o-mask-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 60%);
  -o-transition: -webkit-mask-position;
  -o-animation-timing-function: linear;
  -o-transform: translate3d(0, 0, 0);
  filter: brightness(1.5);
  mask-size: 300% 200%;
  mask-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 60%);
  transition: -webkit-mask-position;
  animation-timing-function: linear;
  transform: translate3d(0, 0, 0);
}

.lightSweepStart {
  -webkit-mask-position: 150% 0px;
  -moz-mask-position: 150% 0px;
  -o-mask-position: 150% 0px;
  mask-position: 150% 0px;
}

.lightSweepEnd {
  -webkit-mask-position: 0% 0px;
  -moz-mask-position: 0% 0px;
  -o-mask-position: 0% 0px;
  mask-position: 0% 0px;
}

Changelog:

2019-02-02

• Update jquery.lightSweep.js

---

This awesome jQuery plugin is developed by lukac-dejan. For more Advanced Usages, please check the demo page or visit the official website.