Hide an image in CSS when scrolling down

My goal is to incorporate an animation that shifts an image, and as the user scrolls down, the content will hide this image.

If I use an image without any animation like this one, everything functions properly and the content hides the image when the user scrolls down.

  header {
    height: calc(100vh - 22px);
    background-size: cover;
    background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988534/header.jpg") fixed bottom;
    padding: 20px 70px;
}

However, upon attempting to apply keyframes for the animation and scrolling down, the content fails to hide the image.

 @keyframes background {
    0% {
        background: url(https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988534/header.jpg) no-repeat 50% 30%;
        background-size: 100%;
        transition: background 0.5s ;
   }
    100% {
        background: url(https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988534/header.jpg) no-repeat 50% 60%;
        background-size: 100%;
        transition: background 0.5s ;
   }
}
css

Answer №1

If you want an element to trigger when scrolling, JavaScript is necessary:

When the document is scrolled, an event listener will be activated. Check if the scroll position reaches 350px. If it exceeds 350px, the header opacity will be set to 0. When the scroll position is less than or equal to 350px, the opacity value will be calculated.

Assign the id "header" to the header:

<header id="header">
</header>

JS:

let header = document.getElementById('header');

document.addEventListener('scroll', function() {
    let scrollPosition = window.pageYOffset;

    if (scrollPosition <= 350) {
        header.style.opacity = 1 - scrollPosition / 350;
    } else {
        header.style.opacity = 0;
    }

});

(In response to the comment below)

How to keep the background image fixed

To make the image stay in place while content moves over it, use the background-attachment property in CSS.

#header {
   width: 100%;
   max-height: 100vh;
   background-image: url(); /* Set the background image */
   background-attachment: fixed; /* Prevent the image from scrolling with the page */
}

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

PHP file unable to access Bootstrap file

I have my bootstrap css file stored in the following directory: C:\Users\SCEA\Downloads\bootstrap-3.3.7\css When linking this css file to my php file, I used the absolute path: <link href="C:\Users\SCEA\Downl ...

csspath

Angular 2.0 in conjunction with D3.js does not style SVG elements using CSS

Currently, I am utilizing Angular 2.0 TypeScript along with the d3.js library to create graphics. My main focus is on applying CSS to the axis (especially shape-rendering: crispEdges;). Do you have any suggestions? Check out the code below: var vis = d3 ...

cssd3.jssvgangular

Ways to create spacing between vertically stacked columns in Bootstrap

I have created a website using Bootstrap and PHP to display data from 18 categories in columns. The code for listing the categories in a single row is shown below: <div class="row"> <?php foreach($categories as $val){?> <div class="col ...

htmlcssbootstrap-4rowspacing

Achieving Horizontal Alignment of jQuery within HTML utilizing CSS

I'm struggling to center the ASlider Jquery plugin () that I've added to my website's HTML code using CSS. No matter what I try, it stubbornly remains fixed to the left side of the page. I attempted using CSS properties like float, display, ...

javascriptjqueryhtmlcss

Align elements horizontally

Currently, I am developing a blog application using React, Material UI, and Tailwindcss. One issue I am facing is that each postcard in the grid has a different height, and I want all cards to have the same height while keeping all children aligned in the ...

javascriptcssreactjsmaterial-uitailwind-css

What could be causing the failure of the update for this computed property in my Vue 3 application?

Currently, I am in the process of creating an audio player using Vue 3 and the Napster API. About the Project I have managed to make the vinyl rotate by utilizing a CSS keyframes-based animation paired with the computed property isSpinning. I intend for ...

javascriptcssvue.jsvuejs3

Troubleshooting problems with CSS borders and margins in the anchor element

Having a peculiar box-model issue here. My header is filled with links, but despite setting 0px margins, the links are displaying with 2px margins around each one. To demonstrate the problem, I've created a test page located at . Ideally, each link i ...

htmlcss

Is there a way to have my MUI Typography component display a unique image cursor when hovered over?

After some testing, I found that setting the cursor to cursor: pointer works perfectly fine. However, my goal is to use a custom image as a cursor. The image is saved in both my src and public folders, but I seem to be struggling with the syntax when using ...

javascriptcssreactjsmaterial-ui

The image slider on the front end is malfunctioning

Starting out as a novice on a new website project, I typically work with Dreamweaver and also do some hardcoding in HTML and CSS. This is why I decided to try my hand at Magento. While making a change in the CMS / Static Block section, I accidentally brok ...

javascriptjqueryhtmlcssmagento

Creating multifunctional arrays in HTML tables

My goal is to create tables where each cell changes its class upon being clicked. As I set up the table, I want to track the history of clicked cells in an array. Currently, the history array is stored in the 'clicked' array: array=[1,4,6,9] ...

javascriptjqueryhtmlcssarrays

Ways to horizontally line up text boxes

I need help aligning two textboxes next to their display names in a single line. I'm currently using dl, dt, and dd, but I'm having trouble getting them to align horizontally. Any suggestions on how to achieve this alignment would be greatly appr ...

csshtml

The HTML Style for implementing HighChart title text does not work when exporting files

I have inserted the <br/> and &nbsp; HTML tags into the HighChart titles. The style changes successfully appear in the chart view, but unfortunately, when exported as PNG or JPEG images, the text style fails to apply in the resulting images. To s ...

javascripthtmlcsshighchartsstyles

Sneak beneath another element with a div's sliding movement

I'm attempting to make an absolutely positioned div element (#slideout) slide underneath another div element .menu using CSS, if possible. Check out my code here. Currently, when the red tab is clicked, #slideout covers .menu, but I want it to hide ...

jquerycssresponsive-design

Unpacking Django's request processing: Understanding the logic behind choosing one URL pattern over another

Currently enrolled in a free online Django course and faced with a perplexing issue related to request processing in Django. The application I am working on consists of a single module with two pages that inherit from a layout template - an index page with ...

pythonhtmlcssdjango

How to Position Elements using Bootstrap and CSS

I am facing a simple issue with my webpage: I am unable to center the div-image in the header and align the content vertically. This is the current setup: https://i.sstatic.net/uFViw.png The desired position for the image is POS. I have tried methods lik ...

htmlcssbootstrap-4

Error: The parent selector "&" cannot be used in top-level selectors. $::webkit-input-placeholder

I am facing an issue while trying to run a legacy create-react-app that utilizes Sass. Initially, when I ran npm start, I encountered the error 'Cannot find module sass', which resembled the message found in this stack overflow post. To resolve t ...

javascriptcssnode.jsreactjssass

Using Jquery to create a hover effect on a parent div that affects two of its grandchildren and one of its children

Hey folks, I'm looking to translate this CSS hover effect into jQuery code. Below is the CSS version for hovering: index.html <div class="container-fluid"> <div class="row why-us-box"> <div class="why-item col-xs-12 c ...

jquerycss

Determine whether the Bootstrap data-style attribute is enabled or disabled

I have a bootstrap checkbox that I would like to trigger an alert dialog when it is switched off. <div class="row"> <link href="css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="javascript/bootstrap-toggle.min.js ...

javascriptjqueryhtmlcss

In Vue, it is not accurate to measure overflow

I am working on creating an overflow effect with tagging that fades out at the beginning to provide a subtle hint to users that there is more content. Here is what it currently looks like: https://i.stack.imgur.com/fXGBR.png To achieve this, I added a fa ...

javascripthtmlcssvue.js

What is the most efficient method of organizing form components together?

After exploring numerous tutorials, I have yet to discover the ideal solution for properly marking up a form that contains logical groupings of elements such as labels, controls (input or select), and previous values - essentially single fields. My prefer ...

htmlcssforms