Grid Fade and Intersection Observer Lazyload is a responsive fading image grid that uses the Intersection Observer system to lazy load images as they are passed into view.
responsive image grid codepen, css image grid different sizes, image grid examples, css grid image gallery dynamic
How to make use of it:
1. Add placeholder images to the grid.
<div class="grid-container"> <div class="grid-item"><img src="placeholder.jpg" /></div> <div class="grid-item"><img src="placeholder.jpg" /></div> <div class="grid-item"><img src="placeholder.jpg" /></div> <div class="grid-item"><img src="placeholder.jpg" /></div> <div class="grid-item"><img src="placeholder.jpg" /></div> ... </div>
2. CSS/CSS3 Styles Necessary for Image Grid.
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: minmax(270px, 1fr); max-width: 1280px; margin: 0 auto; } .grid-row, .grid-item { display: block; overflow: hidden; } .grid-item img { -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; width: 100%; height: 100%; } .grid-item { -webkit-transform: translateY(-10%); transform: translateY(-10%); opacity: 0; -webkit-transition: 600ms opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms, 600ms -webkit-transform cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: 600ms opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms, 600ms -webkit-transform cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: 600ms transform cubic-bezier(0.55, 0.055, 0.675, 0.19), 600ms opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms; transition: 600ms transform cubic-bezier(0.55, 0.055, 0.675, 0.19), 600ms opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms, 600ms -webkit-transform cubic-bezier(0.55, 0.055, 0.675, 0.19); } .grid-item.inview { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
3. The main javascript for lazy loading of actual images on the grid.
const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { const rand = Math.floor(Math.random() * 30); if (entry.isIntersecting === true) { const img = entry.target.querySelector("img"); entry.target.classList.add("inview"); img.src = `https://source.unsplash.com/random/960x540/?${rand}`; } else { entry.target.classList.remove("inview"); } }); }); const items = document.querySelectorAll(".grid-item"); items.forEach((item, index) => { observer.observe(item, index); });
responsive fading image grid, grid fade and intersection observer load image Plugin/Github
See Demo And Download
Official Website(magnificode): Click Here
This superior jQuery/javascript plugin is developed by magnificode. For extra advanced usage, please go to the official website.
Be First to Comment