Installation

Step 1

Copy and paste this code on your web page before </head> tag:

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/glitcher.js"></script>
<link rel="stylesheet" href="css/glitcher.css">

Don't include jQuery library if you already have it

Be sure you have correct src path according to your file structure.

Step 2

Add class glitcher to img, div or picture tag. If you use div tag please add background image via CSS property background-image or inline style.

Examples:
<img class="glitcher" src="image.jpg">

or

<picture class="glitcher">
    <source media="all" srcset="assets/img/image.jpg, assets/img/image@2x.jpg 2x">
    <img src="assets/img/image.jpg" alt="" title="">
</picture>

or

<div class="glitcher" style="background-image: url('image.jpg')"></div>

or

.div_with_glitcher_class {
    background-image: url('image.jpg');
}

Enjoy!

results matching ""

    No results matching ""