Fade-in effect applied to images upon exposure

Question

Fade-in effect applied to images upon exposure

Is there a way to fade in an image based on the percentage scrolled, rather than a set number of pixels? I want my website to be responsive and adjust to all screen resolutions. Or perhaps is there a method to have the image fade in when it enters the field of vision?

Below is the code snippet:

$(document).ready(function(){
    $(window).bind("scroll", function() {
if ($(this).scrollTop() > 300) {
    $("#bluprintdesign").fadeIn();
} else {
    $("#bluprintdesign").stop().fadeOut();
}

Currently, the image fades in at 300px scrolled and fades out as you scroll back up. While this is effective, I would prefer it to be based on percentages for better responsiveness.

Appreciate any help or suggestions!

javascript jquery html css dreamweaver

Answer 1

Answer №1

Presented here is a method titled showImages() which computes the scroll point of the bottom of the viewport by adding your $.scrollTop() to $(window).height(). This method adds a class to hidden images when half of the image has passed the bottom of the viewport. The function is triggered on both $(document).ready(); and $(window).on('scroll'); events to load images in the viewport during page load and while scrolling.

By utilizing opacity: 0 instead of display: none (used by $.fadeIn()/$.fadeOut()), you maintain the layout of the page as the image occupies space within the document. This approach allows for easy calculation of the image's height (critical for determining when half of it is in view) without any complex tricks, preventing page jumps that occur with toggling the display property.

There are various libraries available to automate this process. One popular option is jQuery waypoints.

function showImages() {
  var $window = $(window),
    thresh = $window.scrollTop() + $window.height();
  $('img:not(.show)').each(function() {
    if (thresh > $(this).offset().top + ($(this).outerHeight() / 2)) {
      $(this).addClass('show');
    }
  });
}
$(window).on('scroll', function() {
  showImages();
})
$(function() {
  showImages();
})

section {
  height: 200vh;
  border-top: 1px solid black;
}
img {
  opacity: 0;
  transition: opacity .25s;
}
.show {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>
<section>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>
<section>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>

Answer 2

Presented here is a method titled showImages() which computes the scroll point of the bottom of the viewport by adding your $.scrollTop() to $(window).height(). This method adds a class to hidden images when half of the image has passed the bottom of the viewport. The function is triggered on both $(document).ready(); and $(window).on('scroll'); events to load images in the viewport during page load and while scrolling.

By utilizing opacity: 0 instead of display: none (used by $.fadeIn()/$.fadeOut()), you maintain the layout of the page as the image occupies space within the document. This approach allows for easy calculation of the image's height (critical for determining when half of it is in view) without any complex tricks, preventing page jumps that occur with toggling the display property.

There are various libraries available to automate this process. One popular option is jQuery waypoints.

function showImages() {
  var $window = $(window),
    thresh = $window.scrollTop() + $window.height();
  $('img:not(.show)').each(function() {
    if (thresh > $(this).offset().top + ($(this).outerHeight() / 2)) {
      $(this).addClass('show');
    }
  });
}
$(window).on('scroll', function() {
  showImages();
})
$(function() {
  showImages();
})

section {
  height: 200vh;
  border-top: 1px solid black;
}
img {
  opacity: 0;
  transition: opacity .25s;
}
.show {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>
<section>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>
<section>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>

Fade-in effect applied to images upon exposure

Answer №1

Similar questions

Can a snapshot be taken of an auto-generated ID document in FireStore?

What could be causing the malfunction in my JavaScript random selector?

The window failed to redirect to the intended URL provided by the Json response

What is the best way to identify a specific AdWords account while utilizing campaignSelector within AdWords scripts?

Can you explain how to create a function in Angular that accepts a number as an argument and then returns the square of that number?

Could someone provide an explanation for this Jquery?

Verify whether a web application is equipped with React, Angular, or Vue

Issues arise when attempting to transmit JSON data from JavaScript to the server using the POST method

JavaScript is failing to update the table values as users interact with it

What steps can be taken to resolve the issue of the <td> element not being allowed as a child of an <a> tag?

Error: Angular encountered an unexpected token in the syntax

Is there a method available to minimize the size of a local storage list containing strings?

How to incorporate HTML 5 video into your Angular 2 project using Typescript

express.js does not properly support the app.get functionality

What causes an asynchronous function to exhibit different behavior when utilized in conjunction with addEventListener versus when manually invoked?

I'm new to Angular and I'm wondering how to close the panel by clicking on the 'x' button and also by clicking on the screen. Can anyone help me with this

Are there any plugins available that can create a Ken Burns effect using JQuery?

Using Formik with MUI Multiple Select

Why do I keep encountering a null window object issue while using my iPhone?

What is the best way to integrate a Next.js Image component with a set width and an adaptable height in order to maintain the image's proportions?