Is there a way to gradually reveal an element as I scroll to a specific position?

If the window top position is about 100px from the bottom, I want to create a fading in/out effect for the element overlay.

Check out this image

Any ideas on how to achieve this?

.section-card{
    position: relative;
    height: 500px;
    line-height: 500px;
    text-align: center;
    font-size: 46px;
    color: #fff;
    background: #777;
}

.section-card:nth-child(2) {
    background: #666;
}

.section-card:nth-child(3) {
    background: #555;
}

.section-card:nth-child(4) {
    background: #444;
}

.section-card:nth-child(5) {
    background: #333;
}

.overlay{
    pointer-events: none;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    background-color: #000;
    opacity: 0;
}
<div class="section-card">
1
<div class="overlay"></div>
</div>
<div class="section-card">
2
<div class="overlay"></div>
</div>
<div class="section-card">
3
<div class="overlay"></div>
</div>
<div class="section-card">
4
<div class="overlay"></div>
</div>
<div class="section-card">
5
<div class="overlay"></div>
</div>

javascriptjqueryhtmlcss

Answer №1

Here is a sample solution on how to achieve what you want:

var overlays = document.querySelectorAll('.overlay');
var totalOverlays = overlays.length;
var overlayToChange = overlays[totalOverlays - 1];
document.addEventListener('scroll', function(){

var fromBottom = document.body.offsetHeight - (window.innerHeight + window.scrollY);

if(fromBottom <= 100){
overlayToChange.style.opacity = 0.5;
overlayToChange.style.visibility='visible'
}else{
overlayToChange.style.opacity = 0;
overlayToChange.visibility='hidden';
}

});
.section-card{
    position: relative;
    height: 500px;
    line-height: 500px;
    text-align: center;
    font-size: 46px;
    color: #fff;
    background: #777;
}

.section-card:nth-child(2) {
    background: #666;
}

.section-card:nth-child(3) {
    background: #555;
}

.section-card:nth-child(4) {
    background: #444;
}

.section-card:nth-child(5) {
    background: #333;
}

