Overlaying an image while scrolling

94
February 16, 2022, at 09:10 AM

If you look at the picture attached you can see a picture of a person then a white space with a border radius. I wanted to know if there is a way while scrolling down for the white space the overflow the image, and while scrolling up to show the image again. I am looking to code this using HTML, CSS, and JS This could be an example of what I am trying to do :example

<div class="description panel blue">
  <div><h1>Layered pinning</h1>
    <p>Use pinning to layer panels on top of each other as you scroll.</p>
    <div class="scroll-down">Scroll down<div class="arrow"></div></div>
  </div>
</div>

<section class="panel red">
    ONE
</section>
<section class="panel orange">
    TWO
</section>
<section class="panel purple">
    THREE
</section>
<section class="panel green">
    FOUR
</section>


<header>
   <a href="https://greensock.com/scrolltrigger">
     <img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
  </a> 
</header>

JS:

gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray(".panel").forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: "top top", 
    pin: true, 
    pinSpacing: false 
  });
});

ScrollTrigger.create({
  snap: 1 / 4 // snap whole page to the closest section!
});

overlay picture

Rent Charter Buses Company
READ ALSO
How to fix a SCSS to CSS Error: Funtion backgroud

How to fix a SCSS to CSS Error: Funtion backgroud

This is a massive themescss

139
I am not able to add custom CSS to the scroll bar that i have created in a Card component in MUI react

I am not able to add custom CSS to the scroll bar that i have created in a Card component in MUI react

When I create a custom styles for the scroll bar by importing makeStyles function and store that under the useStyles hook and when I fire that hook and store it under classes, and finally use that classes inside class name of Card component, I see scrollbar...

152
Images not displaying after first attempt

Images not displaying after first attempt

I am programming a psychological experiment where participants are playing an online game with six other players and in each round of the game, the active player can either lose or win (Image 1)After each round of the game, participants are asked to report...

121
How to scale down page content to fit window.print()

How to scale down page content to fit window.print()

I have a problem with windowprint function

169