Параллакс создаёт такой эффект, когда при скроллинге изображение на переднем плане движется быстрее, чем изображение на заднем плане. Такой эффект придаёт ощущение пространства.
Для создания параллакс эффекта нам понадобятся три изображения:
- фон (в моём примере это изображение вселенной),
- изображение переднего плана(это прозрачное облако, я их сделала в Фотошопе с помощью специальных кистей и сохранила в формате png, чтобы картинка была прозрачной).
- изображение среднего плана (тоже облако).
Все изображения необходимо поместить в папку images.
HTML разметка.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Параллакс</title>
</head>
<body>
<div class="wrapper">
<div class="group">
<div id="background" class="layer">
<div class="img1"><img src="images/img1.jpg"></div>
</div>
<div id="middle" class="layer">
<div class="img2"><img src="images/img2.png"></div>
</div>
</div>
<div class="group">
<div id="foreground" class="layer">
<div class="img3"><img src="images/img3.png"></div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Параллакс</title>
</head>
<body>
<div class="wrapper">
<div class="group">
<div id="background" class="layer">
<div class="img1"><img src="images/img1.jpg"></div>
</div>
<div id="middle" class="layer">
<div class="img2"><img src="images/img2.png"></div>
</div>
</div>
<div class="group">
<div id="foreground" class="layer">
<div class="img3"><img src="images/img3.png"></div>
</div>
</div>
</div>
</body>
</html>
Стили.
body, html {
overflow: hidden;
margin:0;
padding:0;
}
.wrapper {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 180px;
perspective: 180px;
}
.group {
position: relative;
height: 500px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.img1, .img2, .img3{
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.img1 {
left: 50%;
top: 50%;
}
.img2 {
left: 60%;
top: 150%;
}
.img3 {
left: 50%;
top: 50%;
}
#foreground {
z-index: 1;
-webkit-transform: translateZ(100px) scale(.7);
transform: translateZ(90px) scale(.7);
}
#middle{
z-index: 3
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
#background{
z-index: 2;
-webkit-transform: translateZ(-400px) scale(2);
transform: translateZ(-300px) scale(2);
}
overflow: hidden;
margin:0;
padding:0;
}
.wrapper {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 180px;
perspective: 180px;
}
.group {
position: relative;
height: 500px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.img1, .img2, .img3{
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.img1 {
left: 50%;
top: 50%;
}
.img2 {
left: 60%;
top: 150%;
}
.img3 {
left: 50%;
top: 50%;
}
#foreground {
z-index: 1;
-webkit-transform: translateZ(100px) scale(.7);
transform: translateZ(90px) scale(.7);
}
#middle{
z-index: 3
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
#background{
z-index: 2;
-webkit-transform: translateZ(-400px) scale(2);
transform: translateZ(-300px) scale(2);
}