Effets d'animation au scrolling

quentin74 · 29/01/2012, 13h43

Bonjour et bon dimanche,

Je suis tombé sur ce site (http://thislandishovland.com/) l'autre jour, et j'ai remarqué cet effet de parallaxe que je voit de plus en plus sur divers sites.

Après de nombreuse recherche google, je ne suis pas arrivé à trouver comment ils réalisent cet effet. Etant extrêment débutant il est possible que je ne possède pas les bon mots-clé pour chercher. Je me suis aussi dit que cet effet était tellement simple à réalisé qu'il n'y avait que très peu de ressources.

Donc j'aimerai savoir si vous aviez de quoi m'aiguiller, voire si vous aviez des ressources pour que je puisse mettre en place cet effet sur mon site.

Merci.

rotrevrep · 29/01/2012, 17h14

bonjour

ce site comme d'autre utilise la propriété css z-index. elle prend des valeurs numériques, de 1 à+inf, 1 étant la couche la plus basse.
voici un exemple de code pour te montrer le fonctionnement :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<style>
#div1{
width:100px;
height:50px;
background-color:red;
position:absolute;
top:160px;
z-index:3;
}
#div2{
width:100px;
height:50px;
background-color:green;
position:absolute;
top:180px;
z-index:2;
}
#div3{
width:100px;
height:50px;
background-color:blue;
position:absolute;
top:200px;
z-index:1;
}
input{
position:absolute;
top:500px;
}
</style>
<script>
var a=160;
var b=180;
var c=200;
 
function change()
{
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
a-= 5;
b-=10;
c-=15;
div1.style.top = a+"px";
div2.style.top = b+"px";
div3.style.top = c+"px";
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<input type="button" value="clic" onclick="change()" /> // le clic du bouton déplacera les divs
</body>
</html>

tu remarqueras bien que la div ayant le z-index le plus fort reste toujours au dessus

quentin74 · 29/01/2012, 18h01

Merci beaucoup de ta réponse
Ce code est donc plutôt simple, et je comprend son fonctionnement.

Et ça m'a permis de trouver les ressources pour me plonger dans ce défi =)

Pour ceux qui pourrait être intéresser :
http://www.bertrandkeller.info/2012/...lugins-jquery/
http://johnpolacek.github.com/scrollorama/

29/01/2012, 13h43	#1
quentin74 Invité de passage Inscription : juin 2011 Messages : 7 Détails du profil Informations forums : Inscription : juin 2011 Messages : 7 Points : 2 Points : 2	Effets d'animation au scrolling Bonjour et bon dimanche, Je suis tombé sur ce site (http://thislandishovland.com/) l'autre jour, et j'ai remarqué cet effet de parallaxe que je voit de plus en plus sur divers sites. Après de nombreuse recherche google, je ne suis pas arrivé à trouver comment ils réalisent cet effet. Etant extrêment débutant il est possible que je ne possède pas les bon mots-clé pour chercher. Je me suis aussi dit que cet effet était tellement simple à réalisé qu'il n'y avait que très peu de ressources. Donc j'aimerai savoir si vous aviez de quoi m'aiguiller, voire si vous aviez des ressources pour que je puisse mettre en place cet effet sur mon site. Merci.
	00

29/01/2012, 18h01	#3
quentin74 Invité de passage Inscription : juin 2011 Messages : 7 Détails du profil Informations forums : Inscription : juin 2011 Messages : 7 Points : 2 Points : 2	Merci beaucoup de ta réponse Ce code est donc plutôt simple, et je comprend son fonctionnement. Et ça m'a permis de trouver les ressources pour me plonger dans ce défi =) Pour ceux qui pourrait être intéresser : http://www.bertrandkeller.info/2012/...lugins-jquery/ http://johnpolacek.github.com/scrollorama/
	10

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email