.overlay{
    pointer-events: none;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    background-color: #000;
    opacity: 0;
width: 100%;
height: 100%;
transition: opacity .5s ease-out;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Overlays</title>
</head>
<body>
<div class="section-card">
1
<div class="overlay"></div>
</div>
<div class="section-card">
2
<div class="overlay"></div>
</div>
<div class="section-card">
3
<div class="overlay"></div>
</div>
<div class="section-card">
4
<div class="overlay"></div>
</div>
<div class="section-card">
5
<div class="overlay"></div>
</div>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Detecting button clicks in different views using Backbone.js

In my current setup, I have a main parent view called View.A which is responsible for managing two child views - View.B and View.C. Specifically, View.B contains buttons that trigger events on that view. Configuration View.A View.B view.B.template. ...

javascriptjquerybackbone.js

Exploring search results using dynamic multiple dropdown lists in PHP

Be sure to check out this interesting link: There are six drop down boxes available on the page. These include options for STATE, DISTRICT, LOCATION, MEDICINE, SPECIALTY, and GRADE. I successfully retrieved all the necessary data from the SQL database to ...

phpjquerymysqlajax

Establishing the types of object properties prior to performing a destructuring assignment

Consider a scenario where a function is utilized to return an object with property types that can be inferred or explicitly provided: const myFn = (arg: number) => { return { a: 1 + arg, b: 'b' + arg, c: (() => { ...

javascripttypescripttypescript-types

Does using the useState() hook in React automatically empty out the input fields?

Every time I update a state in my React application, it mysteriously erases the content of my inputs like checkboxes and numbers. Let me share a simple example to demonstrate this issue. import React, { useState } from "react"; export default fun ...

javascriptreactjs

DataTables.Net Buttons not appearing in the interface

I have a basic MVC project that utilizes BootStrap4 and dataTables.Net. When the page loads, an Ajax call is made to fetch data for a table. However, despite following the documentation, I'm unable to get the buttons to display on the page. Everything ...

javascriptajaxmodel-view-controllerdatatables

The failure of jQuery AJAX error callback to execute

I'm currently facing an issue with an AJAX call that I have in my code. Here's the code snippet: $.ajax({ type: "get", url: "xxx.xxx.xxx/xxx.js", dataType: 'jsonp', success: function(data) { ...

javascriptjqueryajaxjsonp

When scrolling back to the top of the page, the data-spy feature does not re-highlight the "Home" anchor

After experimenting with Data-spy to change the active anchor while scrolling, I encountered an issue. Upon scrolling back up to the top of the page from the about section, the "Home" anchor failed to re-activate. How can this be fixed? I attempted to rem ...

javascripthtmlcsstwitter-bootstrapscroll

The functionality of the onclick and onserverclick attributes seem to be malfunctioning when

I am in the process of creating a basic login screen using the code provided below: <form id="login"> <div class="formHeader"> <h1>Login</h1> </div> <div class="formDiv"> <input type="text" placeholder="Email" na ...

c#htmlasp.net

Modifying arrays in ReactJS

Having trouble editing my array list, need some help. I can update a single input value successfully, but struggling with updating the entire array. Any suggestions on why the method isn't working and how to edit the array? When I try to store data ...

javascriptreactjs

The Bootstrap tab feature is malfunctioning when a tab is using data-target instead of href

While developing bootstrap tabs for an Angular app, I decided to use the data-target attribute instead of the href attribute to avoid any interference with routes. Here's a snippet of how I structured the tabs: <ul class="nav nav-tabs" id="myTab"& ...

javascripthtmlcsstwitter-bootstrapangularjs

Is there additional cushioning beneath an image within a div element?

It appears that my div containing an image has extra padding at the bottom for some unknown reason. You can view the JSFiddle here: http://jsfiddle.net/KSs7V/ Any suggestions on how this padding might have been added and how to correct it? CSS: .artist ...

htmlcss

Using jQuery to Toggle the Height of Multiple Sections with a Single Function

I've got three different sections, each with varying heights and a simple structure like this: <section> <h2>My heading</h2> </section> What I want is for these sections to display at first, but then shrink dow ...

javascriptjqueryheighttoggleaccordion

React not showing multiple polylines on the screen

I'm currently working on an application aimed at practicing drawing Kanji characters. To draw the lines, I'm utilizing svg. The issue I've encountered is that when I try to draw multiple separate lines using a 2D array of points for each lin ...

javascriptreactjssvg

The download attribute is not functioning properly on both Chrome and Edge browsers

I've been trying to use the download attribute, but it doesn't seem to be working. I have also attempted to use the target attribute to see if there are any issues with downloading from the server or from a web (https) source. Unfortunately, noth ...

javascripthtmlcssxhtml

What is the proper way to utilize xpath for locating an element that has two specific descendants?

I'm faced with a challenge involving an unordered list of dynamically generated list items, each containing labels and values. My goal is to validate that the list includes a specific label with a specific value. I'm grappling with crafting an x ...

htmlxpathprotractor

What occurs when multiple HTML tags are assigned the same string as their ID attribute value?

While browsing a html page, I stumbled upon several tags that I thought had the same id. It turns out they were unique, but it got me thinking - what would happen if multiple tags actually shared the same id? I've always heard that the id attribute o ...

javascriptjqueryhtmlcross-browser

Problem with geocoding to retrieve a list of terrestrial coordinates

I am currently working on developing a functionality that can return an array of land-based coordinates. I have utilized Google's geocoder to create individual land-based coordinates successfully, but now I want to implement it in a way where an array ...

javascript

Navigate to a different web page within the body tag without changing the current URL by utilizing a hash symbol

I am working with two HTML files, index.html and about.html. My goal is to display the content of about.html within my index.html without navigating away from it. After observing many websites, I noticed that they often use #about in their URLs to dynamic ...

javascriptphphtmlcss

Obtain the language of a Wordpress page using javascript

Is there a way to determine the language of a Wordpress page using Javascript? I have discovered a method to detect Spanish: if(window.location.href.indexOf("/es/") > -1) { However, if the website does not use Permalink Settings with "Post name", th ...

javascriptwordpresslocation

Node.js - Error: JSON.Parse and JSON.Stringify are not recognized as functions

Is it possible to convert a string to JSON and vice versa without any additional npm packages? I am currently using JSON.Stringfy in my router.js file. Are there any specific npm modules that need to be added to the project in order to use the JSON.Stringf ...

javascriptjsonnode.jsexpressnpm