โŒ

Normal view

There are new articles available, click to refresh the page.
Before yesterdayMain stream

Force child element to display outside overflow hidden container

I'm trying to solve this css problem: I have a list of items contained in a scrolling container (overflow-y: scroll / overflow-x: hidden) each of this items have a child div (popup). I need to display this child element outside the scrolling container but the position must be relative to the item div.

I can't manage to find a way to display those childs elements outside the overflow hidden of the scroll container.

If anyone has a solution, thank you so much.

What I'm trying to do

Simplified exemple :
https://jsfiddle.net/zbvwjq1s/35/

.container{
  position: relative;
  background-color:black;
  width:200px;
  margin:0 auto;
}
.scroll-container{
  overflow-y:scroll;
  height: 250px;
  background-color:red;
}
.item{
  display:flex;
  align-items:center;
  margin-top: 10px;
  width:100%;
  height: 50px;
  background-color:green;
}

.popup {
  position: absolute;
  right:-80px;
  width:80px;
  height:40px;
  background-color:blue;
  visibility:hidden;
}

.item:hover .popup {
  visibility:visible;
}
<div class='container'>
    <div class='scroll-container'>
        <div class='item'>
            <div class='popup'></div>
        </div>
        <div class='item'>
            <div class='popup'></div>
        </div>
        <div class='item'>
            <div class='popup'></div>
        </div>
        <div class='item'>
            <div class='popup'></div>
        </div>
        <div class='item'>
            <div class='popup'></div>
        </div>
        <div class='item'>
            <div class='popup'></div>
        </div>
        <div class='item'>
            <div class='popup'></div>
        </div>
    </div>
</div>

How to solve SVG path stroke width different thickness

I have a square hexagonal svg image, and i set stroke-width 4px for it. But the stroke thickness is not consistent, the vertical lines are thinner and the slanted lines are thicker.

demo image

<svg width="173" height="199" viewBox="0 0 173 199" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path stroke='#5088ff' stroke-width="4px" vector-effect="non-scaling-stroke" stroke-linecap="square" d="M86.5 0L173 50V150L86.5 199L0 150V50L86.5 0Z"/>
</svg>

I have searched and tried vector-effect="non-scaling-stroke", it does't work.

Hover effect is not applyed in CSS. What is the exact problem?

I am trying to build searchlist for the searchbar and the list should be change color when cursor is placed their and got selected when clicked from list of item shown.

searchlist.jsx:

import React from 'react'
import { FaSearch } from 'react-icons/fa';
import './SearchList.css';

function SearchList({TitleArray,setSearchQuery}) {
  return (
   <>
    <div className="Container_SearchList">
    {
            TitleArray.map(m=>{
                return   <p
                key={m}
                onClick={e=>setSearchQuery(m)}
                className='titleItem'> 
               <FaSearch/>
            {m}
            </p>  
          })
      
        }   
    </div>
    </>
  )
}

export default SearchList;

searchlist.css:

.Container_SearchList {
    background-color: white;
    width: 90.75%;
    position: absolute;
    top:2.7rem;
    height: fit-content;
    z-index: 91;
}

.titleItem {
    margin: 0;
    padding: 0.5rem;
    cursor: pointer;
}

.titleItem div p:hover {
    background-color: rgba(166,202,234,0.516);
}

enter image description here

When cursor is placed on the name, the color should change and the name should get selected

Problema using a style.css for my website theme

I'm creating my website in on Wordpress.com and I'm implementing my theme.

I created a folder in wp-content/themes/mytheme and in this folder I created an index.php and a style.css.

Basically my style.css doesn't want to apply to my page. Here is my CSS and PHP code

index.php:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php bloginfo( 'name' ); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>
    <div id="content">
        <h1>Hello there!</h1>
        <p>This is my website</p>
    </div>
    <?php wp_footer(); ?>
</body>
</html>

style.css:

