"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.

javascripthtmlcssportfolio

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verifying a form submission using a personalized model popup

I have several delete forms in my application that I want to confirm using javascript/jQuery before proceeding. An easy way to do this is: $('form.confirm-form').submit(function(){ return confirm('Are you sure?'); }); This method ...

javascriptjquerytwitter-bootstrap

What methods can be used to ensure a div reaches all the way down to a sticky footer?

I'm currently working on a layout with a sticky footer, and I have a specific div that needs to extend all the way down to the footer. However, simply setting the height to 100% doesn't achieve the desired result. I've also experimented with ...

htmlcsssticky-footer

Chrome's rendering of CSS flex display shows variations with identical flex items

I am facing an issue with my flex items where some of them are displaying incorrectly in Chrome but fine in Firefox. The problem seems to be with the margin-right of the rectangle span within each flex item, along with the scaling of the text span due to f ...

javascripthtmlcsslayoutflexbox

Unable to eliminate border from image within label

The following code generates a border that appears to be approximately 1px thick and solid, colored grey around the image. Despite setting the border of the image to none, the border still remains. Here is the code snippet: <label> <img styl ...

htmlcss

Trouble with Sound during Quickblox Webrtc Audio Calls

I am having an issue with my audio calls. When I make a call to another user, everything seems fine except that I cannot hear any sound when speaking into the microphone. I am only interested in making audio calls. The call is initiated by pressing a butt ...

javascriptjquerywebrtcquickblox

Ways to require semicolons in a Typescript interface

When declaring a TypeScript interface, both , (comma) and ; (semicolon) are considered valid syntax. For example, the following declarations are all valid: export interface IUser { name: string; email: string; id: number; } export interface IUser { ...

javascripttypescript

The functionality of the disabled and checked options on the radio button seems to be malfunction

Within an Angular HTML document, I have a set of radio buttons that share common names. I am attempting to update their disabled and checked properties from a .ts file, but the changes are not taking effect. Here is the code snippet: let elements = docume ...

htmlcssangular

Iterating through an object in Javascript using dynamically changing property names

Is there an efficient way in Javascript to iterate through the property names of objects in an array? I have objects with properties from guest1 to guest100. Instead of manually looping through each property, is there a method to loop through all the gues ...

javascript

Implementing a two-column infinite scrolling feature using ISCroll

I am looking to incorporate multi-column infinite scrolling using IScroll infinite scrolling. I want the content of my HTML to appear as follows: <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> ...

javascripthtmlcssinfinite-scrolliscroll

How to implement variables within the .map() function in JavaScript?

I am working on a map function where I need to pass in a variable as a Key to change the object item key to be based on that variable instead. For example, I want the obj.Salary below to actually represent the salary value when day equals "Day" instead o ...

javascriptjquery

Accessing files for MongoDB cluster

My goal is to retrieve all the documents from a MongoDB cluster. Even though I have followed code examples from various online sources, I am encountering a minor issue. const MongoClient = require('mongodb'); const uri = "mongodb+srv://<user& ...

javascriptnode.jsmongodb

What is the solution to the error message stating that <tr> cannot be a child of <div>?

displayTodos() { return this.state.todos.map(function(item, index){ return <div todo={item} key = {index}>; <tr> <td>{item.todo_description}</td> <td>{item.todo_responsible}</td> ...

javascripthtmlreactjsrender

A streamlined method to verify the presence of a username or email address in MongoDB before registering

I'm currently running a NodeJS server with ExpressJS to manage my /register route. As part of the registration process, I need to confirm that both the user's username and email are unique before allowing them to create an account in the users co ...

javascriptnode.jsmongodbexpress

Unable to send a String to the controller via ajax

Exploring web development using play framework and ajax. I'm looking to pass a string from a form to a controller using ajax, but unsure of how to go about it. Can anyone assist me with this? Here's my code snippet: html: <form onsubmit="retu ...

javascriptajaxplayframework

Discover Xml information or Json object displayed as XML tree in Html using Javascript

Looking for a way to display my JSON object or XML data in HTML similar to how React does it. I found this component on GitHub: https://github.com/marushkevych/xml-display-component, but I prefer not to mix JavaScript and React.js. Can anyone offer some gu ...

javascriptangularjs

AngularJS controller does not trigger ngRoute

I have developed a basic application to experiment with ngRoute functionality. The main page, index.html, contains a single link leading to a separate page named "informationdisplay.html". Despite configuring the route within the controller of the main pag ...

htmlangularjsroutesngrouteroute-provider

Scroll to a new section of the page if the specified id or name cannot be found

Currently, I am dealing with an exceptionally lengthy textual content page. <p class="parahead">401. Heading </p> <p>other html content</p> <p class="c2">some more data</P> ... <p class="parahead">402. Another hea ...

jqueryhtmlcss

How can you enhance the visibility of AngularJS Materials dropdown menus?

While experimenting with AngularJS Materials, I noticed that the text in some elements like <md-input-container> and <md-select> may be too light for some people to read easily. I wanted to find a way to make the text more visible without chang ...

javascripthtmlcssangularjs

Module not found in Node.js Express JS

I've read several topics on this issue here at stackoverflow, but I am still unable to get my node application running. When I try to run the command: node app.js local I receive the following error: Error: Cannot find module './config' ...

javascriptnode.jsbashexpressnpm

In PHP, specify the dimensions of an image

How can I specify the size to display the image as 400X400: height = 400 width = 400 Please provide the code for sizing it as 400X400, thanks. Below is the code snippet: <?php // Retrieve data from the people table $sql = "select * ...

phphtmlimageechoimage-size