I'm trying to build the macOS High Sierra Page from Apple.
Watch here: https://www.apple.com/de/macos/high-sierra-preview/
So i tried myself, but i got stuck by the ScrollTrigger. No Settings lead to the result i would like to have.
What i basically want:
If you scroll the Page down, like the Hero Section in Apple ones, i want the Headline to smoothly disappear and simultaneously that the background wallpaper gehts blurred by 10px.
As previously said, i've got stuck by the Scroll Trigger.
Everytime i set the Trigger (tried a lot of settings .. 0% Offset to 99% offset), the heading only gets disappeard when i scrolled nearly the whole page..
The blurred effect drives me crazy too. When i put a div behind the section (with the blackground image) and get it blurred by 10px, the Text (headlinge and paragraphs) get blurred too .....
So how would you pro guys solve the
1. trigger problem
2. blurred problem
I really appreciate your tips and tricks!
Looking really forward to an answer!