Question 415807 in Html Question posted in
Some basic documentation can be found here.

How to make image appear and disappear when we Scroll HTML?

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.com/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.org/"><img border="0" alt="WTF" src="https://www.shutterstock.com/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.org/"><img border="0" alt="WTF" src="https://www.shutterstock.com/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.org/"><img border="0" alt="WTF" src="https://www.shutterstock.com/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!

Tags:

2

Answers


  1. 0

    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.com/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.com/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.org/"><img border="0" alt="WTF" src="https://www.shutterstock.com/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.org/"><img border="0" alt="WTF" src="https://www.shutterstock.com/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.org/"><img border="0" alt="WTF" src="https://www.shutterstock.com/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>
    Login or Signup to reply.
  2. 0

    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.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

    and initiate the library on page load.

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

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search