<!DOCTYPE html>
<html>
<head>
    <title>Parallax Scrolling with Animated Circle</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="circle"></div>
    <section class="section" id="section1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </section>
    <section class="section" id="section2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </section>
    <section class="section" id="section3">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </section>

    <script src="script.js"></script>
</body>
</html>

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    color: white;
    background-color: black;
    font-family: Arial, sans-serif;
}

.section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

#circle {
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
    position: fixed;
    right: -50px; /* start off screen */
    top: 50%;
    z-index: 2; /* above the sections */
}

document.addEventListener('scroll', function() {
    var scrollPosition = window.pageYOffset;
    var circle = document.getElementById('circle');
    circle.style.right = (scrollPosition * 0.5) + 'px'; // Adjust the multiplier for speed variation
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.