jpvalery / newfoundland Goto Github PK

Works on Firefox inspection tools and adaptive view, yet once i check the netlify prod version on mobile, i have a nasty display bug.

The header doesn't scroll with the intro, so it appears as if the intro was scrolling above it and then both scrolls together.

I'm thinking about 2 paths to fix that:

1. change the orders of div classes parallax, intro, and header to get it to work better

2. follow the example of the firewatch website and have a "noparallax" fallback that I could use for mobile devices with a merged layers image of the artwork.
   This would be a display:none if the screen is large enough and would display only for smaller screen and/or mobile UA.
   The parallax class would have the contrary behavior: display:none for smaller screen and/or mobile UA.

https://github.com/aFarkas/lazysizes

How to

Download the lazysizes.min.js script and include lazysizes in your webpage.
<script src="lazysizes.min.js" async=""></script>

lazysizes does not need any JS configuration: Add the class "lazyload" to your images/iframes in conjunction with a data-src and/or data-srcset attribute. Optionally you can also add a src attribute with a low quality image:

<!-- non-responsive: -->
<img data-src="image.jpg" class="lazyload" />

<!-- responsive example with automatic sizes calculation: -->
<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />

CSS API

lazysizes adds the class lazyloading while the images are loading and the class lazyloaded as soon as the image is loaded. This can be used to add unveil effects:

/* fade image in after load */
.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 300ms;
}

/* fade image in while loading and show a spinner as background image (good for progressive images) */

.lazyload {
	opacity: 0;
}

.lazyloading {
	opacity: 1;
	transition: opacity 300ms;
	background: #f7f7f7 url(loader.gif) no-repeat center;
}

Broken image symbol

In case you are using an alt attribute but do not declare a src/srcset attribute you will end up with a broken image symbol.

There are two easy ways to deal with it.

Either define a src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" or add the following CSS.

img.lazyload:not([src]) {
	visibility: hidden;
}

LQIP/blurry image placeholder/Blur up image technique

?