"Unable to move past the initial segment due to an ongoing

Question

"Unable to move past the initial segment due to an ongoing

My portfolio webpage includes a "blob" and "blur" effect inspired by this YouTube video (https://www.youtube.com/watch?v=kySGqoU7X-s&t=46s). However, I am encountering an issue where the effect is only displayed in the first section of the page. Even after adding content to the div, the effect remains confined to one section when scrolling through the page. How can I ensure that the "blob" and "blur" effect persists throughout the entire page?

If anyone has insights into why this behavior is occurring, I would greatly appreciate your input.

javascript html css portfolio

Answer 1

Answer №1

It may be more beneficial to utilize the CSS property of position: fixed. When positioned at the far right, the "blob" expands the site, allowing for vertical scrolling: https://i.stack.imgur.com/stpbv.png

const blob = document.getElementById("blob");
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

// Touch pointer movement
window.onpointermove = event => {
    const { clientX, clientY } = event;

    // Blob animation
    blob.animate({
        left: `${clientX}px`,
        top: `${clientY}px`
    }, { duration: 3000, fill: "forwards" });
};

let interval = null;

// Hover effect on h1 tag
document.querySelector("h1").onmouseover = e => {
    let iterations = 0;
    
    interval = setInterval(() => {
        e.target.innerText =e.target.innerText.split("")
            .map((letter, index) => {
                if(index < iterations) {
                    return e.target.dataset.value[index];
                }
            
                return letters[Math.floor(Math.random() * 26)]
            })
            .join("");

        if(iterations >= e.target.dataset.value.length) {
            clearInterval(iterations);
        }

        iterations += 1 / 4;
    }, 30);
}

body {
    background-color: black;
    height: 100%;
    width: 100%;
    margin: 0rem;

    --scrollbar-width: 0.4rem;
    --light-color: aquamarine;
    --dark-color: mediumpurple;
}

html {
    scroll-behavior: smooth;
}

@keyframes rotate {
    from {
        rotate: 0deg;
    }
    50% {
        scale: 1 1.5;
    }
    to {
        rotate: 360deg;
    }
}

#blob {
    background-color: white;
    height: 34vmax;
    aspect-ratio: 1;
    position: fixed;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    background: linear-gradient(to right, aquamarine, mediumpurple);
    animation: rotate 20s infinite;
    opacity: 0.8;
  }

#blur {
    height: 100%;
    width: 100%;
    z-index: 2;
    backdrop-filter: blur(12vmax);
}

h1 {
    font-family: 'Space Mono', monospace;
    font-size: clamp(3rem, 10vw, 10rem);
    color: white;
    padding: 0rem clamp(1rem, 2vw, 3rem);
    border-radius: clamp(0.4rem, 0.75vw, 1rem);
    margin: 0rem;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: 4;
}

h2 {
    font-family: 'Space Mono', monospace;
    font-size: clamp(1rem, 5vw, 5rem);
    color: aquamarine;
    padding: 0rem clamp(1rem, 2vw, 3rem);
    border-radius: clamp(0.4rem, 0.75vw, 1rem);
    margin: 0rem;
    position: absolute;
    left: 50%;
    top: 63%;
    translate: -50% -50%;
    z-index: 4;
}

