• CTRL ALT News
  • Posts
  • Create a PARALLAX Landing Page for Beginners [HTML/TailwindCSS/Javascript]

Create a PARALLAX Landing Page for Beginners [HTML/TailwindCSS/Javascript]

In this guide I will show you how to create a simple parallax scrolling hero section, using HTML, TailwindCSS, and Javascript. The effect will have moving images, changes to saturation on the images, and auto-scrolling text.

Author

CTRL ALT News
December 28th, 2023

The Project

Get the source code here.

Watch the video version:

File Setup

First, you need to create a folder you want the project to be in, the name does not matter. Inside this folder create a file called “index.html”, this is where all our code will be placed. We also need a folder beside your “index.html” file, call this folder “assets”. In the “assets” folder our images will be placed, these can be found in the source code linked above. Our file structure should look like this: 

Project-Folder/
    ├── index.html
    └── assets/
        ├── Background.png
        ├── Left.png
        ├── Right.png
        └── Top.png

Code and Explanation:

All the code can be found below or in the source code linked above. All the code should be placed inside “index.html”: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Document</title>
</head>

<body>
  <div class='w-full h-screen relative overflow-hidden flex items-center justify-center'>
    <img src="/assets/Top.png" alt="asdf" class='absolute z-10 saturate-50 top-0 left-0 w-full'
      id="topImg" />
    <img src="/assets/Left.png" alt="asdf" class='absolute z-20 saturate-50  top-0 left-0 w-full'
      id="leftImg" />
    <div class='z-30 text-white flex flex-col leading-[0.9]' id="textTitle">
      <h1 class='text-[12rem] font-semibold'>KENSIGNACH</h1>
      <h2 class='text-[18rem] font-bold'>TERRAIN</h2>
    </div>
    <img src="/assets/Right.png" alt="asdf" class='absolute z-40 saturate-50  top-0 left-0 w-full' id="rightImg" />
    <img src="/assets/Background.png" alt="asdf" class='absolute saturate-50' id="bgImg" />
  </div>

  <div class="w-full h-screen flex items-center justify-center">
    <div class="w-full h-full max-w-7xl p-16 flex flex-col gap-8">
      <h3 class="font-bold text-2xl">Kensignach Terrain</h3>
      <p class=" overflow-auto">Very long text... use "lorem750" to generate</p>
    </div>
  </div>

  <script>
    const rightImg = document.getElementById("rightImg");
    const leftImg = document.getElementById("leftImg");
    const topImg = document.getElementById("topImg");
    const bgImg = document.getElementById("bgImg");
    const textTitle = document.getElementById("textTitle")


    window.addEventListener("scroll", () => {
      const scrollValue = window.scrollY;
      const desatAmount = scrollValue / rightImg.offsetHeight;

      textTitle.style.marginLeft = `${scrollValue * 2}px`
      rightImg.style.marginLeft = leftImg.style.marginLeft = `-${scrollValue * .05}px`;
      leftImg.style.transform  = rightImg.style.transform = `scale(${scrollValue * 0.00015 + 1})`;
      topImg.style.transform = `scale(${scrollValue * 0.0005 + 1})`
      bgImg.style.transform = `scale(${scrollValue * 0.001 + 1})`
      rightImg.style.filter = leftImg.style.filter = topImg.style.filter = bgImg.style.filter = `saturate(${0.5 - desatAmount})`;
    });

  </script>
</body>

</html>

  • HTML/TailwindCSS:

    • First of all, we import the TailwindCSS script using a CDN inside the <header> tag.

    • Inside the body, we create our two primary divs, each of a height of 100vh (The height of the screen). The first one is where the parallax effect will take place, the second one is just some placeholder text.

    • The images are placed on different z-indexes to let them stay on top of each other, without manipulating each other. This can only be done because they have a position of absolute.

    • The background image does not have a z-index property, this is to put it behind everything else.

    • The text is put right behind the right image but on top of everything else. This cuts off the text on the right side, where it will scroll out.

  • Javascript

    • Gets references to the rightImg, leftImg, topImg, bgImg and textTitle elements using getElementById

    • On scroll, it calculates:

      • scrollValue - the number of pixels scrolled vertically

      • desatAmount - a value from 0 to 0.5 based on the scroll amount and rightImg's height. This will be used to desaturate the images

    • It updates on scroll:

      • textTitle's marginLeft to scrollValue * 2 - parallax the title text

      • rightImg and leftImg's marginLeft to create a perspective scrolling effect

      • rightImg, leftImg, topImg and bgImg's transform scale to zoom the images in and out as you scroll

      • All images' filter saturation based on desatAmount to desaturate them as you scroll