It really has nice JavaScript transitions, which look really smooth.
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 …
To make the Heading Wrapper disappear, you need to add an interaction to the Paragraph element, so that when the paragraph scrolls into view the Heading Wrapper becomes 0% opacity and disappears.
The current interaction would mean the heading is disappearing from the screen.
I’m not 100% on the blur though, sorry!
Hi @ChristianKallinger - Looks to me like the blur effect is done by using a second blurred out image, rather than the background image actually blurring from the built in Webflow effect - If you look closely, the blurred image is not actually in line with the background image on the Apple site (bit of an oversight I guess!). This is why I think they are two separate images.
I created a blurred background transition the other day by blurring the image in Photoshop, adding it on top of the background image, setting Initial State to hidden and 0% opacity and then transitioning to this via a click interaction. You could do the same with a scroll interaction. Hope this helps! Regards Kai
the blur and the fade away of heading and paragraph is only done by adding the class active.
This could be done by scripts (jquery ) and indeed apple did only work with opacity option on that case.
there are two divs containing the background-images (one blurred the other sharp)
something like this:
how do you insert here code on the forum?
the change of opacity is set by css transitions so it is fading more or less.
on performance reasons the scroll event should work with a throttle ( timing) that it is not allways fireing and flickering on some browsers
But the really amazing is the different scroll velocity on the two columns side by side .
that is a great effect !
Regards Kai