li, a, button {
    font-family: 'Space Mono', monospace;
    font-weight: 500;
    font-size: 16px;
    color: #ecf0f1;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 10%;
    width: 80%;
    top: 0;
    left: 0;
    z-index: 2;
    backdrop-filter: blur(12vmax);
    background-color: transparent;
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

.logo {
    cursor: pointer;
    order: 3;
    margin-left: auto;
    height: 50px;
}

.nav_links {
    list-style: none;
}

.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

.nav_links li a {
    transition: all 0.3s ease 0s;
    font-family: 'Space Mono', monospace;
}

.nav_links li a:hover {
    color: aquamarine;
}

button {
    margin-left: 20px;
    padding: 9px 25px;
    background-color: mediumaquamarine;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    font-family: 'Space Mono', monospace;
}

button:hover {
    background-color: var(--dark-color);
}

::-webkit-scrollbar {
    width: var(--scrollbar-width);
  }
  
::-webkit-scrollbar-track {
    background: var(--dark-color);
  }
  
::-webkit-scrollbar-thumb {
    background: var(--light-color);
}

h3 {
    color: var(--light-color);
    font-family: 'Space Mono', monospace;
    font-size: clamp(0.5rem, 2vw, 2rem);
    padding: 0rem clamp(1rem, 2vw, 3rem);
}

.spacer {
    margin: 10vh 0;
    height: 1px;
}

.section {
    background-color: transparent;
    z-index: 4;
    top: 100%;
    scroll-behavior: smooth;
    transition: 0.5s;
}

.about {
    display: flex;
    gap: 2rem;
    color: white;
    font-family: 'Space Mono', monospace;
}

.about p {
    width: 30%;
    align-items: center;
    text-align: center;
}


.highlight {
    color: var(--light-color);
}

th {
    color: var(--light-color);
    font-family: 'Space Mono', monospace;
}

tr td {
    color: white;
    font-family: 'Space Mono', monospace;
}

table {
    width: 45%;
    text-align: center;

}

.socials-images img {
    height: 60px;
    background-color: var(--light-color);
}

.socials-images li {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}  

.socials-images p {
    font-family: 'Space Mono', monospace;
    font-size: larger;
}

<div class="wrapper">
  <div id="blob"></div>
  <div id="blur">
    <header>
      <img class="logo" src="images/logo.png" alt="logo">
      <nav>
        <ul class="nav_links">
          <li><a href="#about">About me</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#socials">Socials</a></li>
        </ul>
      </nav>
      <a class="cta" href="#"><button>Contact</button></a>
    </header>
    <div class="container">
      <h1 data-value="FRONTEND">FRONTEND</h1>
      <h2>Zsolt Pál</h2>
    </div>
    <div class="spacer"></div>
    
    <div class="section">
      <div class="spacer"></div>
      <div class="about">
        <div class="section-header">
          <h3 id="about">About Me</h3>
          <div class="spacer"></div>
        </div>
        <p>In High school there wasn't any programming or developing teaching for me, so I've decided to take matter in my own hands. After a few weeks I've instantly fell in love with <span class="highlight">front-end</span> developing.</p>
        <p>Being able to create and modify <span class="highlight">webpages</span> and <span class="highlight">web applicitations</span> are are a huge interest in my life since then. I'm always looking up for new <span class="highlight">methods</span> and <span class="highlight">creative ideas</span>.</p>
        <p>Currently I am looking for a <span class="highlight">Junior</span> or a <span class="highlight">Trainee</span> job.</p>
      </div>
      <div class="spacer"></div>
      <div class="projects">
        <div class="section-header">
          <h3 id="projects">Projects</h3>
        </div>
        <div class="spacer"></div>
        <table>
          <tr>
            <th>
              These are the projects that I've been envolved in.
            </th>
            <th>
              Some information about them.
            </th>
          </tr>
          <tr>
            <td><span class="hightlight">Name</span></td>
            <td><span class="hightlight">Function</span></td>
          </tr>
          <tr>
            <td>Wiki about Cars</td>
            <td>Basically you are able to search for any car and make at this website, and it gives you back a bunch of information about the searched car.</td>
          </tr>
        </table>
      </div>
      <div class="spacer"></div>
      <div class="socials">
        <div class="section-header">
          <h3 id="socials">Socials</h3>
        </div>
        <div class="spacer"></div>
        <div class="socials-images">
          <ul>
            <li class="social-image"><img src="images/twitter.png" alt="twitter">
              <p><a href="https://twitter.com/palimadarxd">Twitter</a></p>
            </li>
            <li class="social-image"><img src="images/instagram.png" alt="instagram">
              <p><a href="https://www.instagram.com/zsota02/?hl=en">Instagram</a></p>
            </li>
            <li class="social-image"><img src="images/github.png" alt="github">
              <p><a href="https://github.com/zsoltp2">Github</a></p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

It may be more beneficial to utilize the CSS property of position: fixed. When positioned at the far right, the "blob" expands the site, allowing for vertical scrolling: https://i.stack.imgur.com/stpbv.png

const blob = document.getElementById("blob");
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

// Touch pointer movement
window.onpointermove = event => {
    const { clientX, clientY } = event;

    // Blob animation
    blob.animate({
        left: `${clientX}px`,
        top: `${clientY}px`
    }, { duration: 3000, fill: "forwards" });
};

let interval = null;

// Hover effect on h1 tag
document.querySelector("h1").onmouseover = e => {
    let iterations = 0;
    
    interval = setInterval(() => {
        e.target.innerText =e.target.innerText.split("")
            .map((letter, index) => {
                if(index < iterations) {
                    return e.target.dataset.value[index];
                }
            
                return letters[Math.floor(Math.random() * 26)]
            })
            .join("");

        if(iterations >= e.target.dataset.value.length) {
            clearInterval(iterations);
        }

        iterations += 1 / 4;
    }, 30);
}

body {
    background-color: black;
    height: 100%;
    width: 100%;
    margin: 0rem;

    --scrollbar-width: 0.4rem;
    --light-color: aquamarine;
    --dark-color: mediumpurple;
}

html {
    scroll-behavior: smooth;
}

@keyframes rotate {
    from {
        rotate: 0deg;
    }
    50% {
        scale: 1 1.5;
    }
    to {
        rotate: 360deg;
    }
}

#blob {
    background-color: white;
    height: 34vmax;
    aspect-ratio: 1;
    position: fixed;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    background: linear-gradient(to right, aquamarine, mediumpurple);
    animation: rotate 20s infinite;
    opacity: 0.8;
  }

