We will again build a simple parallax simple site. This time a little more complex and fun. Check it out !
Here is the demo:Demo Parallax
Parallax is still a fairly popular technique in the web. If done right it feels awesome but there must be some things to consider first:
- Use properties that are easy for the browser to animate – translate3D, scale, rotation and opacity
- Use window.requestAnimationFrame(animateElements)
- Rounding the values – do not let the pixel value become 53.3325 px. Round the number
- Only animate absolute and fixed position elements
- <body> scroll – use JS to set an appropriate body height to get the height of scroll you need
- Avoid background-size:cover
- Don’t bind directly to scroll event – scroll is called “to often” and can impact performance, just update their position every 10 ms
- Don’t animate massive images or re-size them too much – re-sizing the image with browser from 3000 px to 1000 px and then animating it is not a good idea
- Animate fewer objects – 1 at the time has best performance
See you next time !
Tailwind CSS – Dream way of building UI and quick landing pages
This is a quick review and demo of the “utility style CSS framework” named “Tailwindcss” – https://tailwindui.com/ What is Tailwind CSS? Tailwind CSS is a utility-first CSS framework that provides […]
Blender 3D | Best way to start with 3D
It’s been a while since I done 3D stills and animations and 3D Blender seems to be perfect software to start, even if you have zero experience. I have to […]
Basic text scraping from websites in Python
In my experience, Python is a easier programming languages to start with, mostly because of syntax which is very readable and minimal. For python apps that means reduced cost of maintenance […]
Basic webpage preloader
Page preloaders are useful if you have a big landing page or a lot of content and pictures, videos, so the visitors are “entertained” while the page is loading.