Experience a unique double scrolling effect using the react-spring parallax and react-three-fiber Canvas components

My goal is to create a scrolling box with a parallax effect, but I'm facing an issue where it won't bind with the Canvas element, even when both are included under the same div.

In the screenshot provided, you can see div1 and div2 each having their own scroll feature: https://i.stack.imgur.com/froLk.jpg

I have also tried placing them in separate divs: https://i.stack.imgur.com/MWBDk.jpg

Even when placed under the same div, I still can't eliminate the double scroll. Any suggestions? https://i.stack.imgur.com/7DZ4J.jpg https://i.stack.imgur.com/RYtFm.jpg

Could it be that react-spring parallax isn't compatible with react-three-fiber, leading to the existence of a library like react-three-flex?

You can access the codesandbox here

Answer №1

To incorporate the canvas into the Parallax container, consider adding it as a new element called ParallaxLayer. You can view an example here – https://codesandbox.io/s/sad-dewdney-r0c0u?file=/components/Parallax.js

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

Is it possible to display the HTML video poster at the end of the video without relying on jQuery or JavaScript?

I have a webpage with multiple informational videos, using basic HTML/CSS player markup without any Javascript/jQuery knowledge. After a video is played or paused, the poster image does not reappear. Is there a way to recall the poster within the simple HT ...

html video html5-video

Customize your QTabBar icons with Qt Stylesheet: Adjusting the icon mode

I am currently working on customizing a QTabBar with a stylesheet in my tool. I use QIcon to create icons for the tabs, allowing me to set different modes such as normal, disabled, and selected. The challenge I am facing is trying to apply a global stylesh ...

css qt qt4

What is causing find_by_css to return nothing when using nth-child?

Currently, I am facing an issue when trying to extract the "href" link from the following HTML code: https://i.stack.imgur.com/Gtzf4.png This is the code that I'm using: from selenium import webdriver from splinter import Browser from bs4 import Be ...

python css python-3.x selenium beautifulsoup

How can the HTML email width be adjusted on Outlook 2016?

When I send out HTML emails, I encounter an issue where the content takes up the full width no matter what. I have tried adjusting the width of table, tr, td, div, and body elements, but it still persists. This problem occurs on Outlook 2016 across all W ...

html css email outlook outlook-2016

I'm having trouble with using setInterval() or the increment operator (i+=) while drawing on a canvas in Javascript. Can anyone help me out? I'm new

I am looking to create an animation where a square's stroke is drawn starting from the clicked position on a canvas. Currently, I am facing an issue where the values of variables p & q are not updating as expected when drawing the square at the click ...

javascript html canvas setinterval increment

Empty screen appears when "npm run serve" command is executed following the build process

I am currently utilizing Material-ui. Following the project build with npm run build, I encounter a blank page when running npm run serve. I attempted to set homepage: "./" in the package.json as suggested here, however, it still displays a blank ...

javascript css reactjs material-ui

Trouble arises when adding HTML elements to a Content Editable Div. Any text inputted after programmatically inserting HTML content will merge with the last HTML tag instead

I am currently working on a project that involves creating message templates within an app. Users have the ability to add placeholders for fields like names to these templates by clicking a button. They can also remove these placeholders by selecting an &a ...

javascript html contenteditable

Displaying divs inline with overlapping child divs

As a beginner in CSS, I tackle the challenges of learning it every day. Despite feeling clumsy and not naturally adept at it, my determination is strong (although sometimes my brain feels like an old computer on the verge of overheating). My current goal i ...

html css

"Can someone guide me on the process of transmitting data to a client using Node in combination with

I am new to web development and struggling to understand how to transfer data from the Node server to the client while also displaying an HTML page. I am aware that res.send() is used to send data, but I'm having difficulty maintaining the client disp ...

javascript html node.js express web-development-server

Alter the path within a paragraph tag in html

I'm having some trouble changing the direction of a tag inside another tag. It's not working correctly for me. In the example below, I want to see aslami @ exactly as I have written it, but the result is showing @ before a instead of after i. ...

html css

Unable to access or click on Wordpress links or site titles

On my website, www.website.com, I have a main Wordpress installation and a test site at www.website.com/test. The main site functions correctly, but the links on the test site are behaving strangely. I have set the post title as the permalink structure (w ...

php html wordpress .htaccess

What is the best way to center text in a div with a distinct background color?

Could really use some assistance with this. Here are the images for reference: https://i.stack.imgur.com/JNZkT.jpg Currently getting this result: https://i.stack.imgur.com/nW17o.jpg <style> .Nav_bar_links div{ margin: 0% 1 ...

html css web-deployment

Feeling uncertain about altering the state in a particular manner

I am currently working on a page in NextJS that allows users to edit an SQL row and send it back to the backend. I have successfully fetched all the rows from the table and set the state to be the single row that matches the query parameter in the useRoute ...

mysql reactjs next.js

PHP method that invokes HTML code

I recently developed a registration and login system using object-oriented PHP. I am now looking to make the HTML code accessible from within a PHP method. Below is the View.php class that contains methods for creating the login and registration UI: < ...

php html

CSSer Q&A