Hi I have completely written the code as same as the example, but th

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clip

The 3D Animation is stopped when scrolling down the page. about vanta HOT 5 CLOSED

tengbao commented on August 15, 2024

The 3D Animation is stopped when scrolling down the page.

from vanta.

Comments (5)

WuboDev commented on August 15, 2024

<!DOCTYPE html>
<html lang="en-US">
  <head>
  	<meta charset="UTF-8">
	<title>3D</title>
	<script type="text/javascript" src="./js/three.r92.min.js"></script>
	<script type="text/javascript" src="./js/vanta.wave.min.js"></script>
  </head>

  <body>
	<div id="layer"></div>
	<div style="height:3000px;"></div>

	<script>
		VANTA.WAVES({
		      el: "#layer",
		});
	</script>	
  </body>
  
</html>

from vanta.

pranaybaldev commented on August 15, 2024

Use section instead of div

from vanta.

WuboDev commented on August 15, 2024

I tried, but still no luck.

from vanta.

tengbao commented on August 15, 2024

@LovageIO Ah I see the problem. This issue will be fixed if you set a height or add some inner content on your <div id="layer"></div> element! Meanwhile, I'll fix the code.

from vanta.

tengbao commented on August 15, 2024

@LovageIO The above solution will work for the old code, or you can update to the new version, which makes the height/width logic clearer. Either way, you'll probably want to explicitly set a height on the #layer element.

Fixed in b769f2e

from vanta.

The 3D Animation is stopped when scrolling down the page. about vanta HOT 5 CLOSED

Comments (5)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent