From f71c3dbcaa0c7554a632342076d18858d7261ebb Mon Sep 17 00:00:00 2001 From: Bhavik Sojitra <75220689+BhavikSojitra@users.noreply.github.com> Date: Sun, 17 Oct 2021 00:17:44 +0530 Subject: [PATCH 1/3] index.html uploaded --- Total-Parallax/index.html | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 Total-Parallax/index.html diff --git a/Total-Parallax/index.html b/Total-Parallax/index.html new file mode 100644 index 0000000..21810c3 --- /dev/null +++ b/Total-Parallax/index.html @@ -0,0 +1,21 @@ + + + + + + Parallax Effect + + + + +
+
Faster
+
No Effect
+
Slower
+
Right
+
Left
+
+ + + + From 5076b6cb2a80abd0d253c62dd7920e4863a6b49d Mon Sep 17 00:00:00 2001 From: Bhavik Sojitra <75220689+BhavikSojitra@users.noreply.github.com> Date: Sun, 17 Oct 2021 00:18:31 +0530 Subject: [PATCH 2/3] style.css uploaded --- Total-Parallax/style.css | 41 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 Total-Parallax/style.css diff --git a/Total-Parallax/style.css b/Total-Parallax/style.css new file mode 100644 index 0000000..318b8e4 --- /dev/null +++ b/Total-Parallax/style.css @@ -0,0 +1,41 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: 24px; + font-family: sans-serif; + +} +body{ + min-height: 200vh; + min-width: 200vw; + overflow-x: auto; +} +.main{ + height: 100vh; + width: 100vw; + display: flex; + justify-content: space-around; + align-items: center; +} +.layer{ + width: 15vw; + height: 15vw; + color: #ffffff; + display: flex; + justify-content: center; + align-items: center; + border: 2px solid #FFFFFF; + border-radius: 50%; + background-color: rgb(81, 16, 119); +} + +@media only screen and (max-width: 768px){ + *{ + font-size: 17px; + } + .layer{ + width: 18vw; + height: 18vw; + } +} From 083785dd38d149d8ddbe0f8ed753ec84490eaa49 Mon Sep 17 00:00:00 2001 From: Bhavik Sojitra <75220689+BhavikSojitra@users.noreply.github.com> Date: Sun, 17 Oct 2021 00:19:12 +0530 Subject: [PATCH 3/3] script.js uploaded --- Total-Parallax/script.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 Total-Parallax/script.js diff --git a/Total-Parallax/script.js b/Total-Parallax/script.js new file mode 100644 index 0000000..ccd0469 --- /dev/null +++ b/Total-Parallax/script.js @@ -0,0 +1,14 @@ +function parallax(layer, distance, speed){ + const item = document.querySelector(layer); + item.style.transform = "translateY("+ -distance*speed + "px)"; +} +function hrparallax(layer, distance, speed){ + const item = document.querySelector(layer); + item.style.transform = "translateX("+ -distance*speed + "px)"; +} +document.addEventListener('scroll', function() { + parallax('.l1', window.scrollY, 0.5); + parallax('.l3', window.scrollY, -0.5); + hrparallax('.l4', window.scrollY, -0.5); + hrparallax('.l5', window.scrollY, 0.5); +});