HTML Embed Code:
<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>
Page Code:
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.
.jpg)
