💼 Success Team Manager @ Customer.io
📷 I'm a photographer with 2 published books, over 200,000,000 views on Unsplash, and founder of the MontréalPhotoClub.
You can browse my repos here to get a glimpse of the stuff I tinker with.
An interactive web experience to tell our journey across Newfoundland
Home Page: https://lookbutnostopping.com
License: MIT License
💼 Success Team Manager @ Customer.io
📷 I'm a photographer with 2 published books, over 200,000,000 views on Unsplash, and founder of the MontréalPhotoClub.
You can browse my repos here to get a glimpse of the stuff I tinker with.
https://github.com/aFarkas/lazysizes
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" />
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;
}
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;
}
?
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:
change the orders of div classes parallax, intro, and header to get it to work better
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.