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
+
+ + + + 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); +}); 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; + } +}