#blur {
    height: 100%;
    width: 100%;
    z-index: 2;
    backdrop-filter: blur(12vmax);
}

h1 {
    font-family: 'Space Mono', monospace;
    font-size: clamp(3rem, 10vw, 10rem);
    color: white;
    padding: 0rem clamp(1rem, 2vw, 3rem);
    border-radius: clamp(0.4rem, 0.75vw, 1rem);
    margin: 0rem;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: 4;
}

h2 {
    font-family: 'Space Mono', monospace;
    font-size: clamp(1rem, 5vw, 5rem);
    color: aquamarine;
    padding: 0rem clamp(1rem, 2vw, 3rem);
    border-radius: clamp(0.4rem, 0.75vw, 1rem);
    margin: 0rem;
    position: absolute;
    left: 50%;
    top: 63%;
    translate: -50% -50%;
    z-index: 4;
}

li, a, button {
    font-family: 'Space Mono', monospace;
    font-weight: 500;
    font-size: 16px;
    color: #ecf0f1;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 10%;
    width: 80%;
    top: 0;
    left: 0;
    z-index: 2;
    backdrop-filter: blur(12vmax);
    background-color: transparent;
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

.logo {
    cursor: pointer;
    order: 3;
    margin-left: auto;
    height: 50px;
}

.nav_links {
    list-style: none;
}

.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

.nav_links li a {
    transition: all 0.3s ease 0s;
    font-family: 'Space Mono', monospace;
}

.nav_links li a:hover {
    color: aquamarine;
}

button {
    margin-left: 20px;
    padding: 9px 25px;
    background-color: mediumaquamarine;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    font-family: 'Space Mono', monospace;
}

button:hover {
    background-color: var(--dark-color);
}

::-webkit-scrollbar {
    width: var(--scrollbar-width);
  }
  
::-webkit-scrollbar-track {
    background: var(--dark-color);
  }
  
::-webkit-scrollbar-thumb {
    background: var(--light-color);
}

h3 {
    color: var(--light-color);
    font-family: 'Space Mono', monospace;
    font-size: clamp(0.5rem, 2vw, 2rem);
    padding: 0rem clamp(1rem, 2vw, 3rem);
}

.spacer {
    margin: 10vh 0;
    height: 1px;
}

.section {
    background-color: transparent;
    z-index: 4;
    top: 100%;
    scroll-behavior: smooth;
    transition: 0.5s;
}

.about {
    display: flex;
    gap: 2rem;
    color: white;
    font-family: 'Space Mono', monospace;
}

.about p {
    width: 30%;
    align-items: center;
    text-align: center;
}


.highlight {
    color: var(--light-color);
}

th {
    color: var(--light-color);
    font-family: 'Space Mono', monospace;
}

tr td {
    color: white;
    font-family: 'Space Mono', monospace;
}

table {
    width: 45%;
    text-align: center;

}

.socials-images img {
    height: 60px;
    background-color: var(--light-color);
}

.socials-images li {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}  

.socials-images p {
    font-family: 'Space Mono', monospace;
    font-size: larger;
}

<div class="wrapper">
  <div id="blob"></div>
  <div id="blur">
    <header>
      <img class="logo" src="images/logo.png" alt="logo">
      <nav>
        <ul class="nav_links">
          <li><a href="#about">About me</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#socials">Socials</a></li>
        </ul>
      </nav>
      <a class="cta" href="#"><button>Contact</button></a>
    </header>
    <div class="container">
      <h1 data-value="FRONTEND">FRONTEND</h1>
      <h2>Zsolt Pál</h2>
    </div>
    <div class="spacer"></div>
    
    <div class="section">
      <div class="spacer"></div>
      <div class="about">
        <div class="section-header">
          <h3 id="about">About Me</h3>
          <div class="spacer"></div>
        </div>
        <p>In High school there wasn't any programming or developing teaching for me, so I've decided to take matter in my own hands. After a few weeks I've instantly fell in love with <span class="highlight">front-end</span> developing.</p>
        <p>Being able to create and modify <span class="highlight">webpages</span> and <span class="highlight">web applicitations</span> are are a huge interest in my life since then. I'm always looking up for new <span class="highlight">methods</span> and <span class="highlight">creative ideas</span>.</p>
        <p>Currently I am looking for a <span class="highlight">Junior</span> or a <span class="highlight">Trainee</span> job.</p>
      </div>
      <div class="spacer"></div>
      <div class="projects">
        <div class="section-header">
          <h3 id="projects">Projects</h3>
        </div>
        <div class="spacer"></div>
        <table>
          <tr>
            <th>
              These are the projects that I've been envolved in.
            </th>
            <th>
              Some information about them.
            </th>
          </tr>
          <tr>
            <td><span class="hightlight">Name</span></td>
            <td><span class="hightlight">Function</span></td>
          </tr>
          <tr>
            <td>Wiki about Cars</td>
            <td>Basically you are able to search for any car and make at this website, and it gives you back a bunch of information about the searched car.</td>
          </tr>
        </table>
      </div>
      <div class="spacer"></div>
      <div class="socials">
        <div class="section-header">
          <h3 id="socials">Socials</h3>
        </div>
        <div class="spacer"></div>
        <div class="socials-images">
          <ul>
            <li class="social-image"><img src="images/twitter.png" alt="twitter">
              <p><a href="https://twitter.com/palimadarxd">Twitter</a></p>
            </li>
            <li class="social-image"><img src="images/instagram.png" alt="instagram">
              <p><a href="https://www.instagram.com/zsota02/?hl=en">Instagram</a></p>
            </li>
            <li class="social-image"><img src="images/github.png" alt="github">
              <p><a href="https://github.com/zsoltp2">Github</a></p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

"Unable to move past the initial segment due to an ongoing

Answer №1

Similar questions

Are you encountering issues with retrieving $http results from the cache?

Navigating through content on a screen can be accomplished in two

Angular's focus function poses certain challenges that need to be addressed

Setting up node.js for angular - serving static files with connect.static and running unit tests

"Exploring the usual progress of a standard GET request using Axios

Restrict the height of posts created in the summernote editor

Guide to launching my application by clicking on a file from a local device using React Native

Clicking a button in jQuery to load the Pagemethods

Anomalous Snackbar and Alert Interactions

Toggle Jquery feature will dynamically add the "required" attribute to the input field when the specified div is visible, and it will automatically remove the attribute when the div

Using an npm package to include CSS styles in a stylesheet

Setting up Vue CLI 4 with ESLint, TypeScript, Stylelint for SCSS, and Airbnb rules in the VS Code editor with automatic fixes on save

Transforming JSON data into an interactive table with HTML

I need the links to open up the content area on the website in HTML

Should I specify each protected route in the middleware file in the matcher for NextJs 14?

Using Angular 2: A Beginner's Guide to Navigating with the Latest Angular 2.0.0-rc.1 Router

Mobile WEBSITE Development with Ionic Framework

When moving from Babel version 5.8.35 to 6.0.0, be prepared for app.js to throw a SyntaxError and encounter an unexpected token during compilation

Discover the method to calculate the combined file size of multiple uploads with jquery

Tips for importing extensions with Rselenium