body {
  background-image: url('wp-content/themes/miotema/images/prima.jpg') !important;
  min-height: 100vh !important;
  background-color: rgba(234,234,234,0.5);
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-size: cover;
  padding-top: 100px;
  padding-bottom: 100px;
}

I tried to put all in my php code adding the line:

style="background-image: url('wp-content/themes/miotema/images/prima.jpg') !important; background-size: cover !important; background-position: center !important;">

and in this case the style that I put in phh applies succesfully.

Is there a problem in linking the CSS to the PHP file? Is this a problem of Wordpress that has priority on my style.css?

I need the site logo to sit to the side of a move with the nav bar but my codes not working whats missing?

I'm new to coding so the answer is probably obvious. I have all the items including the logo under however the logo hides behind the navigation bar no matter what I do. I'm trying to make the navigation bar and the logo move down the page as the user scrolls. As it sits that works but its just getting the logo inline with it all.

HTML


`<nav>`
    `<img src="Images/lilac-valley-logo.png" alt="Lilac Valley Logo">`
    `<ul id="navItems">`
        `<li><a href="default.asp">Home</a></li>`
        `<li><a href="About.asp">About</a></li>`
        `<li><a href="Gallery.asp">Gallery</a></li>`
        `<li><a href="Contact.asp">Contact</a></li>`
     `   <li><a href="Booking.asp">Booking</a></li>`
  `  </ul>`
`</nav>`

CSS

img {`
    width: 80px;
    display: inline-flex;
}

ul{`
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #5c4033;
    position: fixed;
    top: 0;
    width: 100%
}

li {
    float: left;
}

`li a {`
    display: inline-flex;
    padding: 20px;
    text-align: center;
    padding: 14px 16ox;
    color: #ffffff;
    
`  }`


`  li a:hover {`
    background-color: #c4a484;
 ` }`

nav { `
  display:inline-flex;
  z-index:1;
  position:fixed;
  top:25px;
  width:fit-content;
  height:44px;
  list-style-type:none;
`}



 a:link { 
     text-decoration: none; 
} 
a:visited { 
  text-decoration: none; 
} 
a:hover { 
  text-decoration: none; 
} 
a:active { 
  text-decoration: none; 
}

Half the css probably isn't needed. but basically as it sits this code creates a navigation bar but the logo is hidden behind it. I tried deleting the img portion but that just makes the logo massive. Tried changing width on both images and nav but that either changed the size of the image or shortened the nav bar.

How do I make a html element draggable while not triggering its onClick?

I have to make a chat widget movable. This chat widget is injected by an external script (SFDC Embedded Service, to be specific). Hence, I do not have access to the click handlers of the chat widget.

I am currently using event handlers of the embedded service to attach 'mousedown', 'mouseup' and 'mousemove' event listeners to the chat widget to make it movable.

While the widget is movable by dragging, upon mouseup, the mouseclick event is also triggered and the chat gets activated.

Can I avoid triggering the mouseclick event given the external nature of the widget?

I am also using react if that matters.

The chat widget is also attached directly onto the document body by the salesforce script, so a container is out of the question.

HTML:

<body>
    <script async src='salesforce.com/esw.min.js' /> // external script that adds chat widget
</body>

rough representation of esw.min.js:

const chatWidget = <chat-widget />
chatWidget.addEventListener('click', openChat)
document.querySelector('body').append(chatWidget) // adds chat widget into body

my code:

const widgetObserver = new MutationObserver((mutations, observer) => {
    const helpButton = document.querySelector('chat-widget');

    if (helpButton) {
        !helpButton.draggable && enableDragging(helpButton);
        observer.disconnect();
    }
});

function enableDragging(element) {
    var displacedX = 0,
        displacedY = 0,
        currentX = 0,
        currentY = 0;
    // otherwise, move the DIV from anywhere inside the DIV:
    element.onmousedown = dragMouseDown;
    element.style.right = currentX + 'px';
    element.style.bottom = currentY + 'px';
    element.draggable = true;
    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        currentX = e.clientX;
        currentY = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e.preventDefault();
        // calculate the new cursor position:
        displacedX = currentX - e.clientX;
        displacedY = currentY - e.clientY;
        currentX = e.clientX;
        currentY = e.clientY;
        // set the element's new position:
        element.style.top = element.offsetTop - displacedY + 'px';
        element.style.left = element.offsetLeft - displacedX + 'px';
}

    function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
    }
}

