Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript]obrazek do skryptu
Forum PHP.pl > Forum > Przedszkole
Lukatme
12.12.2012, 12:59:01
Mam problem chcę włożyć obrazek do stornki. Znalazłem skrypt w którym pada śnieg i jak wstawiam obrazek w html’u to śnieg pada dopiero pod obrazkiem. Ja chce żeby śnieg padał na całej stronce również na obrazku, lub żeby padał wszędzie poza obrazkiem. Pewnie trzeba wstawić obrazek do kodu javascript. Tylko nie chcę żeby był wstawiony jako tło bo tło już mam. Proszę o pomoc.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. 	<head>
  4. 		<title>three.js - particles - random</title>
  5. 		<meta charset="utf-8">
  6. 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
  7. 		<style type="text/css">
  8. 			body {
  9. 				background-color: #000044;
  10. 				background: url(img/bg.jpg) repeat-x;
  11. 				image: url(choinka.jpg);
  12. 				margin: 0px;
  13. 				overflow: hidden;
  14. 			}
  15.  
  16. 			a {
  17. 				color:#0078ff;
  18. 			}
  19. 		</style>
  20. 	</head>
  21. 	<body onload="init()">
  22.  
  23. 	<script type="text/javascript" src="js/ThreeCanvas.js"></script>
  24. 	<script type="text/javascript" src="js/Snow.js"></script>
  25.  
  26. 		<script>
  27. 			var SCREEN_WIDTH = window.innerWidth;
  28. 			var SCREEN_HEIGHT = window.innerHeight;
  29.  
  30. 			var container;
  31.  
  32. 			var particle;
  33.  
  34. 			var camera;
  35. 			var scene;
  36. 			var renderer;
  37.  
  38. 			var mouseX = 0;
  39. 			var mouseY = 0;
  40.  
  41. 			var windowHalfX = window.innerWidth / 2;
  42. 			var windowHalfY = window.innerHeight / 2;
  43.  
  44. 			var particles = []; 
  45. 			var particleImage = new Image();//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
  46. 			particleImage.src = 'img/ParticleSmoke.png'; 
  47.  
  48.  
  49.  
  50. 			function init() {
  51.  
  52. 				container = document.createElement('div');
  53. 				document.body.appendChild(container);
  54.  
  55. 				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
  56. 				camera.position.z = 1000;
  57.  
  58. 				scene = new THREE.Scene();
  59. 				scene.add(camera);
  60.  
  61. 				renderer = new THREE.CanvasRenderer();
  62. 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  63. 				var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
  64.  
  65. 				for (var i = 0; i < 500; i++) {
  66.  
  67. 					particle = new Particle3D( material);
  68. 					particle.position.x = Math.random() * 2000 - 1000;
  69. 					particle.position.y = Math.random() * 2000 - 1000;
  70. 					particle.position.z = Math.random() * 2000 - 1000;
  71. 					particle.scale.x = particle.scale.y =  1;
  72. 					scene.add( particle );
  73.  
  74. 					particles.push(particle); 
  75. 				}
  76.  
  77. 				container.appendChild( renderer.domElement );
  78.  
  79.  
  80. 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  81. 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
  82. 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
  83.  
  84. 				setInterval( loop, 1000 / 60 );
  85.  
  86. 			}
  87.  
  88. 			function onDocumentMouseMove( event ) {
  89.  
  90. 				mouseX = event.clientX - windowHalfX;
  91. 				mouseY = event.clientY - windowHalfY;
  92. 			}
  93.  
  94. 			function onDocumentTouchStart( event ) {
  95.  
  96. 				if ( event.touches.length == 1 ) {
  97.  
  98. 					event.preventDefault();
  99.  
  100. 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
  101. 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
  102. 				}
  103. 			}
  104.  
  105. 			function onDocumentTouchMove( event ) {
  106.  
  107. 				if ( event.touches.length == 1 ) {
  108.  
  109. 					event.preventDefault();
  110.  
  111. 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
  112. 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
  113. 				}
  114. 			}
  115.  
  116. 			//
  117.  
  118. 			function loop() {
  119.  
  120. 			for(var i = 0; i<particles.length; i++)
  121. 				{
  122.  
  123. 					var particle = particles[i]; 
  124. 					particle.updatePhysics(); 
  125.  
  126. 					with(particle.position)
  127. 					{
  128. 						if(y<-1000) y+=2000; 
  129. 						if(x>1000) x-=2000; 
  130. 						else if(x<-1000) x+=2000; 
  131. 						if(z>1000) z-=2000; 
  132. 						else if(z<-1000) z+=2000; 
  133. 					}				
  134. 				}
  135.  
  136. 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
  137. 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
  138. 				camera.lookAt(scene.position); 
  139.  
  140. 				renderer.render( scene, camera );
  141.  
  142.  
  143. 			}
  144.  
  145. 		</script>
  146. 	</body>
  147.  
  148.  
  149. </html>
[HTML] pobierz, plaintext
muniekw
13.12.2012, 12:34:59
Ustaw w stylach jakiś duży z-index tak, aby śnieg zawsze był na wierzchu.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.