<head>
<style>
body{
background-color: rgba(0,0,0,0);
backdrop-filter: blur(10px);
transform: scale(1.5);
border-radius: 0px;
-webkit-backdrop-filter: saturate(80%) blur(10px);
backdrop-filter: saturate(80%) blur(10px);
}
</style>
</head>
import {timeline} from 'wix-animations';
const header = $w('#scrollHeader');
const headerTlatStart = timeline();
const headerTl = timeline();
headerTlatStart
.add(header, {duration: 0, y: -100})
headerTl
.add(header, {duration: 500, y: 0, easing: 'easeInSine'})
// CREATE YOUR OWN EVENT HANDLER
export function section6_viewportEnter(event) {
headerTl.play();
}
// CREATE YOUR OWN EVENT HANDLER
export function section5_viewportEnter(event) {
headerTl.reverse();
}
// Copying/Pasting Event Handlers From Website to Website or Even From Page to Page Will Break the Code. Avoid This by Adding the Event Handlers Manually Like Shown in the Video.