Is my @keyframes code really wrong or VS Code is crazy?

Code snippet

So I made a @keyframes to shift the background from bottom left to top right, and it works 100% fine, but Visual Studio Code keeps flagging it as wrong for some reason, I made another @keyframes totally different and unrelated to this one to test, and it flagged it as wrong with the squiggly red lines again. I have no idea on how to solve this, I've tried everything, but nothing works, Help! *Note that the "wrong red lines" only appear on the first element of the "from".

*Note that the "wrong red lines" only appear on the first element of the "from".

Add to cart button alignment in WooCommerce [closed]

I have a WordPress WooCommerce website and i need to align buttons on same height level even when text above vary

i tried to fix it through CSS code but it seems it didn't work?

<a href="?add-to-cart=5086" data-quantity="1" data-title="ุณุชุฑูŠู… ู…ุดุฑูˆุจ ุบุงุฒูŠ 30 ุญุจุฉ 185 ู…ู„" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="5086" data-product_sku="AB123456830" aria-label="Add to cart: โ€œุณุชุฑูŠู… ู…ุดุฑูˆุจ ุบุงุฒูŠ 30 ุญุจุฉ 185 ู…ู„โ€" aria-describedby="" rel="nofollow"><i class="p-icon icon-bag2" data-rel="tooltip" title="ุงุถู ู„ู„ุณู„ุฉ"></i><span class="add-to-cart-text">ุงุถู ู„ู„ุณู„ุฉ</span></a>

Calculating rotation angle of each path on a svg circle chart

https://jsfiddle.net/p4d57e8x/3/

const getArcPath = (start, end, innerRadius, outerRadius) => {
    const startAngle = start * Math.PI * 2;
    const endAngle = end * Math.PI * 2;
    const x1 = innerRadius * Math.sin(startAngle);
    const y1 = innerRadius * -Math.cos(startAngle);
    const x2 = outerRadius * Math.sin(startAngle);
    const y2 = outerRadius * -Math.cos(startAngle);
    const x3 = outerRadius * Math.sin(endAngle);
    const y3 = outerRadius * -Math.cos(endAngle);
    const x4 = innerRadius * Math.sin(endAngle);
    const y4 = innerRadius * -Math.cos(endAngle);
    const bigArc = end - start >= 0.5;
    const outerFlags = bigArc ? '1 1 1' : '0 0 1';
    const innerFlags = bigArc ? '1 1 0' : '1 0 0';
    return `M ${x1},${y1} L ${x2},${y2} A ${outerRadius} ${outerRadius} ${outerFlags} ${x3},${y3} 
        L ${x4},${y4} A ${innerRadius} ${innerRadius} ${innerFlags} ${x1},${y1} Z`;
};

This is the code for the path itself, and all of the paths they create a circle.

I am not sure how to get the rotation angle for each path in the circle (say there is red, green, blue, purple), I've tried many things but this seems more of a math problem more than anything else.

I tried a bunch of random code I found, this for example

