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
- trigger problem
- blurred problem
I really appreciate your tips and tricks!
Looking really forward to an answer!