search

nk-o / jarallax

Parallax scrolling for modern browsers
https://jarallax.nkdev.info
MIT License
1.38k stars 210 forks source link

WebP detection with Modernizr #208

Closed mokkab closed 2 years ago

mokkab commented 2 years ago

Hello,

I'm trying to get Jarralax to work on a website that uses Modernizr to detect WebP. See https://css-tricks.com/using-webp-images/#aa-using-webp-images-in-css

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}

Jarralax works great on pages with jpg images but not on pages with webp backgrounds. How to make this work?

Thanks!

nk-o commented 2 years ago

Hey.

You can init Jarallax manually using JS call (https://github.com/nk-o/jarallax#run-jarallax) right after Modernizr adds a .webp classname.

Or use <picture> tag (second example here - https://github.com/nk-o/jarallax#prepare-html) with an additional webp source.