<!--the gradient is applied to this div as a background-image--> <div class="gradient-wrap"> <!--this inner image is used to create the gradient--> <img src="./samples/good-dinosaur.jpg" /> </div> <script src="../dist/grade.js"></script> <script type="text/javascript"> window.addEventListener('load', function(){ Grade(document.querySelectorAll('.gradient-wrap')) }) </script>
// If you pass in a 3rd parameter and it's a function, // the HTML element(s) you passed in as the // 1st parameter will not be manipulated, but an array will be // returned to you, for you to do as you please with, ie. Grade(document.querySelectorAll('.gradient-wrap'), null, function(gradientData){ // sample contents of `gradientData` can be inspected here https://jsonblob.com/57c4601ee4b0dc55a4f180f1 })