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!
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>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 class="background">
<div class="circle" />
</div>
</BODY>