Any idea how this scrolling over scrolling is scripted/made?-CodePudding

yesterday I saw the website https://flare.xyz

When scrolling, you can see their transparent logo scrolls above an image, and the image itself is scrolling also, a bit slower. I have no idea how this can be made? Can someone give me any direction? With tooling or code only? Thank you in advance!

CodePudding user response：

It's simple - just move background on scroll

If you want parallax effect - try scrolling by factor 0.9 or smth, it makes background move slowly

const circle = document.querySelector('.circle')

document.addEventListener('scroll', (event) => {
  circle.style.backgroundPosition = `${window.scrollY}px 0`
})

.background {
  display: block;
  width: 400px;
  height: 1000px;
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, white, teal 30%, cyan 6%);
}

<div class=background>
  <div class=circle />
</div>

CodePudding user response：

Thank you very much Фарид Ахмедов! I tried it in 1 file, but it isn't working. What do I wrong? Next step is to use a background image instead of a gradient and use an image with transparent letters instead of a circle, but first I have to have this working :)

<HTML>
<HEAD>
    <style>
        .background
        {
          display: block;
          width: 400px;
          height: 1000px;
          background: orange;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .circle
        {
          width: 200px;
          height: 200px;
          border-radius: 50%;
          background: repeating-linear-gradient(45deg, white, teal 30%, cyan 6%);
        }
    </STYLE>
</HEAD>
<BODY>

    <SCRIPT>
        const circle = document.querySelector('.circle')

        document.addEventListener('scroll', (event) => 
        {
          circle.style.backgroundPosition = '${window.scrollY}px 0'
        })
    </SCRIPT>
    
    <div >
        <div  />
    </div>
    
</BODY>