Ça devrait être possible en modifiant l'offset du background via un code javascript.
Je crois qu'en CSS c'est :
1
| background-position: 100px 5px; |
EDIT:
Voici un exemple avec deux backgrounds qui ne vont pas à la même vitesse de parallaxe lorsqu'on scrolle :
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
| <!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8"/>
<style>
body {
min-height: 100%;
padding: 0;
margin: 0;
}
.fond{
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image:url(./fond.png);
}
</style>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
var scrolling = document.body.scrollTop + document.documentElement.scrollTop;
console.log(scrolling);
document.getElementById("fond1").style.backgroundPosition = "0px " + (scrolling / 20) + "px";
document.getElementById("fond2").style.backgroundPosition = "0px " + (scrolling / 7) + "px";
}
</script>
</script>
</head>
<body>
<div id="fond1" class="fond">
<div id="fond2" class="fond">
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>
<br>
</div>
</div>
</body>
</html> |
Pour faire fonctionner cet exemple, il te faut une image "fond.png" dans le même dossier que ton fichier html. L'image "fond.png" doit évidemment comporter des zones de transparence.
Ici j'ai mis une parallaxe de 20 sur le premier fond et une parallaxe de 7 sur le second fond. Au bout de quelques scrolls, les deux fonds commencent à se détacher l'un de l'autre.
| 
Chat
- 
- 
