From 0f456ece6c4f57c15f3d84ee86ed938a0568b0e9 Mon Sep 17 00:00:00 2001 From: sidhartha2002 Date: Sat, 7 Oct 2023 02:54:06 +0530 Subject: [PATCH] implement snap-scrolling in the webpage --- CSS/style.css | 30 +++++++- JS/script.js | 34 +++++---- index.html | 189 +++++++++++++++++++++++--------------------------- 3 files changed, 130 insertions(+), 123 deletions(-) diff --git a/CSS/style.css b/CSS/style.css index 43715a3..66e9e45 100644 --- a/CSS/style.css +++ b/CSS/style.css @@ -8,8 +8,30 @@ } body { background: #000; + width: 100vw; + height: 100vh; + margin: 0; color: #fff; font-family: "VT323", monospace; + overflow-x: hidden; +} + +.container { + width: 100%; + height: 100%; + scroll-snap-type: y mandatory; + overflow-y: sroll; + overflow-x: hidden; +} +.section-a, +.section-b, +.section-c, +.section-d { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + scroll-snap-align: center; } a { @@ -90,11 +112,16 @@ ul { section { position: relative; height: 100vh; + width: 100vw; background-position: center center; background-repeat: no-repeat; background-size: cover; text-transform: uppercase; /* object-fit: cover; */ + display: flex; + justify-content: center; + align-items: center; + scroll-snap-align: start; } .section-inner { @@ -144,8 +171,6 @@ section { font-size: 20px; } - - .btn { position: relative; display: inline-block; @@ -274,7 +299,6 @@ section { /* footer */ footer { position: relative; - padding: 55px 0; } footer ul { diff --git a/JS/script.js b/JS/script.js index ed54a28..3e6aacf 100644 --- a/JS/script.js +++ b/JS/script.js @@ -1,21 +1,20 @@ -const btn = document.getElementById('menu-btn'); -const overlay = document.getElementById('overlay'); -const menu = document.getElementById('mobile-menu'); -const counters = document.querySelectorAll('.counter'); -const menuBtn = document.getElementById('menu'); -const menuContent = document.querySelector('.menu-content'); - +const btn = document.getElementById("menu-btn"); +const overlay = document.getElementById("overlay"); +const menu = document.getElementById("mobile-menu"); +const counters = document.querySelectorAll(".counter"); +const menuBtn = document.getElementById("menu"); +const menuContent = document.querySelector(".menu-content"); let scrollStarted = false; // btn.addEventListener('click', navToggle); -document.addEventListener('scroll', scrollPage); +document.addEventListener("scroll", scrollPage); function navToggle() { - btn.classList.toggle('open'); - overlay.classList.toggle('overlay-show'); - document.body.classList.toggle('stop-scrolling'); - menu.classList.toggle('show-menu'); + btn.classList.toggle("open"); + overlay.classList.toggle("overlay-show"); + document.body.classList.toggle("stop-scrolling"); + menu.classList.toggle("show-menu"); } function scrollPage() { @@ -32,11 +31,11 @@ function scrollPage() { function countUp() { counters.forEach((counter) => { - counter.innerText = '0'; + counter.innerText = "0"; const updateCounter = () => { // Get count target - const target = +counter.getAttribute('data-target'); + const target = +counter.getAttribute("data-target"); // Get current counter value const c = +counter.innerText; @@ -59,14 +58,13 @@ function countUp() { } function reset() { - counters.forEach((counter) => (counter.innerHTML = '0')); + counters.forEach((counter) => (counter.innerHTML = "0")); } // menu button function myFunction(x) { x.classList.toggle("change"); } -menuBtn.addEventListener('click', () => { - menuContent.classList.toggle('active'); +menuBtn.addEventListener("click", () => { + menuContent.classList.toggle("active"); }); - diff --git a/index.html b/index.html index e3033a9..85a96ae 100644 --- a/index.html +++ b/index.html @@ -1,77 +1,70 @@ - - - - - - Indian Space Research Organisation - - - -
-
+
-
-
-

Upcoming Launch

-

Chandrayaan-3

- -
- Rewatch -
- -
- -
- - +
+

Upcoming Launch

+

Chandrayaan-3

+ +
+ Rewatch +
+ +
+ + +
+ +
- + +
@@ -85,22 +78,18 @@

Chandrayaan-3

Recent Launch

PSLV-C54/EOS-06

- -
- Rewatch -
+ +
+ Rewatch +
+ -
- + +
@@ -113,20 +102,16 @@

PSLV-C54/EOS-06

Recent Mission

GSLV-F12/NVS-01

- -
- Rewatch -
+ +
+ Rewatch +
- + +
@@ -138,25 +123,25 @@

GSLV-F12/NVS-01

GSAT-31 Update

- -
- Rewatch -
+ +
+ Rewatch +
- + + -
-
-
-
+ +
+ + + + + + - - + + \ No newline at end of file