const getRotationAngle = (start, end) => {
    const startAngle = start * 360;
    const endAngle = end * 360; 
    return (startAngle + endAngle) / 2;
};
``` but it doesn't work of course because it's just gibberish for me and I have no idea what I even need to calculate to get the angle.

NextJS Image component with fixed witdth and auto height

I am using NextJS Image component. I want the image to fill 100% width and take as much height as it needs to maintain the aspect ratio. I have tried many different variations of this code but it will not work unless I define a fixed height on the parent div.

export default function PhotoCard({ img }: Props) {
      return (
        <div className="relative w-full h-32 my-2">
          <Image alt={img.title} src={img.url} layout="fill" objectFit="cover" />
        </div>
      );
    }

This is the current behaviour images in app

CSS cut transparent box in parent background

I have a wrapper that has a header, content and footer.

The body is an image, and the wrapper is also an image. The header and footer background are transparent, making the wrapper background image visible. Still, I need to somehow cut the wrapper background in the content div, so the body background image is visible.

I tried it with box-shadow and other hacks but they won't work since the body and wrapper backgrounds are both images.

body {
  background-image: url("https://images.unsplash.com/photo-1713813091291-ba9b947b8803?q=80&w=1926&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-image: url("https://images.unsplash.com/photo-1712668405876-d0df5c444e62?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
}

.content {
  flex-grow: 1;
}

.header {
  height: 10rem;
  border-bottom: solid 2px black;
}

.footer {
  height: 5rem;
  border-top: solid 2px black;
}
<div class="wrapper">
  <div class="header">
    Header
  </div>
  <div class="content">
    Content
  </div>
  <div class="footer">
    Footer
  </div>
</div>

I also tried a workaround to toggle the wrapper background image off and add background images to the header and footer separately but then the images were misaligned.

Since the content background image is togglable. I use content something like tabs so sometimes the background should be transparent and sometimes it should be the wrapper background image.

To clarify body is not an actual image but rather transparent since it is all in CEF so when the body is transparent the game is shown.

example image

How can i move this car (along with wheels) through X axis when clicking forward and backward button

This is my code :

  <body>
    <div class="backgroundImg">
      <!-- <video autoplay loop muted>
      <source src="video.mp4" type="video/mp4">
    </video> -->
      <img src="Scene.jpg" alt="" />
    </div>
    <div class="buttons">
      <button class="forward"></button>
      <button class="backward"></button>
    </div>
    <div class="road"></div>
    <div class="wholecar">
      <div class="car"></div>
      <div class="wheel1">
        <img src="wheel1.png" alt="" />
      </div>
      <div class="wheel2">
        <img src="wheel2.png" alt="" />
      </div>
    </div>
    <script src="app.js"></script>
  </body>

This is my CSS code:

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
/* CAR */

.car {
  height: 309px;
  width: 552px;
  background-image: url(carfinal.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  left: 408px;
  top: 585px;
  z-index: 2;
  animation: CarMoves 1.5s linear infinite;
}

/* FRONT WHEEL */

.wheel1 img {
  width: 122px;
  position: absolute;
  top: 770px;
  left: 805px;
  animation: none;
  z-index: 3;
}
.wheel1 img.play-forward {
  animation: WheelRotate 0.5s linear infinite;
}
.wheel1 img.play-backward {
  animation: WheelRotate 0.5s linear infinite reverse;
}

/* BACK WHEEL */

.wheel2 img {
  width: 122px;
  position: absolute;
  top: 770px;
  left: 492px;
  animation: none;
  z-index: 3;
}
.wheel2 img.play-forward {
  animation: WheelRotate 0.5s linear infinite;
}
.wheel2 img.play-backward {
  animation: WheelRotate 0.5s linear infinite reverse;
}

/* CAR BODY WITH WHEELS */

/* .wholecar .car{
  z-index: 4;
  left:100px
}
.wholecar .wheel1 img{
  left: 500px;
}
.wholecar .wheel2 img{
  left: 185px;
} */

/* BUTTONS */

.buttons {
  display: flex;
  justify-content: center;
}
.forward {
  height: 80px;
  background-image: url(right.jpg);
  background-size: cover;
  width: 90px;
  border-radius: 10px;
  border: 1.5px solid red;
  position: absolute;
  top: 10vh;
  left: 105vh;
}
.backward {
  height: 80px;
  width: 90px;
  position: absolute;
  border-radius: 10px;
  border: 1.5px solid red;
  background-image: url(left.jpg);
  background-size: cover;
  top: 10vh;
  left: 80vh;
}

/* ANIMATIONS */

@keyframes WheelRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

I have an HTML file with a structure that includes a background image or video, buttons for moving forward and backward, a road element, a car, and two wheels. The car and wheels have their own CSS styling and animations.

In my JavaScript code, I've added event listeners to the forward and backward buttons. When these buttons are clicked, corresponding CSS classes are toggled on the road, background image, and wheels to initiate animations.

However, I'm encountering an issue where the wheels aren't moving along with the car when it moves forward or backward.

To address this, I've attempted to use the translate property on the .wholecar class to move the entire car along with its wheels. However, this approach didn't work as expected.

I'm seeking assistance in resolving this issue so that when the forward or backward buttons are clicked, not only the background and road animate, but the car and its wheels move accordingly to create a realistic driving animation.

Symfony with tailwind - problem with bootstrap.js

I have a project in symfony 6, I wanted to add tailwind, but I have the following problem:

pawel@home:~/crm/tailwind$ npm run build
    
    > build
    > encore production --progress
    
    Running webpack ...
    
    99% done plugins FriendlyErrorsWebpackPlugin ERROR  Failed to compile with 1 errors                                                                                                                                                                                             18:39:44
    
    Module build failed: Module not found:
    "./assets/bootstrap.js" contains a reference to the file "@symfony/stimulus-bundle".
    This file can not be found, please check it for typos or update it if the file got moved.
    
    Entrypoint app = runtime.05dacd30.js app.83455a67.css app.6dc377ec.js
    webpack compiled with 1 error
    pawel@home:~/crm/tailwind$ npm run watch
    
    > watch
    > encore dev --watch
    
    Running webpack ...
    
     ERROR  Failed to compile with 1 errors                                                                                                                                                                                             18:39:52
    
    Module build failed: Module not found:
    "./assets/bootstrap.js" contains a reference to the file "@symfony/stimulus-bundle".
    This file can not be found, please check it for typos or update it if the file got moved.
    
    Entrypoint app 32 KiB = runtime.js 11.7 KiB app.css 16.8 KiB app.js 3.52 KiB
    webpack compiled with 1 error

I tried to do it based on these guides:

  1. https://tailwindcss.com/docs/guides/symfony
  2. https://symfony.com/bundles/TailwindBundle/current/index.html

but it didn't help, I even installed the composer package manually using the command

composer require symfony/stimulus-bundle

but still no effect and honestly, I have no idea how to run tailwind :/

My /assets/bootstrap.js file

import { startStimulusApp } from '@symfony/stimulus-bundle';

const app = startStimulusApp();
// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);

I even looked at YouTube tutorials and everything worked there, I did it step by step as in the video and it didn't help, I kept getting the same error :/ I created the project in this way, if that helps.

symfony new tailwind --version="6.4.*" --webapp

What's the problem? :/

How to use a "reverse percentage"/unitless calculation in a CSS calc()?

I would like to use the following calculation in the width and height of an element:

(1 / 0.65) * 100, then the % sign

So that the width & height are set to 153.85%.

However I believe the first number must have units, or be a percentage - in order for calc to work.

How can I set this in calc rather than hardcoding it to 153.85%?

153.85% being the reverse percentage of 65% - per this Math.SE question.

I tried calc(100% / 65%) and calc(100% / 0.65) but these did not produce the correct result.

Numbered sticky section

is there anybody that could help me? I want to make something like a numbered section, i want to have numbers on the left, starting with 01 and while user scrolls down the sections, I want numbers to increase: 02, 03, 04. On the right there are four sections, but i want, when user scrolls down the page, to make the numbers stick to top and the content is still scrollable.

Here is an example I'm working on: https://codepen.io/p0waqqatsi/pen/gOyQJdJ But the problem is, I do not want to have fixed height on the right section nor overflow-y: auto; I want user to keep scrolling through page, not on the inner section.

This is what I am trying to achieve: https://refire.heycusp.com/ scroll down to Constant Evolution.

    body {
        margin: 0;
        font-family: Arial, sans-serif;
        height: 2000px; /* Just for demonstration */
        padding: 3rem;
    }

    .container {
        display: flex;
        justify-content: space-between;
        position: relative;
        width: 100%;
        background-color: #f0f0f0;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        transition: top 0.3s ease;
    }

    .section-number {
        font-size: 200px;
        flex-shrink: 0;
        width: calc((670 / var(--gfs))* 100* 1vw);
        height: 100%;
        overflow: hidden;
    }

    .sections {
        width: 60%;
        max-height: 500px;
        overflow-y: auto;
    }

    .section {
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }
    .section p {
        font-size: 30px;
    }

    .section.active {
        font-weight: bold;
    }

    .section-number-anim {
        animation: slide-in 0.5s ease forwards;
    }

    @keyframes slide-in {
        0% {
                opacity: 0;
                transform: translateY(100%);
        }
        100% {
                opacity: 1;
                transform: translateY(0);
        }
    }

js:

const container=document.getElementById('sectionsContainer');
const sectionNumber=document.getElementById('sectionNumber');

container.addEventListener('scroll', function() {
        const sections=document.querySelectorAll('.section');
        const scrollTop=container.scrollTop;
        const containerOffsetTop=container.offsetTop;
        const containerHeight=container.clientHeight;
        const sectionTops=[];

        sections.forEach((section, index)=> {
                sectionTops.push( {
                        index,
                        top: section.offsetTop - containerOffsetTop,
                        bottom: section.offsetTop - containerOffsetTop + section.clientHeight
                    }

                );
            }

        );
        let activeSectionIndex=0;

        for (let i=sectionTops.length - 1; i >=0; i--) {
            if (scrollTop >=sectionTops[i].top - containerHeight / 2) {
                activeSectionIndex=sectionTops[i].index;
                break;
            }
        }

        const activeSection=document.querySelector('.section.active');

        if (activeSection) {
            activeSection.classList.remove('active');
        }

        sections[activeSectionIndex].classList.add('active');
        sectionNumber.textContent=(activeSectionIndex + 1).toString().padStart(2, '0');
        sectionNumber.classList.add('section-number-anim');
    }

);

Some styles of SVG ignored in PDF

I want to publish SVG pictures using styles cascading geometric transformations.

Here is an example of SVG with css-transform (with or without parameter):

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="stroke-width:10px;stroke:blue;"
     width="300"
     height="310"
     viewBox="0 -10 300 310">
  <style>
    :root {
      --paramT: 100px;
    }
    .translate {
     transform: translate(100px);
     stroke: green;
    }
    .variableTranslate {
      transform: translate(var(--paramT));
      stroke: red;
    }
  </style>
  <line x1="0" x2="100" y1="0"   y2="0" />
  <line x1="0" x2="100" y1="50"  y2="50"  style="stroke:orange;transform:translate(100px)"/>
  <line x1="0" x2="100" y1="100"  y2="100"  class="translate"/>
  <line x1="0" x2="100" y1="150" y2="150" class="variableTranslate" />
</svg>

In a browser, result is as expected:

SVG parsed in Firefox

Some styles related to transformations are ignored in the PDF of a document using this picture published with FOP:

SVG in the PDF generated with FOP

Is it a limitation of FOP (only) ?

How can I implement this text scrolling effect just by using html, css and javascript?

I wanted to create a some cool slider for my website. I got one reference video for the slider but I have no idea of how to implement the text scrolling effect used in that slider. I tried using a container for each text and keeping the overflow-y to hidden and then manipulate them using javascript. However, when the text size vary, it doesn't looks good. Can some one give me any ideas of how to implement this idea?

I want the text to move independently like in this video. This effect should occur onScroll event. Just give me a basic idea, and I don't want to use any library like gasp, etc., I am only expecting the solution in HTML, CSS, JavaScript.

Thank you.

https://drive.google.com/file/d/1Z9Gid5shAGLxar9Tj_3TLqqQ7Z-zaThw/view?usp=sharing

โŒ
โŒ