Discussion :

[Pecose]

Bonjour tout le monde.

J'aimerai apprendre à faire une page avec des éléments qui en fonction du scrolling, se déplacent à des vitesses différentes.
Je ne sais pas du tout quels éléments utiliser.
J'ai trouver une balise qui s'appelle <canvas> et je ne sais pas exactement comment elle fonctionne ni ce quel fait.
Je l'ai tester de cette manière:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<canvas id="canvas" width="483" height="283"></canvas>
<script type="text/javascript">
	var canvas = document.getElementById('canvas');
		canvas.width = 483;
		canvas.height = 283;
	var context = canvas.getContext('2d');
	var image = new Image();
	    image.src = "background.jpg";
	    context.drawImage(image,0,0);
</script>

Je ne sais pas si c'est la bonne façon de faire mais en tout cas, rien ne s'affiche.
Je pense que par ailleurs il faudra récupérer la position du scroll pour savoir où afficher l'image.

Merci de votre aide.

[Invité]

Bonjour,

...en fonction du scrolling, se déplacent à des vitesses différentes...

"effet Parallaxe" / "Parallax scrolling"

[NoSmoking]

Bonjour,

J'ai trouver une balise qui s'appelle <canvas>

quel est le rapport avec le scrolling

[Pecose]

J'ai trouver une balise qui s'appelle <canvas>

quel est le rapport avec le scrolling

Effectivement c'est pas clair.
Imaginons 2 calques, sur le premiers se trouve une image de fond (ex:paysage),
sur le deuxième ce trouve le reste de ma page web.(ex:un fond blanc et du texte).

Ce que je veux faire c'est une ouverture dans le fond blanc par laquelle on peut voir le paysage.
La page "blanche+texte" défile normalement alors que le paysage, pas ou peux.

J'imagine que <canvas> peut convenir à l'un de ces élément mais je ne sais même pas lequel.

"effet Parallaxe" / "Parallax scrolling"

Un effet parallaxe exactement, merci.
C'est quand même mieux avec du vocabulaire.