Parallax experiment
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:
Some tips:
- 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 !
Magical automated way of doing animations – with Stable diffusion with Deforum extension
Let’s explore the magical of doing animations – automated and unpredicable. Yes, you input the text prompt and have general control, but the magical part is, that you let the […]
Stable diffusion AI – high resolution generated art
What is Stable Diffusion AI? Stable Diffusion is a deep learning, text-to-image model released in 2022. It is primarily used to generate detailed images conditioned on text descriptions, though it […]
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 […]