Background Shift Animation with CSS Blend Modes

This content originally appeared on Codrops and was authored by Mary Lou

Some days ago I encountered the beautiful website of Alef Estate made by the amazing folks of Advanced Team. The site has so many interesting details and interactions! What strikes me the most is the changing cursor that also has a blend mode. When scrolling further down, the whole page switches to a black background with a kind of slice animation. I think this is a super interesting effect! It’s the perfect excuse to code up a portfolio design and play with mix-blend-mode and some background trickery.

If you want to learn about CSS Blend Modes, check out the entry in our CSS Reference by Sara Soueidan: mix-blend-mode. It has lots of examples and demos.

I really hope you are enjoying this effect remake and experiment and find it interesting!

The post Background Shift Animation with CSS Blend Modes appeared first on Codrops.

This content originally appeared on Codrops and was authored by Mary Lou

Print Share Comment Cite Upload Translate Updates

APA

Mary Lou | Sciencx (2022-01-26T13:45:01+00:00) Background Shift Animation with CSS Blend Modes. Retrieved from https://www.scien.cx/2022/01/26/background-shift-animation-with-css-blend-modes/

MLA

" » Background Shift Animation with CSS Blend Modes." Mary Lou | Sciencx - Wednesday January 26, 2022, https://www.scien.cx/2022/01/26/background-shift-animation-with-css-blend-modes/

HARVARD

Mary Lou | Sciencx Wednesday January 26, 2022 » Background Shift Animation with CSS Blend Modes., viewed ,<https://www.scien.cx/2022/01/26/background-shift-animation-with-css-blend-modes/>

VANCOUVER

Mary Lou | Sciencx - » Background Shift Animation with CSS Blend Modes. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/26/background-shift-animation-with-css-blend-modes/

CHICAGO

" » Background Shift Animation with CSS Blend Modes." Mary Lou | Sciencx - Accessed . https://www.scien.cx/2022/01/26/background-shift-animation-with-css-blend-modes/

IEEE

" » Background Shift Animation with CSS Blend Modes." Mary Lou | Sciencx [Online]. Available: https://www.scien.cx/2022/01/26/background-shift-animation-with-css-blend-modes/. [Accessed: ]

rf:citation

» Background Shift Animation with CSS Blend Modes | Mary Lou | Sciencx | https://www.scien.cx/2022/01/26/background-shift-animation-with-css-blend-modes/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.