Dia 23/2019 - Efeito Parallax

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 23, mostrando o uso da propriedade transform-style, com o valor preserve-3d.

Pré-visualização

Código

Começamos com a estrutura do HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Day 23</title>
<style>
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; }
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
* { margin: 0; padding: 0; list-style: none; }
body { background: #eee; font-family: Arial, Helvetica, sans-serif; }
</style>
<link rel="stylesheet" type="text/css" href="./day-23.css">
</head>
<body>
<div class="container">
<!-- slider -->
</div>
</body>
</html>
1
2
3
4
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
<div class="slide slide-4"></div>
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
.container {
height: 100vh;
margin: 0;
overflow-y: scroll;
overflow-x: hidden;
padding: 0;
perspective: 1.5px;
transform-style: preserve-3d;
}

.slide {
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
min-height: 100vh;
overflow: hidden;
position: relative;
transform-style: inherit;
transform-origin: top center;
width: 100h;
}

.slide:before {
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.5);
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.slide,
.slide:before { background: 50% 50% / cover; }

.slide-1 { background-image: url(https://pleno.news/wp-content/uploads/2019/04/Outono.jpg); z-index:2; }
.slide-2:before { background-image: url(https://cdn.shopify.com/s/files/1/1077/6566/products/Magical_Blue_Butterflies_Wall_1_1800x1800.jpg?v=1553120505); transform: translateZ(-1px) scale(2); }
.slide-3 { background-image: url(https://static.toiimg.com/photo/msid-67868104/67868104.jpg?1368689); z-index:2; }
.slide-4:before { background-image: url(https://res.cloudinary.com/fleetnation-static/image/asset/s--MifwX3dl--/f_auto/header-2018-2560w-c2f0f28235c4f87790c9d5181036c003); transform: translateZ(-1px) scale(2); }

Conclusão

A postagem original pode ser vista no meu Instagram e o código está acessível no meu Github.

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.