Maintain Static Background while Allowing Photos to Scroll

Struggling with a design issue on my website www.kdoan.com. The Three JS background animation is not staying fixed while allowing project sections to scroll normally. It used to work perfectly, allowing users to scroll through all the photos.

For instance, if you visit my site and go to projects on the left sidebar, then click on Hydration, you'll see an image of my work but won't be able to scroll to see more. When I try to fix this, it breaks the aesthetic and shows a white background. Any help or guidance on resolving this would be greatly appreciated. Thank you!

javascriptjqueryhtmlcssthree.js

Answer №1

In my opinion, a good approach would be to enclose all the content (text and images) of the page within a div element, set it to be scrollable, and make it fill the entire page. This way, users can easily navigate through the information without missing anything important. Here is the code snippet I propose:

<div style="width:100%; height:100vh; overflow-y:scroll;">
    Hydration is a series of 3D models I collaborated on with Yung Jake.
    These pieces feature distorted bottles that create mesmerizing visual effects
    when refracted against various images and then transferred onto metal canvases. ...
</div>

Also, I must say, the background you've chosen looks fantastic!

If you find this suggestion useful, kindly inform me.

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

Updating date field value from client-side to server-side

When making an AJAX call to the controller, I am using JSON.stringify to send data to the controller action. However, I am facing an issue with the date field. The date is in EDT (my local time) on the client side but gets converted to GMT on the server si ...

c#jqueryajaxasp.net-mvcdate

generate blob using file path vue electron packager

Currently, I am utilizing the fs module within my electron application to access file content from a specified path. ipcMain.on('fileData', (event, data) => { data.forEach( (file) => { const stream = fs.createReadStream(file) stream.o ...

javascriptnode.jsvue.jselectron

What is the reason behind displaying the validation message "Please fill out this field" when I click the Irrelevant button?

After implementing a map on my webpage, I encountered an issue when clicking the 'cellSize' button that triggered a warning message to appear. I want to resolve this issue. How can I fix it? The warning message looks like this: https://i.sstatic ...

javascriptjqueryvalidationrequired

Adding a component to a grid row with a click action

I have a grid of items and I want to display another component that takes up the full width below the clicked item when it's selected. Here is an illustration of what I'm trying to accomplish: https://i.sstatic.net/5XIvf.png Within my button-li ...

cssangular

Struggling to set up an HTTPS server with Express and Node.js - it just won't start

I'm attempting to configure HTTPS with express.js for node, but I am encountering issues getting it to work. Below is the code from my server.js file: const fs = require('fs'); const http = require ('http'); const https = require( ...

javascriptnode.jsexpresssslhttps

The issue with AngularJS ng-show and $timeout functionality not functioning as expected

As a newcomer to AngularJS, I recently started an individual project utilizing ng-show and if else statements with $timeout. Despite my efforts, I have been unable to make the answers timeout after being displayed for a few seconds. I've tried various ...

javascriptangularjs

Tips for verifying the presence of a value in a select box

Are there alternative approaches to using a for loop to determine if a value is present in a select box with JavaScript? I am interested in something similar to document.getElementById('selbox').valueExists('myval'); ...

javascriptdom

What could be the reason for the issue `injection "store" not found` showing up when attempting to call `this.store.commit()`?

I am currently working on storing values with VueX, specifically using Vuex 4.0 instead of the older version 3.0. While attempting to commit a value, I encountered an issue as follows: ... this.$store.commit("changerusername", u) ... To addres ...

javascriptvue.jsvuex

Tips for creating a puzzling effect with shadow as you move

When I work on my jigsaw puzzle game, I encounter an issue where the shadow of the parts moves with them when I try to scroll or move them. The problem looks like the image linked here: https://i.sstatic.net/3xhwY.jpg I attempted to use the code canvas.c ...

javascriptjqueryhtmlcanvashtml5-canvas

provide a hyperlink to the icon located in front of the navigation bar

I'm struggling to come up with a suitable title for this issue. What I am trying to achieve is placing a small icon in front of the navbar so that visitors can click on it and be directed to another site. Initially, I attempted to place the icon using ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to align an element next to another using id or class?

I am looking to align the search element next to either "Media Heading 1" or "Media Heading 2" based on their id/class. For instance: Assume I have an element with the class of "media-item-1" and I aim to position the search div alongside that element us ...

javascriptjquerycsstwitter-bootstrap

Animate the CSS with a delay using styled-components

Is it possible to delay the opacity to zero when a certain condition is met? The loader bar is controlled using JavaScript, but can this delay be achieved using CSS alone? const Wrap = styled.div` background: #ddd; width: 100px; height: 10px; bord ...

javascriptcssreactjs

Exploring SVG Morphing Reversal Techniques in Anime.js

I have been trying to implement direction: 'reverse' and timeline.reverse(), but so far it hasn't been successful. Interestingly, when I set loop: true, the reverse animation can be seen within the loop. However, my goal is to trigger this a ...

javascriptanimationvue.jssvganime.js

Tips on updating a specific value within an element stored in an array

I'm currently in the process of setting up a table where each row contains unique values. Using a for loop, I am able to generate these rows and store them in an array. Now, my question arises when I consider modifying a particular value with the id " ...

javascriptjqueryhtmlcss

Rendering Highcharts React Pie Chart Multiple Times

Here is the code snippet: import React, { useEffect, useRef, useState } from "react"; import * as Highcharts from "highcharts"; import HighchartsReact from "highcharts-react-official"; export const PieChart = (props: any) =&g ...

javascriptreactjshighchartsnext.js

Finding the smallest index in an array without considering the value of the element

Consider the following array: array = [[3, 3], [3, 4], [3, 5], [3, 6]] Now let's take a look at this conditional statement: array = [[3, 3], [3, 4], [3, 5], [3, 6]] for(let i = 0; i < array.length; i++){ if (array[i][0] === 3 && array ...

javascriptarraysloopsmin

Tips on implementing a script injected through the JS console to update form data in an Angular webpage and ensure that the changes are successfully saved

I am currently working on enhancing an existing electron app integrated with Angular. The main goal is to inject a script once the application is loaded in order to add a hotkey for efficiency. This hotkey should automatically click an edit button, input s ...

javascriptangular

Is Jquery Mobile's Table lacking responsiveness?

I have implemented a basic table from the jQuery Mobile website on my page. Take a look at the HTML code below: <div data-role="page" id="mainPage"> <div data-role="content> <table data-role="table" id="my-table" da ...

javascriptjqueryhtmlcssjquery-mobile

Executing a jQuery function only once per click on a select element - how can it be done?

I have a form with a select element, and I want some code to run when I click on it, but not when I choose an option. The issue is that the code is running twice, preventing me from selecting an option as it resets itself each time. Here is the HTML: &l ...

javascriptjqueryonclick

When working with React JS and the react-select library, I am looking to automatically reset the options to their default value once

I am attempting to disable the select list after unchecking the checkbox and resetting the select value back to default, but currently it is retaining the last selected option. I am utilizing React-select for the select and options in this scenario. APP.j ...

javascriptreactjs