Making a Birthday webpage that has scroll animation!
Tags: showdev, css, html, javascript
Published: 2022-10-16 18:49:25

## Introduction

Yesterday i made a private webpage for my freinds birthday that talks about how amazing they are. So i decided i should share how i made this! For the scroll animation i used `IntersectObserver` wich i will talk about in another post today so please follow me to see how it works! I'm also a begginer so if you want me to add any improvements please let me know. Make shure to scroll down to see how i made it.

**Here it is on codepen:**
{% codepen https://codepen.io/lensco825/pen/gOzqowN %}





## HTML layout

For the HTML i created 5 section each having a header, text, and an image. Some of the elements in the sections had `div`'s to seperate the `p` and `h1` elements from the images horizontally. I gave each section a class name that matches the color i'm gonna give them while for each child element i gave them a _hidden_ class name wich i'll use to give them a scoll animation. For the last section i gave one of the words in the heading a `span` element to style it differently later. Each of the images are pictures of my freind, but for this showcase we'll use different images to keep their privacy. Although for the last section i gave it a class name called _Final_ wich will show an image saying "Thank you!" on it.


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script defer src="app.js"></script>
</head>
<body>
    <section class="darkestPeach">
        <div class="hidden">
        <img src="https://gifimage.net/wp-content/uploads/2017/10/dancing-cat-gif.gif">
        </div>
        <div class="hidden">
        <h1>Happy Birthday Unicorn!</h1>
        <p>Even though i haven't seen your face in centuries. I hope you like this :D</p>
        </div>
    </section>
    <section class="darkPeach">
<div class="hidden">
    <h1>Yoshi!</h1>
<p>You're a pretty cool person who plays on the nintendo!</p>
<br>
<h1>Mmm Chezburger</h1>
<p>You like playing roblox! Best free game on Earth! We should play a game one day :o</p>
</div>
<img class="hidden" src="https://media.discordapp.net/attachments/701125768675065917/1030316445445398538/2022-10-13_9.png?width=1246&height=701" class="awards">
    </section>
    <section class="peach">
        <div class="hidden">
        <h1>You're an amazing freind!</h1>
        <p>
           To tell the truth, i didn't think i would be able to make this on time, but i tried my best to give you a showage
           of appreciation. Even though we don't talk a lot you're still my freind and i just wanted to show you that it's 
           not just your family who cares about you. I also made this to help improve my coding skills since i made this 
           website without any apps or extensions, it's just all code! I don't know a lot about you so i just put some 
           random images and an aeshetic image at the bottom. I hope you have an amazing year and uhh I'll make something
           even better for you next year! (p.s the section above is supposed to be all the hobbies that you master at, i
           should've asked more questions to put more hobbies there) 
        </p>
        </div>
        <img class="hidden" src="https://media.tenor.com/GdJRGf60YN4AAAAC/hugs-sending-virtual-hugs.gif">
    </section>
    <section class="lightPeach">
   <div class="hidden">
    <h1>One word, <span>Fantastic</span></h1>
    <p>That's the word i would use to describe you. Even though i don't know a lot about you it makes me wonderous.
        Anways your teasy ego is amazing, even though you don't text a lot you text more that Prishaa or the others. 
        There isn't really anything you should change about you (except for your response times on discord) so keep 
        being you the that's how you met most of us :). 
    </p>
    </div>
    <img class="hidden" src="https://media.discordapp.net/attachments/701125768675065917/1030315397121052762/2022-10-13_7.png?width=1246&height=701">
    </section>
    <section class="final"><h1 class="move">Thank You!</h1></section>
</body>
</html>
```
**Note:** You can make the image to the left and the text to the right or reverse it depending on the order you put them

 

## CSS

To layout the section i gave it a `min-height` of `500px`. I then gave each section flex and `align-items` to the center while  using `space-around` to space around each child element. I used `gap` and gave it the value of `5rem` to always space the elements apart. Then i made shure the html and body had `margin` set to 0 with the `height` and `width` set to `100%`. I gave the images a width of `300px` with a border radius of `10px` for extra styling. Finally i put a transition of `0.8s`. This is so later the `:hover` animation lasts `0.8s`. That animation causes the bottom margin to go up by `20px` with a `box-shadow` as well.


 For each section class i gave them different colors with some having differnet fonts and some having `grid` (for better layout). I gave the span element a `font-family` of `lobster`. For the last element i gave it a class called _move_ wich has the property `margin-right` that has the value of `1000px`(to make shure it doesn't block the image at the bottom).

Lastly i gave hidden class an `opacity` of `0` and gave their `transform` element `translateX(-100%)`. This is how our scroll animation starts so i then give it a `transition` of `1s` for `all`. Next is the show class, i gave it an `opacity` of 1 which is the same as 100%. The `transform: translateX` property goes back to `100%` as well. This means that at the end of the animation the content can be fully seen and placed right where it should be. 

 For the class called _Final_ i gave it a `background-image` with a `font-family` to have it as a thank you image.

```css
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&family=Lobster&family=Lora:ital@0;1&family=Poppins:wght@300;400&display=swap");

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  margin: 0;
  background-color: #f8ad9d;
}

section {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 5rem;
  min-height: 500px;
}

img {
  width: 300px;
  border-radius: 10px;
  margin-top: 50px;
  transition: 0.8s ease;
}

img:hover {
  margin-bottom: 20px;
  box-shadow: 12px 12px #07072c;
}

.darkestPeach {
  background-color: #f08080;
  font-family: "Poppins", sans-serif;
  color: antiquewhite;
}

.darkPeach {
  background-color: #f4978e;
}

.Peach {
  background-color: #f8ad9d;
  display: grid;
  grid-template-columns: 40% auto;
}

.lightPeach {
  background-color: #f7dba7;
  color: White;
  font-family: "Poppins", sans-serif;
}

.awards:hover {
  margin-bottom: 20px;
  box-shadow: 12px 12px wheat;
}

.gray {
  font-family: "Poppins", sans-serif;
}

.whitePeach {
  background-color: antiquewhite;
  display: grid;
  grid-template-columns: 50% 50%;
  font-family: "Poppins", sans-serif;
  word-wrap: break-word;
  justify-content: space-between;
  align-content: center;
}

.hidden {
  opacity: 0;
  transition: all 1s;
  filter: opacity(0);
  transform: translateX(-100%);
}

.show {
  opacity: 1;
  filter: opacity(100%);
  transform: translateX(0);
}

@media (prefers-reduced-motion) {
  .hidden {
    transition: none;
  }
}

span {
  font-family: "Lobster", cursive;
}

.final {
  gap: 1rem;
  font-family: "Dancing Script", cursive;
  background-image: url("https://media.discordapp.net/attachments/701125768675065917/1030317951141818398/2022-10-13_10.png?width=1246&height=701");
}

.move {
  margin-right: 1000px;
}
```
**Note:** I got the hex colors from [coolors.co](https://coolors.co/), it's a nice place to find hex colors!


## Scroll Animation

For the scroll Animation i used `IntersectionObserver` wich is used to observe changes in a targeted element(you can learn more [here](https://blog.webdevsimplified.com/2022-01/intersection-observer/)). I used it so when an element of a section _intersects_ and is now _observed_ the animation will start. First i made a `const` variable that stores all the elements with the class _hidden_ on it by using `document.querySelectorAll()`. I then made another `const` variable but this one has the `IntersectionObserver()`. Inside the Intersection Observer it has the property called `entries` wich means it can observe multiple entries. Due to this i needed to use a for loop over them so then i can run a conditonal check to find out if the entry is intersecting the viewport or not. `If` it's intersecting the _show_ class will be added to that element but for anything `else` that new class will be removed. This is so if the element isn't intersecting the viewport anymore the animation will go back making the animation run again whenever it in the viewport again. Finally i told the observer to observe each _hidden_ class element. 

```javascript
const hiddenElements = document.querySelectorAll(".hidden");

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry);
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    }
    else {
      entry.target.classList.remove('show');
    }
  });
})

hiddenElements.forEach((el) => observer.observe(el));
```