├── app.js ├── index.html ├── style.css ├── video.mp4 └── volume.svg /app.js: -------------------------------------------------------------------------------- 1 | let tl = gsap.timeline({ 2 | scrollTrigger: { 3 | trigger: ".front-page", 4 | start: "top", 5 | end: "100%", 6 | scrub: "true", 7 | pin: true, 8 | }, 9 | }); 10 | 11 | tl.fromTo( 12 | ".front-page", 13 | { 14 | clipPath: "circle(5%)", 15 | }, 16 | { 17 | clipPath: "circle(75%)", 18 | duration: 2, 19 | } 20 | ); 21 | 22 | tl.fromTo( 23 | ".music-note", 24 | { 25 | scale: 0.5, 26 | }, 27 | { 28 | scale: 0, 29 | opacity: 0, 30 | duration: 1, 31 | }, 32 | "-=2" 33 | ); 34 | 35 | tl.fromTo( 36 | ".title", 37 | { 38 | opacity: 0, 39 | }, 40 | { 41 | opacity: 1, 42 | duration: 1, 43 | } 44 | ); 45 | 46 | tl.fromTo( 47 | ".sub-title", 48 | { 49 | opacity: 0, 50 | }, 51 | { 52 | opacity: 1, 53 | duration: 1, 54 | } 55 | ); 56 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | Fullscreen Scroll 15 | 16 | 17 |

18 |

19 |

Learn to play Guitar.

20 |

21 | Join today and find the right instructor for you. 22 |

23 |

24 |

25 |

26 |

27 |

28 | 29 |

30 |

Second Page

31 |

32 | 33 | 39 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | 8 | .front-page { 9 | width: 100%; 10 | height: 100vh; 11 | position: relative; 12 | clip-path: circle(5%); 13 | overflow: hidden; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | flex-direction: column; 18 | } 19 | 20 | .front-page video { 21 | height: 100%; 22 | width: 100%; 23 | object-fit: cover; 24 | } 25 | 26 | .second-page { 27 | height: 100vh; 28 | } 29 | 30 | .blend { 31 | position: absolute; 32 | width: 100%; 33 | height: 100%; 34 | background-color: black; 35 | opacity: 0.3; 36 | } 37 | 38 | #logo { 39 | position: absolute; 40 | top: 50%; 41 | left: 50%; 42 | transform: translate(-50%, -50%) scale(0.1); 43 | /* fill: transparent; */ 44 | } 45 | 46 | .intro-text { 47 | position: absolute; 48 | top: 50%; 49 | left: 50%; 50 | transform: translate(-50%, -50%); 51 | color: white; 52 | z-index: 4; 53 | } 54 | 55 | .title { 56 | font-size: 5rem; 57 | padding-bottom: 1rem; 58 | } 59 | 60 | .sub-title { 61 | font-size: 1.5rem; 62 | } 63 | 64 | .second-page { 65 | display: flex; 66 | align-items: center; 67 | justify-content: center; 68 | height: 100vh; 69 | } 70 | .second-page h2 { 71 | font-size: 6rem; 72 | } 73 | 74 | .music-note { 75 | position: absolute; 76 | top: 50%; 77 | left: 50%; 78 | transform: translate(-50%, -50%) scale(0.5); 79 | z-index: 4; 80 | } 81 | -------------------------------------------------------------------------------- /video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developedbyed/fullscreen-scroll/8e6da3c2415cbd6c53dabd5ed5266c6514a29b9b/video.mp4 -------------------------------------------------------------------------------- /volume.svg: -------------------------------------------------------------------------------- 1 | 11 | --------------------------------------------------------------------------------