updating main page

earthrise-media · Jan 6, 2024 · 449a49f · 449a49f
1 parent 2de4de7
commit 449a49f
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 7 deletions.
diff --git a/src/css/style.css b/src/css/style.css
@@ -130,6 +130,7 @@ figure p {
     background-image: url("../chicken-headshot-transparent80.png");
     background-position: center;
     background-repeat: no-repeat;
+    align-items: center;
     /* opacity: 0.8; */
 }
 #intro h1 {
@@ -348,6 +349,31 @@ figure p {
     margin: auto;
     /* background-color: #3b3b3b; */
 }
+#scroll-button {
+    border: none;
+    background-color: transparent;
+    padding: 1.5rem;
+    cursor: pointer;
+    align-items: center;
+    position: absolute;
+    bottom: 0px;
+}
+
+#scroll-button:hover {
+    svg {
+        transition: transform 0.5s ease-in-out;
+        transform: translateY(-10px);
+    }
+}
+#scroll-text {
+    font-family: PPEiko-black-italic;
+    font-size: 1rem;
+    color: #f5c53b;
+    align-items: center;
+    position: absolute;
+    bottom: 0px;
+}
+
 @media only screen and (max-width: 767px) {
     #dynamic-frame,
     #static-frame,

diff --git a/src/main.js b/src/main.js
@@ -17,7 +17,13 @@ document.querySelector("#app").innerHTML = `
             <p class="intro__dek">
                 We just found them.
 			</p>
-            
+            <br></br>
+            <button id="scroll-button" type="button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="128" height="52" viewBox="0 0 128 52" fill="none">
+                    <path d="M33.7945 14.7931L64 37.2069L94.2055 14.7931M25.1644 51H102.836C116.181 51 127 40.1931 127 26.8621V25.1379C127 11.8069 116.181 1 102.836 1H25.1644C11.8188 1 1 11.8069 1 25.1379V26.8621C1 40.1931 11.8188 51 25.1644 51Z" stroke="#F5C53B" stroke-width="2"/>
+                </svg>
+            </button>
+            <div id="scroll-text">SCROLL DOWN</div>
 		</section>
 
 		<section id="scrolly">
@@ -26,16 +32,16 @@ document.querySelector("#app").innerHTML = `
 
 			<article>
 				<div class="step" data-step="1">
-					<h1>THIS IS A CHICKEN</h1>
+					<h1 id="1-chicken">THIS IS A CHICKEN</h1>
 				</div>
 				<div class="step" data-step="2">
-					<h1>THESE ARE 1,000 CHICKENS</h1>
+					<h1>THIS IS 1,000 CHICKENS</h1>
 				</div>
 				<div class="step" data-step="3">
-					<h1>THESE ARE 10,000 CHICKENS</h1>
+					<h1>THIS IS 10,000 CHICKENS</h1>
 				</div>
 				<div class="step" data-step="4">
-					<h1 class="highlight">THESE ARE 100,000 CHICKENS</h1>
+					<h1>THIS 🟨 IS 100,000 CHICKENS</h1>
 				</div>
                 <div class="step" data-step="5">
 					<h1>There are 10 Billion Chickens raised in the United States every year</h1>
@@ -65,15 +71,22 @@ var step = article.selectAll(".step");
 
 // initialize the scrollama
 var scroller = scrollama();
+var scrollButton = document.getElementById("scroll-button");
+scrollButton.addEventListener("click", function () {
+    window.scrollTo({
+        top: window.innerHeight,
+        behavior: "smooth",
+    });
+}); 
 
 // generic window resize listener event
 function handleResize() {
     // 1. update height of step elements
     var stepH = Math.floor(window.innerHeight * 1);
     step.style("height", stepH + "px");
 
-    var figureHeight = window.innerHeight / 1;
-    var figureMarginTop = (window.innerHeight - figureHeight) / 5;
+    var figureHeight = window.innerHeight / 4;
+    var figureMarginTop = (window.innerHeight - figureHeight) / 2;
 
     figure.style("height", figureHeight + "px").style("top", figureMarginTop + "px");