Create a beautiful webpage with lazy image, iframe, video ... Moreover, use or create beautiful animations on lazy and not lazy elements on all browser.
You can also use our animations included in the lib here.
All of that in one lib and only with html attributes !
Example of an image which this lazy load and which when scrolling launches the animation even after having
already performed once the animation. Just add these attributes in your img. This image will make an animation on his parent
by selecting him with the attribute "lazy"pointer".
lazy-src="https://picsum.photos/300/300?random=1" lazy-srcset="..." lazy-animation="zoomin" lazy-animation-pointer="#pointer" lazy-reset
Example of an image which this lazy load and which when scrolling launches the animation but only once.
Then it is no longer taken into account. The animation is infinite in linear mode here.
lazy-animation-function="linear" lazy-animation-count="infinite" lazy-src="https://picsum.photos/300/300?random=2" lazy-animation="rotate" lazy-animation-time="3"
Example of an image which this lazy load and which during scrolling several times.
Then it is no longer taken into account. I set a lazyloaded class to change the filter as grayscale.
lazy-src="https://picsum.photos/300/300?random=3" class="lazyattr" lazy-animation="opacity" lazy-reset
.lazyloaded{
filter: grayscale(100%);
}
Example of an embed video which launches during the click and which executes an animation during the scroll.
lazy-embed="https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=0" lazy-animation="shake"
lazy-size-width="300px" lazy-size-height="300px"
Example of an image which this lazy load and which during scrolling several times.
Then it is no longer taken into account. This time, if the animation does not launch with a class but a style.
lazy-reset lazy-animation="from-right"
lazy-embed="https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=0"
lazy-poster="https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg"
Video loading ...
Example of a video in lazy mode without preload and a poster. Lazy-video make the video in not preload mode and put a poster. We can know when the video is load thanks to 'lazy-loaded' event
lazy-video="https://picsum.photos/560/315?random=10" lazy-src="./assets/flower.mp4"
element.addEventListener('lazy-loaded', function(event){
document.querySelector('#video_stat').innerHTML = event.target.tagName + " loaded !";
})
Allows you to perform an animation with a gap delay between each frame here in the example below.
lazy-animation-delay="time in seconde"
Make a lazy background just with lazy-background and the src !
class="lazy-skeleton"
lazy-background="https://picsum.photos/300/300?random=20"
Allows you to make skeleton loading animation just with a class.
Dont forget width and height !
Do not work on image so set up on the parent.
class="lazy-skeleton" class="lazy-skeleton-corner" class="lazy-skeleton-top"
Card
You will find below the list of events. You can create your own animation just by
replacing with a css class with an animation attribute. To add an animation just do:
lazy-animation="{animation name}"