📄 Parallax Simples

🧠 Objetivo

Este projeto demonstra um efeito de parallax básico usando apenas HTML e CSS, sem JavaScript. O efeito cria uma sensação de profundidade ao rolar a página, com imagens de fundo que permanecem fixas enquanto o conteúdo se move.


🧱 HTML: Estrutura da Página

O HTML é composto por:

Principais elementos:

<div class="parallax img1"></div>     <!-- Imagem de fundo 1 -->
<div class="content">...</div>        <!-- Texto sobre o efeito -->
<div class="parallax img2"></div>     <!-- Imagem de fundo 2 -->
<div class="content">...</div>        <!-- Texto adicional -->

🎨 CSS: Estilização e Efeito Parallax

Reset e Box Model

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Seções Parallax

.parallax {
  height: 100vh;                        /* Ocupa toda a altura da tela */
  background-attachment: fixed;        /* Mantém a imagem fixa ao rolar */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Imagens de Fundo

.img1 {
  background-image: url('https://picsum.photos/1920/1080?nature');
}

.img2 {
  background-image: url('https://picsum.photos/1920/1080?mountain');
}

Seções de Conteúdo

.content {
  padding: 50px;
  background: #f1f1f1;
  text-align: center;
}

🖼️ Como Funciona o Parallax