Effets d'animation au scrolling

Version imprimable

29/01/2012, 13h43
quentin74

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.

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:

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 :)

29/01/2012, 18h01
quentin74

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/