Incorporated new code into the website, functioning properly, although it appears to keep scrolling endlessly below the footer

My website is experiencing a strange issue where the page seems to keep extending beyond the footer due to some JS code. I am not very familiar with JavaScript and have tried different solutions without success.

I have searched extensively online for a solution but have not found anything effective so far.

Below is the code snippet causing the problem:

const $ = document.querySelector.bind(document);
const w = $(".w");
const ee = $(".ee");
const l = $(".l");
const c = $(".c");
const o = $(".o");
const m = $(".m");
const e = $(".e");

function transformLetters() {
  const scroll = window.scrollY;
  
  w.style.transform = `translate3d(0, ${scroll*2.4}px, 0) rotateY(${-scroll*1.03}deg)`;

  ee.style.transform = `translate3d(${-scroll*1.45}px, ${scroll*1.95}px, 0) rotate(${-scroll*1.1}deg)`;

  l.style.transform = `translate3d(${scroll*1.65}px, ${-scroll*2.05}px, 0) rotate(${scroll*1.2}deg)`;

  c.style.transform = `translate3d(0, ${scroll*2.75}px, 0) rotateY(${scroll*0.05}deg)`;

  o.style.transform = `translate3d(${-scroll*1.75}px, ${scroll*1.65}px, 0) rotate(${-scroll*1.3}deg)`;

  m.style.transform = `translate3d(0, ${-scroll*1.5}px, 0) rotateY(${scroll*1.05}deg)`;

  e.style.transform = `translate3d(${-scroll*1.45}px, ${-scroll*1.95}px, 0) rotate(${-scroll*1.1}deg)`;
}

window.addEventListener("scroll", transformLetters);
.letters {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(0, 4%, 5%);
  font-size: 3.5rem;
  text-transform: uppercase;
  -webkit-perspective: 1200px;
          perspective: 1200px;
}
<div class="letters">
  <span class="w">w</span>
  <span class="ee">e</span>
  <span class="l">l</span>
  <span class="c">c</span>
  <span class="o">o</span>
  <span class="m">m</span>
  <span class="e">e</span>
</div>

javascripthtmlcss

Answer №2

Not entirely sure what else is happening on the page.

If you're experiencing issues, consider incorporating the following CSS code to address them.

const $ = document.querySelector.bind(document);
const w = $(".w");
const ee = $(".ee");
const l = $(".l");
const c = $(".c");
const o = $(".o");
const m = $(".m");
const e = $(".e");

function transformLetters() {
  const scroll = window.scrollY;
  
  w.style.transform = `translate3d(0, ${scroll*2.4}px, 0) rotateY(${-scroll*1.03}deg)`;

  ee.style.transform = `translate3d(${-scroll*1.45}px, ${scroll*1.95}px, 0) rotate(${-scroll*1.1}deg)`;

  l.style.transform = `translate3d(${scroll*1.65}px, ${-scroll*2.05}px, 0) rotate(${scroll*1.2}deg)`;

  c.style.transform = `translate3d(0, ${scroll*2.75}px, 0) rotateY(${scroll*0.05}deg)`;

  o.style.transform = `translate3d(${-scroll*1.75}px, ${scroll*1.65}px, 0) rotate(${-scroll*1.3}deg)`;

  m.style.transform = `translate3d(0, ${-scroll*1.5}px, 0) rotateY(${scroll*1.05}deg)`;

  e.style.transform = `translate3d(${-scroll*1.45}px, ${-scroll*1.95}px, 0) rotate(${-scroll*1.1}deg)`;
}

