Bonjour je sais que je ne suis pas dans le bon sujet, mais est-ce que vous pouvez me trouver une solution à mon problème.
Je veux mettre dans une div particulier un petit effet de particule en arrière du contenu. C'est sur la balide qui a l'id "container-Web"
Voci le code html de pas page
[code]
<div class="wrap">
<div class="container" id="container-Web">
<?php if(AuthComponent::user('id')): ?>
<div class="user-bar connected">
<div class="container_16 menu user">
<div class="grid_4 p-action">
<p><?= $this->Html->link(" Se déconnecter",array('controller'=>'users','action'=>'logout'),array('class'=>'iconic eject')); ?></p>
</div>
<?= $this->element('usermenu'); ?>
</div>
</div>
<?php else: ?>
<div class="user-bar-default">
<div class="container_16 menu user">
<div class="grid_4 p-action-default">
<p><?= $this->Html->link(" Se conntecter",array('controller'=>'users','action'=>'login'),array('class'=>'iconic user')); ?></p>
</div>
<?= $this->element('usermenu'); ?>
</div>
</div>
<?php endif;?>
<?php if(AuthComponent::user('id')): ?>
<?php if(AuthComponent::user('role') == 'admin'): ?>
<?= $this->element('adminM') ;?>
<?php else: ?>
<?= $this->element('webmestreMenu') ;?>
<?php endif;?>
<?php elseif(AuthComponent::user('role') == 'user'): ?>
<?php else: ?>
<?php endif;?>
<div class="st"></div>
<div class="topWrap">
<div class="topbgwrap"></div>
</div>
<div class="mainWrap">
<div class="Warp">
<div class="menuElement">
<ul>
<li><a href="#" class="dMenu" id="displayMenu">Aficher le menu</a></li>
<li><a href="#" class="dMenu" id="cache-h-f">Aficher la page commplete</a></li>
<li> <a href="#" class="dMenu" id="display-h-f">Aficher le haut et le bas de </a></li>
</ul>
</div>
</div>
<div class="container_16">
<div class="info-message">
<p>Le site web est en version <strong>béta</strong>. Celà veux dire que certainnes fonctionalités ne sont pas encore actves. Si vous rencontez des problème techniques veuillez le faire parvenir un rapport sur la page "<strong><?php echo $this->Html->link(' Écrivez-Moi',array('controller'=>'contact','action'=>'index')); ?></strong>".</p>
</div>
<?php echo $this->Session->flash(); ?>
<?php echo $this->fetch('content'); ?>
</div>
</div>
<div class="sb"></div>
</div>
</div>
</div>
[/code]
voici le code javascript :
[code]
var container = document.getElementById('container-Web');
var DivWidth = document.getElementById('container-Web').clientWidth;
var DivHeight = document.getElementById('container-Web').clientHeight;
var camera = new THREE.PerspectiveCamera(75,DivWidth/DivHeight,1,10000);
var distance = 1000;
camera.position.z = distance;
var scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.CanvasRenderer();
renderer.setSize( DivWidth, DivHeight );
container.appendChild( renderer.domElement );
/var cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
cube.position.x = cube.position.y = cube.position.z = 0;
scene.add( cube );/
camera.lookAt(new THREE.Vector3(0,0,0));
var geometry = new THREE.Geometry();
for ( var i = 0; i < 50; i ++ ) {
particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( {
color: Math.random() * 0x808080 + 0x808080, //0x0000000,
opacity: 1,//0.1,
program: function ( context ) {
context.beginPath();
context.arc( 0, 0, 1, 0, Math.PI * 2, true );
context.closePath();
context.fill();
}
} ) );
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.scale.x = particle.scale.y = Math.random() * 12 + 5;
scene.add( particle );
geometry.vertices.push( new THREE.Vertex( particle.position ) );
}
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.05 } ) );
scene.add( line );
renderer.render( scene, camera );
document.addEventListener( 'mousemove', onMouseMove, false );
function onMouseMove(event){
mouseX = (event.clientX - DivWidth/2) / DivWidth/2;
mouseY = (event.clientY - DivHeight/2) / DivHeight/2;
camera.position.x = Math.sin(mouseX Math.PI) distance;
camera.position.y = - Math.sin(mouseY Math.PI) distance;
camera.lookAt(new THREE.Vector3(0,0,0));
renderer.render( scene, camera );
}
[/code]
Merci de votre aide en avance!