The look & lay out is good for me, but I want to load when scrolling down, the images with a subtle effect, like a fade or blur effect. Some reference with blur effect: https://www.ssense.com/
Because I know some basics of html css, can anyone help to guide me through the following process:
-How to setup a html site with css, based on the tumblr I already have.
And how add the ‘load’ effect for the images with blur effect when scrolling down . See example reference above.
To me it looks like the tumbler is just a column of pictures on a white background. If you wanted to translate that to html you can add the images, set the img tag to block and edit the width and height of those images to your liking.
For the scroll effect, you can accomplish that with a few lines of javascript code. I tried the reference site but didn’t notice an blur effect on my end so I am not sure what type of fade effect you want here.
But if you just google how to create a fade effect on scroll with javascript, then you can get the desired result you are looking for.
Thank you Jessica for the info. Hope you’re well.
For the blur effect, I took some screenshots from the Ssense site as example. The first is with the blur effect when loading, the second is the final image. See attachments.
I’ve found this info about the blur effect, but some examples are with a zoom effect added, which is not what I’m looking for:)
All of the links that you posted are basically doing the same thing and will give you the desired results you are looking for.
Since this sounds like a big project this would a good time to learn javascript. I would go through the FCC javascript section and then you will be able to make sense of the code in these examples. You will also have the knowledge base to implement other cool interactive features to your site later on if you want.
