Sujet Précédent Sujet Suivant

Pointeur laser sur ma page internet

Fermé
Nicolala67 Messages postés 47 Date d'inscription mercredi 5 janvier 2011 Statut Membre Dernière intervention 15 avril 2018 - 18 mars 2013 à 21:38
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 31 oct. 2013 à 23:11
Bonjour,

Je cherche à récupérer un curseur animé pour ma page internet.
En java ou en html5, mais pas de flash (ça marche pas partout apparemment)
Il faudrait quelque chose qui ressemble à un curseur qui en cliquant lance un laser sur l'écran.
Le top serait qui laisse une trace sur l'écran le temps de la visite, mais je suis pas difficile si ça ne le fait pas. ;-)
Merci d'avance de vos réponses.
A bientôt
A voir également:

5 réponses

Réponse 1 / 5
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 26/03/2013 à 00:42
Voici un gros bout de code, tu peux le tester sous chrome et safari, après à toi de l'adapter. J'espère ne pas être trop loin du résultat escompté.

++ 

<html>
<head>
	<title></title>
	<style type="text/css">
		html, body{
			height: 100%;
			background-color: #333;		
			-moz-user-select: none;
		    -khtml-user-select: none;
		    -webkit-user-select: none;
		    user-select: none;
		    cursor: crosshair;
		}
		#global{
			margin:0 auto;
			text-align: center;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		@-webkit-keyframes smoke{
			0%{
				width: 3px;
				height: 3px;
				margin-top: 0px;
				background-color: #ccc;
				box-shadow: 0 0 50px #fff;
				opacity: .2;
				border-radius: 100px;
			}
			100%{
				margin-top: -300px;
				height: 75px;
				width: 75px;
				opacity: .1;
			}
		}
		@-webkit-keyframes hole{
			0%{
				opacity: 0;
				width: 2px;
				height: 2px;
				background-color: orange;
			}
			100%{
				opacity:1;
				width: 5px;
				height: 5px;
				background-color: #111;
			}
		}
		.hole{
			position: absolute;
			width: 5px;
			height: 5px;
			border-radius: 10px;
			/*background: url('hole.png') no-repeat;*/
			background-color: #111;
			z-index: 1000;
			opacity: 1;
			-webkit-animation: hole .3s linear; /* Safari and Chrome */
			box-shadow: 0 0 5px #000;
		}
		.hole .smoke{
			position: absolute;
			-webkit-animation: smoke 1s linear; /* Safari and Chrome */
		}

		.laserPointer{
			width: 292px;
			height: 183px;
			background:url('http://image.noelshack.com/fichiers/2013/13/1364254149-laser.png') 0 -183px no-repeat;
			position: absolute;
			z-index: 999999;
		}

		.laserPointer.active{
			background:url('http://image.noelshack.com/fichiers/2013/13/1364254149-laser.png') 0 0 no-repeat;
		}

		.center{
			width: 960px;
			margin:0 auto;
		}

		.paragraph{
			float: left;
			width: 100%;
			color:white;
		}

	</style>
</head>
<body>
	<div class="laserPointer"></div>
	<div id="global">
		<div class="center">
			<div class="paragraph">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vulputate, sem non mattis mollis, lorem orci venenatis purus, eu hendrerit leo urna id velit. Duis tempus dapibus pharetra. Suspendisse odio orci, rutrum sed venenatis non, lobortis ut tellus. Curabitur velit tellus, luctus vel hendrerit sit amet, mattis at massa. Aenean tincidunt facilisis sapien, tempor rutrum ipsum feugiat at. Nam ut nisl ipsum, et dignissim leo. Aenean molestie tincidunt vulputate. Aliquam erat volutpat. Etiam consequat ante nec est porta congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam eu ligula nisl. Pellentesque eleifend aliquet nibh, ultricies congue mauris semper quis. Etiam rhoncus risus sit amet neque cursus ut ullamcorper elit scelerisque. Duis tristique varius nunc, at molestie tellus mollis a. Nunc sed nunc in metus porttitor ornare.
			</div>
		</div>
	</div>
</body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
	var laser = {
		timer: null,
		mouseDown: false,
		_initialize: function(){
			var me = this;
			this.addEventsListeners();
		},
		addEventsListeners: function(){
			var me = this;
			$(window).mousedown(function(e){
				me.mouseDown = true;
			});
			$(window).mouseup(function(){
				me.mouseDown = false;
			});
			$(window).mousemove(function(e){
				me.setLaser(e);
			});
		},
		setLaser: function(e){
			$('.laserPointer').css('left', e.clientX - 292 + 'px');
			$('.laserPointer').css('top', e.clientY+ 'px');
			if(this.mouseDown){
				$('.laserPointer').addClass('active');
				$('#global').append('<div class="hole" style="top:'+(e.clientY - 2)+'px; left: '+(e.clientX - 2)+'px"><div class="smoke"></div></div>');
			}else{
				$('.laserPointer').removeClass('active');
			}
		}
	}
	laser._initialize();
</script>
</html>
3
Dracknard Messages postés 493 Date d'inscription mercredi 16 janvier 2013 Statut Membre Dernière intervention 4 mai 2015 116
Modifié par Dracknard le 26/03/2013 à 13:25
Chapeau bas pour ce codage.
Je ne pensais pas que c'était possible.

J'espère que Nicolala est toujours à l'écoute ^^
0
Rod
9 oct. 2013 à 22:15
Bravo!
0
Réponse 2 / 5
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
25 mars 2013 à 23:00
Hello,

Je vais tenter de m'y coller, ça peut être marrant. Réponse dans un petit moment, en espérant que tu es toujours à l'écoute.
++
0
Réponse 3 / 5
Nicolala67 Messages postés 47 Date d'inscription mercredi 5 janvier 2011 Statut Membre Dernière intervention 15 avril 2018
27 mars 2013 à 18:18
Désolé mais je n'ai pas relever mes mails depuis quelques jours et la fois dire oh p... J'ai pas l'habitude de dire des gros mots mais la cest la classe!
Merci
je teste
0
Réponse 4 / 5
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
28 mars 2013 à 08:20
Content que ça te plaise, si tu as besoin d'aide pour l'adapter, je reste à l'écoute.

++
0
graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 975
30 oct. 2013 à 21:24
As tu une page de demo , j' ai pas envie de relancer tous mes softs pour voir ce que ca donne =)
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
31 oct. 2013 à 10:02
Hello,

Voila l'url: http://prosthetiks.alwaysdata.net/laser/

++
0
graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 975
31 oct. 2013 à 10:34
Bravo, effet super sympa et fonctionne trés bien, je suis sur que ca va attirer du monde ce p'tit truc ^^
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
31 oct. 2013 à 10:28
Bien que ça ne me soit pas utile, je tenais quand même à dire un petit "bravo" pour le code, joli travail ;).
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
31 oct. 2013 à 23:11
Pas très utile... peut-être, mais ça fait toujours plaisir! :) Alors merci !
0

Discussions similaires

35 GO à l'étranger
Laurence -
Laurence -

2 réponses
Quel est l'équivalent 40 GO d'internet en heures ?
mha29 -
Sylvie -

5 réponses