window.addEventListener("scroll", transformLetters);
.letters {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(0, 4%, 5%);
  font-size: 3.5rem;
  text-transform: uppercase;
  -webkit-perspective: 1200px;
          perspective: 1200px;
  /* Additional CSS */
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.other {
  height: 1400px;
}
<div class="letters">
  <span class="w">w</span>
  <span class="ee">e</span>
  <span class="l">l</span>
  <span class="c">c</span>
  <span class="o">o</span>
  <span class="m">m</span>
  <span class="e">e</span>
</div>
<div class="other"></div>

Answer №3

Hey @Chaska, I wanted to express my appreciation for your response. Even though it didn't solve my issue right away, it did point me in the right direction. I followed your advice and encountered some formatting challenges with the header (I omitted code details). However, after tweaking your suggestion slightly, I managed to resolve the issue. Thank you so much for your support!

            overflow: hidden;
            position: static;

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

Setting the height of a div using CSS and navigating between views using Angular UI

Issue One: When moving one square, the border should appear and the menu should cover the entire height. I've already spent 2 hours trying to fix this, but it still doesn't fill the whole height or center vertically. Problem Two: If you make the ...

htmlcssangularjs

Occasionally, the function XMLHttpRequest() performs as expected while other times it may

I've encountered an issue with my XMLHttpRequest() function where it randomly works in both Chrome and IE. The function is triggered by On-click, but I'm having trouble catching the error. The only information I could gather is that readystate = ...

javascriptjqueryajaxxmlhttprequest

Can README docs be prioritized to appear before all other stories in Storybook navigation?

Organizing my Storybook stories is important to me. I like to nest all my stories under a “Docs” header, with each component having a README mdx file followed by its stories. My preferred order is to always have the README appear first in the navigatio ...

javascriptreactjsstorybook

Having trouble resolving the dependency tree within react-navigation-stack

Trying to understand navigation in React-native and attempting to execute the following code: import React, {Component} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {createAppContainer} from 'react-nav ...

javascriptreactjsreact-nativenpmreact-navigation-stack

Adjust the size of a menu by modifying its width

Hey everyone, I recently joined this website and I'm still learning how to code. My current project involves creating an off-canvas menu, but I've come across a few challenges. Firstly, does anyone know how to adjust the width of the menu when it ...

htmlcssmenuoff-canvas-menu

Pause for a brief moment before proceeding to the next task within the map

My situation involves having a list of usernames that represent accounts: let users = [ "user1","user2","user3","user4","user5","user6","user7" ] users.map(async (user, i) => { co ...

javascriptnode.js

Customize the appearance of Angular components by altering their color schemes

When working on my project, I often utilize pre-made Angular components. However, some of these components come with colors that do not align with the overall aesthetic of my project (refer to image above). To rectify this issue, I am looking to replace t ...

cssangular

Each time the web animation is utilized, it gets faster and faster

As part of an assignment, I am working on creating an interactive book that can be controlled by the arrow keys and smoothly comes to a stop when no key is being pressed. However, I have noticed that with each arrow key press, the animation speeds up. Bel ...

javascripthtmlarraysthree.js

Swapping out the entire vue.js container

I have a custom vue.js widget that I initialize like so: var myWidget = new Vue({ el: '#widget-container', methods: { loadData:function() { // custom functionality here } }, }); The HTML structure is as f ...

javascriptjqueryvue.js

When selecting an option in the burger menu, the dropdown does not react properly

I am facing an issue with the burger menu where one of the options should trigger a dropdown, but the content is not adjusting properly. The dropdown menu should push the other content downward, but currently, it overlaps. I have included the code for th ...

htmlcssdrop-down-menumedia-queries

What is stopping me from sending data via POST - Express?

I'm encountering an issue with Express [POST request]: I have developed server-side and client-side code to send data to both the terminal and the browser.. Unfortunately, I am unable to view the result of the post function!! Please assist me, I feel ...

javascriptnode.jsexpresslocalhostnode-modules

Struggling to properly parse JSON data using jQuery

I am a beginner in jquery and have a php script that returns JSON data. However, I am facing an issue while trying to fetch and process the result using jquery. Below is the code snippet: calculate: function(me, answer, res_id, soulmates) { conso ...

javascriptjqueryjson

The element is being offset by SVG animation that incorporates transform properties

I'm working on creating a halo effect by rotating an SVG circular element using the transform rotate function. I've been using getBox to find the center point of the element, but when the rotation occurs, the overall image is getting misaligned w ...

javascriptsvgsvg-animate

Learn the process of seamlessly uploading various document formats, videos, and previewing documents with Angular software

I am having trouble viewing uploaded files in the carousel. While I can see video and image files, other document formats are not displaying. Can someone please recommend a solution to enable viewing all types of documents as well? mydata = [] onSelect ...

javascriptangulartypescriptvideo-upload

Invoke ajax to reset session once user navigates away from page

I am looking for a solution to automatically clear the PHP session array every time a user exits my webpage. However, I need to exclude cases where the user clicks on links with query strings. I attempted using Javascript code, but it did not work as expec ...

phpjavascriptjqueryajaxregex

Building User-Friendly Tabs with Twitter Bootstrap: Add or Remove Tabs and Content on the Fly

Looking forward to any assistance or suggestions... I am utilizing Twitter Bootstrap tabs for organizing information on a form page. Each tab will contain a "contact form" where users can add multiple contacts before submitting the entire form. <div c ...

javascriptjquerytwitter-bootstrap

What is the reason for the lack of an applied CSS selector?

.colored p{ color: red; } article > .colored{ color:powderblue; } .blue{ color: white; } <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initi ...

javascripthtmlcss

Encountering difficulties in storing array data into MongoDB collection

I am facing an issue with connecting to two different MongoDB instances using different URLs. One URL points to a remote connection string while the other one is for a local MongoDB instance. Initially, I establish a connection to MongoDB using MongoClient ...

javascriptnode.jsmongodbexpressmongodb-query

Using JavaScript to empty input field when switching focus between input fields

I am experiencing an issue with clearing a input number field. Here is the code snippet in question: <input class="quantity_container" v-model="length.quantity" type="number" pattern="[0-9]*" inputmode="numeric" onfocus="if (this.value == &ap ...

javascripthtmlvue.js

Guide to running examples of three.js on a local web browser

Currently, I am attempting to run the examples from three.js locally in a web browser on MacOS. To do this, I have cloned the entire three.js repository and attempted to open a file in a browser (such as three.js/examples/misc_controls_orbit.html). However ...

javascriptthree.js