I created an HTML document where I show the image. Right now, these images can be scrolled up and down as we please, but how do I make the image appear and slightly move upwards when I scroll down and disappear when I scroll down too far?

The HTML Code I used is:

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

div.sticky {
  position: sticky;
  top: 0;
}

.bg {
  background-attachment: fixed;
  background-image: url(".jpeg");
  min-height: 3000px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

table {
  font-family: arial, sans-serif;
  table-layout: fixed;
  border-collapse: collapse;
  width: 900px;
}

table.center {
  margin-left: auto;
  margin-right: auto;
}

td {
  border: 1px solid #dddddd;
  padding: 8px;
}

<div class="bg">
  <div class="sticky">
    <div style="text-align: center; font-size: 80px; font-weight: bold; color: white;">I Like Journeys.</div>
  </div>
  <div style="padding: 200px; text-align: center; font-size: 80px; font-weight: bold; color: white;">Travels</div>
  <table class="center">
    <tr>
      <td align="center">
        <a href="/"><img border="0" alt="WTF" src=".jpg?resize=1250,1120" width="270px" height="270px">
      </td>
      <td align="center">
        <a href="/"><img border="0" alt="WTF" src=".jpg?resize=1250,1120" width="270px" height="270px">
      </td>
      <td align="center">
        <a href="/"><img border="0" alt="WTF" src=".jpg?resize=1250,1120" width="270px" height="270px">
      </td>
    </tr>
  </table>
</div>

I created an HTML document where I show the image. Right now, these images can be scrolled up and down as we please, but how do I make the image appear and slightly move upwards when I scroll down and disappear when I scroll down too far?

The HTML Code I used is:

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

div.sticky {
  position: sticky;
  top: 0;
}

.bg {
  background-attachment: fixed;
  background-image: url("https://iso.500px/wp-content/uploads/2013/08/11834033-1170.jpeg");
  min-height: 3000px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

table {
  font-family: arial, sans-serif;
  table-layout: fixed;
  border-collapse: collapse;
  width: 900px;
}

table.center {
  margin-left: auto;
  margin-right: auto;
}

td {
  border: 1px solid #dddddd;
  padding: 8px;
}

<div class="bg">
  <div class="sticky">
    <div style="text-align: center; font-size: 80px; font-weight: bold; color: white;">I Like Journeys.</div>
  </div>
  <div style="padding: 200px; text-align: center; font-size: 80px; font-weight: bold; color: white;">Travels</div>
  <table class="center">
    <tr>
      <td align="center">
        <a href="https://www.wikipedia./"><img border="0" alt="WTF" src="https://www.shutterstock/blog/wp-content/uploads/sites/5/2023/07/how_to_make_memes_with_stock_photos_cover.jpg?resize=1250,1120" width="270px" height="270px">
      </td>
      <td align="center">
        <a href="https://www.wikipedia./"><img border="0" alt="WTF" src="https://www.shutterstock/blog/wp-content/uploads/sites/5/2023/07/how_to_make_memes_with_stock_photos_cover.jpg?resize=1250,1120" width="270px" height="270px">
      </td>
      <td align="center">
        <a href="https://www.wikipedia./"><img border="0" alt="WTF" src="https://www.shutterstock/blog/wp-content/uploads/sites/5/2023/07/how_to_make_memes_with_stock_photos_cover.jpg?resize=1250,1120" width="270px" height="270px">
      </td>
    </tr>
  </table>
</div>

How do I make the image appear and slightly move upwards when I scroll down and disappear when I scroll down too far?

A simple example would suffice.

Thank you all!

• javascript
• html
• css

• Note that the align attribute has been obsolete for 25 years or so. – Rob Commented Nov 20, 2024 at 8:41

2 Answers 2

Your question was not totally cleared to me, but try this one if it's same as you want, otherwise you can reach me out with clear picture.

const image = document.getElementById('scrolling-image');

    // Listen for scroll events
    window.addEventListener('scroll', function() {
        const scrollPosition = window.scrollY; // Current scroll position
        const maxScroll = 300; // Max scroll point where the image starts disappearing

        // Calculate opacity and movement based on scroll position
        const opacity = Math.max(1 - (scrollPosition / maxScroll), 0); // Fade out as scroll increases
        const translateY = Math.min(scrollPosition / 2, 100); // Moves the image upwards slightly

        // Apply the changes to the image
        image.style.opacity = opacity;
        image.style.transform = `translateY(-${translateY}px)`; // Moves the image upwards
    });

body, html {
            height: 100%;
            margin: 0;
            overflow-x: hidden; /* Prevent horizontal scroll */
        }

        .bg {
            background-attachment: fixed;
            background-image: url("https://iso.500px/wp-content/uploads/2013/08/11834033-1170.jpeg");
            min-height: 3000px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .sticky {
            position: sticky;
            top: 0;
            z-index: 1;
            text-align: center;
            font-size: 80px;
            font-weight: bold;
            color: white;
            padding-top: 200px;
        }

        .image-container {
            position: relative;
            width: 100%;
            text-align: center;
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        }

        /* Styling for the image */
        .scrolling-image {
            width: 270px;
            height: 270px;
            opacity: 1;
            transition: all 0.3s ease-out;
            position: relative;
        }

        table {
            font-family: arial, sans-serif;
            table-layout: fixed;
            border-collapse: collapse;
            width: 900px;
            margin: 0 auto;
        }

        td {
            border: 1px solid #dddddd;
            padding: 8px;
        }

        .hidden {
            opacity: 0;
            transform: translateY(-100px); /* Moves the image upwards */
        }

<div class="bg">
    <div class="sticky">
        <div>I Like Journeys.</div>
    </div>

    <div class="image-container">
        <img id="scrolling-image" class="scrolling-image" src="https://www.shutterstock/blog/wp-content/uploads/sites/5/2023/07/how_to_make_memes_with_stock_photos_cover.jpg?resize=1250,1120" alt="Image">
    </div>

    <div style="padding: 200px; text-align: center; font-size: 80px; font-weight: bold; color: white;">Travels</div>

    <table>
        <tr>
            <td align="center"><a href="https://www.wikipedia./"><img border="0" alt="WTF" src="https://www.shutterstock/blog/wp-content/uploads/sites/5/2023/07/how_to_make_memes_with_stock_photos_cover.jpg?resize=1250,1120" width="270px" height="270px"></a></td>
            <td align="center"><a href="https://www.wikipedia./"><img border="0" alt="WTF" src="https://www.shutterstock/blog/wp-content/uploads/sites/5/2023/07/how_to_make_memes_with_stock_photos_cover.jpg?resize=1250,1120" width="270px" height="270px"></a></td>
            <td align="center"><a href="https://www.wikipedia./"><img border="0" alt="WTF" src="https://www.shutterstock/blog/wp-content/uploads/sites/5/2023/07/how_to_make_memes_with_stock_photos_cover.jpg?resize=1250,1120" width="270px" height="270px"></a></td>
        </tr>
    </table>

</div>

There is a library that gives the effect you are trying to achieve.

Aos library

You can utilise this library by following procedure.

npm install aos --save

add css and js cdn

<link href="https://unpkg/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg/[email protected]/dist/aos.js"></script>

and initiate the library on page load.

<script>
  AOS.init();
</script>

In html file, the element you want to apply animation add data-aos with animation name like following code.

<div data-aos="fade-up"></div>
<div data-aos="fade-down"></div>
<div data-aos="fade-right"></div>
<div data-aos="fade-left"></div>
<div data-aos="zoom-in"></div>
<div data-aos="zoom-out"></div>

And different other animations.

Otherwise, if You do not to use any library then this can be done by javascript.