zero-to-mastery · anna-kulyk · Feb 17, 2023
diff --git a/src/blocks/GannaKulyk/icon.png b/src/blocks/GannaKulyk/icon.png
diff --git a/src/blocks/GannaKulyk/images/fog_1.png b/src/blocks/GannaKulyk/images/fog_1.png
diff --git a/src/blocks/GannaKulyk/images/m_1.png b/src/blocks/GannaKulyk/images/m_1.png
diff --git a/src/blocks/GannaKulyk/images/m_2.png b/src/blocks/GannaKulyk/images/m_2.png
diff --git a/src/blocks/GannaKulyk/images/m_3.png b/src/blocks/GannaKulyk/images/m_3.png
diff --git a/src/blocks/GannaKulyk/index.html b/src/blocks/GannaKulyk/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Parallax Scrolling</title>
+	<link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+	<div class="wrapper">
+		<div class="page">
+			<div class="parallax">
+				<div class="parallax__mountain parallax__mountain_1"></div>
+				<div class="parallax__mountain parallax__mountain_2"></div>
+				<div class="parallax__mountain parallax__mountain_3"></div>
+				<div class="parallax__fog"></div>
+			</div>
+			<div class="content">
+				<div class="content__body">
+					<div class="content__header">
+						<h1 class="content__title">Hi!</h1>
+						<h2 class="content__subtitle">It's a Parallax Scrolling Effect</h2>
+					</div>
+					<div class="content__article">
+						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A praesentium ducimus quis vitae rerum quia nostrum quam eligendi in blanditiis. Incidunt totam consequuntur dicta soluta tempora minima unde eligendi est officia quo velit aspernatur debitis cupiditate, dolorem, earum voluptatem voluptates quidem dignissimos deserunt sapiente facilis sed ipsa. Distinctio, necessitatibus odit harum accusantium minus pariatur velit eveniet, consequuntur ullam suscipit hic cupiditate illum ipsam, temporibus dignissimos aliquam asperiores sapiente magnam dicta quisquam voluptatem! Voluptate illo odit enim nihil recusandae architecto molestiae aperiam nesciunt consequatur quasi facere quisquam, vitae maxime itaque at totam sed tempore numquam ratione nulla sequi voluptatum laboriosam magni exercitationem. Libero molestias labore voluptatibus cupiditate, quo necessitatibus accusamus reprehenderit facere harum laboriosam itaque omnis provident ullam optio corporis voluptate ducimus et eum molestiae minus fuga! Est maxime adipisci, earum beatae rem enim officiis delectus deleniti pariatur libero dolorum reprehenderit optio commodi! Corporis quas cum eos debitis iure nobis, tenetur harum, quaerat maxime non assumenda sint officiis quia aliquam placeat repellat. Perferendis doloremque dignissimos ea, nisi culpa, illum cum excepturi voluptate voluptates omnis tempore eos velit quasi mollitia hic sed adipisci accusantium possimus quod impedit. Repellat consequuntur at obcaecati velit illo. Neque maiores enim dolore iusto delectus sed alias asperiores vero! Quibusdam voluptatibus, non sint obcaecati sed autem commodi tempore magni iusto laudantium porro voluptatem doloremque error reprehenderit itaque enim velit fugit nihil distinctio. Id architecto earum modi laudantium nobis ducimus, odit neque sapiente dicta, cum illum minus nostrum temporibus officia. Dolore, laudantium nulla recusandae eius asperiores soluta suscipit accusamus autem voluptatem aliquid qui laboriosam maiores corporis placeat! Quasi debitis vitae enim, rem numquam neque, provident ex, non cum eaque eos voluptate est! Blanditiis non delectus corporis atque! Quia quos, sunt consectetur velit qui eum aperiam, beatae repudiandae dolorum, reprehenderit voluptate error exercitationem commodi consequatur enim! Fugit fugiat eos eveniet iure? Distinctio officia harum accusantium magnam nihil mollitia alias quisquam sapiente ad laborum, tenetur, assumenda, reiciendis incidunt saepe officiis quis molestias! Fugit voluptate aperiam aut deleniti ipsam error distinctio laboriosam exercitationem eligendi, placeat repellat animi tenetur nihil esse nulla officiis id, voluptatibus molestias corrupti odio tempore ullam rem! Omnis nam nisi animi, ex incidunt, rem delectus sequi, harum consequatur sed placeat maiores quod ea officia nihil expedita deleniti consequuntur? Nobis iste commodi doloremque quaerat atque laudantium quasi molestiae ipsum veniam voluptates excepturi quae ea deserunt cumque similique dolor mollitia corporis aspernatur ratione nam numquam odit, aliquid minus? Qui delectus in omnis quibusdam odit quos aspernatur. Minima, itaque deserunt quas nesciunt ducimus facere sunt provident ut! Alias dolore blanditiis dolorem, molestiae temporibus magnam ipsum delectus! Vel placeat iusto dolore aliquid earum! Iste nesciunt quia illum totam sapiente, possimus aut nisi tempore, quam voluptatem et ex omnis cum distinctio libero. Vitae nisi tempora sequi quod fugiat? Accusantium inventore minus nesciunt? Ab animi expedita accusantium molestias sequi, nobis totam magnam minima libero excepturi earum nulla sit, possimus, id quasi? Nobis iure facere quam! Nemo explicabo tempora at hic recusandae! Minus maiores enim quas veritatis perspiciatis aliquid asperiores quia, laborum quam soluta facere doloremque.</p>
+						<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam sed adipisci unde autem accusamus esse recusandae facilis, est quasi ut odio totam laborum nesciunt aspernatur expedita minima laboriosam. Praesentium officia sequi dolorem maxime non fuga nostrum, cupiditate enim quam. Accusamus aliquam perspiciatis saepe, quidem quas qui corrupti aut incidunt labore? Incidunt atque quae quos est amet. Distinctio, voluptatibus aliquid, velit, ducimus sit ullam placeat modi deleniti tempore cum architecto ratione perspiciatis accusamus. Corporis dolor nemo odio qui voluptatem, provident inventore iusto neque at quod quasi nulla dicta fugiat accusamus vitae deleniti, eum odit incidunt pariatur rerum quidem eligendi tempora dolorem molestiae? Suscipit perferendis, aspernatur facere id est dolore repellat adipisci. Ipsa repudiandae et ipsum similique. Fugit quas ipsa, recusandae reiciendis ratione ab minima culpa nesciunt veritatis dicta officia amet maxime nihil quasi aliquam eum inventore quam! Maxime quaerat ratione, architecto optio nostrum tempore voluptas soluta in accusantium vel! Quam quo minus rerum molestias possimus hic consequuntur. Molestias doloremque necessitatibus nulla odit corrupti earum incidunt illo velit consequuntur amet alias dolore voluptatibus, numquam labore optio deleniti culpa. Blanditiis voluptate architecto corrupti fuga iste suscipit! Totam, laboriosam iste, maiores eaque quis doloremque odit aut omnis vel voluptates veniam nesciunt aliquam ratione distinctio accusantium. Velit nemo quas nulla recusandae accusamus ex unde? Odit nesciunt ipsam a aperiam quos accusantium repudiandae provident suscipit, nemo vel. Odio natus eveniet excepturi ut. Laudantium neque in modi ipsum sed necessitatibus velit reprehenderit commodi, debitis provident amet. Amet veritatis mollitia tenetur architecto non velit fuga eum corporis doloremque, enim quasi deserunt, odit nobis ipsa tempora? Commodi error autem dolore minus similique eaque necessitatibus dolorem voluptatibus ratione et fugit maiores rerum nihil perferendis ad in, at tempore ullam. In velit minima, exercitationem ducimus nisi placeat veniam impedit sapiente natus debitis maxime praesentium doloremque dolor eveniet, laudantium, eius minus veritatis vero? Beatae vel doloremque unde dolor nostrum modi excepturi tempore. Modi eum odio dolore aliquid labore quaerat impedit officia atque quasi itaque? Provident quos facere explicabo alias soluta debitis quidem assumenda beatae optio quas ut reprehenderit ipsam ipsum, error ipsa illum architecto dolore dicta cupiditate, esse adipisci dolorem consequatur fugiat harum. Quisquam molestias accusantium debitis possimus expedita odio molestiae maxime illum reiciendis ipsum non quia consequatur, perferendis cumque necessitatibus exercitationem ipsa soluta totam labore laudantium ratione velit. Inventore provident blanditiis porro nulla illo nihil ex deserunt minima ut sapiente saepe cum temporibus praesentium quam vel, facere sunt, neque ad facilis aperiam nostrum pariatur obcaecati ducimus quo. Laudantium exercitationem praesentium ratione at. Dignissimos veritatis temporibus aspernatur cupiditate asperiores alias at ex rem consequuntur consectetur. Quas totam obcaecati deserunt dolore est soluta, corporis at ex eligendi vitae nemo temporibus nam, aut nobis sint maxime accusantium. Iusto impedit aliquam non labore necessitatibus quasi molestias commodi sed consectetur saepe? Deleniti tempore mollitia architecto, facilis atque fugit? In delectus ducimus libero sed impedit voluptas, totam, sit soluta sint hic vel iusto veritatis exercitationem quibusdam est? Corrupti dolorem at non id tempore animi obcaecati provident similique, architecto natus debitis dolore, libero itaque alias? Eum, culpa assumenda?</p>
+
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<script type="text/javascript" src="script.js"></script>
+</body>
+</html>
diff --git a/src/blocks/GannaKulyk/meta.json b/src/blocks/GannaKulyk/meta.json
@@ -0,0 +1,5 @@
+{
+    "block_name": "Parallax Scrolling",
+    "author_name": "Ganna Kulyk",
+    "author_github_url": "https://github.com/anna-kulyk/"
+}
diff --git a/src/blocks/GannaKulyk/script.js b/src/blocks/GannaKulyk/script.js
@@ -0,0 +1,31 @@
+window.addEventListener('load', () => {
+    window.addEventListener('scroll', () => {
+        let scrollValue = window.scrollY;
+        let screenWidth = window.outerWidth;
+        let contentHeight = document.querySelector('.content').offsetHeight;
+        let parallaxHeight = document.querySelector('.parallax').offsetHeight;
+
+        let contentScrollPercent = scrollValue / contentHeight * 100;
+        let parallaxScrollPercent = scrollValue / parallaxHeight * 100;
+        let opacity = 1 - 1 / 100 * parallaxScrollPercent;
+
+        let fog = document.querySelector('.parallax__fog');
+        let fogScale = 1 + (screenWidth / 10000 * parallaxScrollPercent);
+        fog.style.transform = `scale(${fogScale})`;
+        fog.style.opacity = `${opacity}`;
+
+        let mountain1 = document.querySelector('.parallax__mountain_1');
+        let mountain1Scale = 1 + (screenWidth / 5000000 * contentScrollPercent);
+        mountain1.style.transform = `scale(${mountain1Scale})`;
+
+        let mountain2 = document.querySelector('.parallax__mountain_2');
+        let mountain2Scale = 1 + (screenWidth * 0.000005 * parallaxScrollPercent);
+        let mountain2TranslateX = screenWidth / 2000 * parallaxScrollPercent;
+        mountain2.style.transform = `translate3d(${mountain2TranslateX}px,0,0) scale(${mountain2Scale})`;
+
+        let mountain3 = document.querySelector('.parallax__mountain_3');
+        let mountain3Scale = 1 + (screenWidth * 0.00001 * parallaxScrollPercent);
+        let mountain3TranslateX = screenWidth / 1500 * parallaxScrollPercent;
+        mountain3.style.transform = `translate3d(${mountain3TranslateX}px,0,0) scale(${mountain3Scale})`;
+    })
+})
diff --git a/src/blocks/GannaKulyk/style.css b/src/blocks/GannaKulyk/style.css
@@ -0,0 +1,85 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.wrapper {
+}
+
+.page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+.parallax {
+    position: relative;
+    height: 100%;
+}
+
+.parallax__mountain {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+.parallax__mountain_1 {
+    background: url(images/m_1.png) 0 0 / cover no-repeat;
+}
+
+.parallax__mountain_2 {
+    z-index: 1;
+    background: url(images/m_2.png) bottom right / 45% no-repeat;
+}
+
+.parallax__mountain_3 {
+    z-index: 1;
+    background: url(images/m_3.png) bottom left / 100% no-repeat;
+}
+
+.parallax__fog {
+    background: url(images/fog_1.png) bottom / 100% no-repeat;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    transition: opacity 0.3s ease 0s;
+}
+.content {
+    position: relative;
+}
+
+.content__body {
+    max-width: 1170px;
+    margin: 0 auto;
+    padding: 0 15px;
+}
+
+.content__header {
+    text-align: center;
+    text-transform: uppercase;
+    margin-bottom: 20px;
+    padding: 0px 20px;
+}
+
+.content__title {
+    font-size: 150px;
+}
+
+.content__subtitle {
+    font-size: 80px;
+    text-transform: capitalize;
+}
+
+.content__article {
+    text-align: justify;
+    text-indent: 25px;
+    font-size: 18px;
+    line-height: 24px;
+}