introdução
CSS moderno é uma ferramenta poderosa que você pode usar para criar muitas funcionalidades de interface de usuário avançada (UI). No passado, essas características eram baseadas em bibliotecas JavaScript.
neste guia, você irá configurar algumas linhas CSS para criar um efeito de paralaxe rolante em uma página web. Você irá usar imagens de placekitten.com como imagens de fundo de substituição.
Você terá uma página web com um puro efeito de paralaxe scrolling CSS depois de ter completado o tutorial.advertência: Este artigo usa propriedades experimentais de CSS que não funcionam entre navegadores. Este projeto foi testado e funciona no Chrome. esta técnica não funciona bem no Firefox, Safari e iOS devido a algumas das otimizações desses navegadores.
Passo 1 — Criar um novo projecto
nesta etapa, use a linha de comandos para configurar uma nova pasta e ficheiros do projecto. Para iniciar, abra o seu terminal e crie uma nova pasta de projecto.
escreva o seguinte comando para criar a pasta do projecto:
- mkdir css-parallax
neste caso, você chamou a pasta css-parallax. Agora, mude para o css-parallax pasta:
- cd css-parallax
em seguida, crie uma index.html arquivo no seu css-parallax pasta com o nano comando:
- nano index.html
Você vai colocar todo o HTML para o projecto deste arquivo.
no próximo passo, você vai começar a criar a estrutura da página web.
Passo 2-Configurar a estrutura da aplicação
neste passo, irá adicionar o HTML necessário para criar a estrutura do projecto.
dentro do seu index.html ficheiro adicionar o seguinte código:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Scrolling Parallax</title> </head> <body></body></html>Esta é a estrutura básica da maioria das páginas web que usamHTML.
aditar o seguinte código dentro do <body> tag:
<body>... <main> <section class="section parallax bg1"> <h1>Cute Kitten</h1> </section> <section class="section static"> <h1>Boring</h1> </section> <section class="section parallax bg2"> <h1>Fluffy Kitten</h1> </section> </main>...</body>este código cria três secções diferentes. Dois terão uma imagem de fundo, e um será um fundo estático e simples.
nos próximos passos, irá adicionar os estilos para cada secção, usando as classes que adicionou no HTML.
Passo 3-Criar um ficheiro CSS e adicionar um ficheiro CSS inicial
neste passo, irá criar um ficheiroCSS. Em seguida, você vai adicionar no CSS inicial necessário para estilo do site e criar o efeito paralaxe.
Primeiro, crie uma styles.css arquivo no seu css-parallax pasta com o nano comando:
- nano styles.css
Este é o lugar onde você vai colocar todo o CSS necessário para criar o efeito de rolagem paralaxe.
A seguir, comece com a classe .wrapper Dentro do seu ficheiro styles.css adicione o seguinte código:
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}The.wrapper class sets the perspective and scroll properties for the whole page.
a altura do Invólucro tem de ser definida para um valor fixo para o efeito funcionar. Você pode usar a unidade de visualização vh configurada para 100 para obter a altura total da área de visualização do ecrã.
Quando escalar as imagens, estas irão adicionar uma barra de posicionamento horizontal ao ecrã, para que possa desactivá-la adicionando overflow-x: hidden;. A propriedade perspective simula a distância da janela para os pseudo-elementos que você irá criar e transformar mais abaixo no CSS.
no próximo passo, você irá adicionar mais CSS para estilizar a sua página web.
Passo 4 — Adicionar estilos para o .nesta etapa, irá adicionar estilos à classe.section.
dentro do seu ficheiro styles.css adicione o seguinte código abaixo da classe wrapper:
.wrapper { height: 100vh; overflow-x: hidden; perspective: 2px;}.section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000;}o.section classe define as propriedades de tamanho, visualização e texto para as secções principais.
Definir a posição de relative para que a criança, .parallax::after pode ser posicionado de forma absoluta relativa para o elemento pai .section.
cada secção tem um view-height(vh) de100 para assumir a altura total da janela. Este valor pode ser alterado e ajustado para qualquer altura que preferir para cada secção.
finalmente ,o restante CSS propriedades são usadas para formatar e adicionar estilo ao texto dentro de cada seção. Ele posiciona o texto no centro de cada seção e adiciona uma cor de .
A seguir, irá adicionar um pseudo-elemento e estilo para criar o efeito paralaxe em duas das secções do seu HTML.
Passo 5 — Adicionar estilos para o .classe parallax
nesta etapa, irá adicionar os estilos à classe.parallax.
primeiro, irá adicionar um pseudo-elemento na classe.parallax a ser estilizado.
Nota: poderá visitar os documentos web MDN para saber mais sobre pseudo-elementos CSS.
Add the following code below the.section class:
....section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000;}.parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateZ(-1px) scale(1.5); background-size: 100%; z-index: -1;}...The.parallax class adds an ::after pseudo-element to the background image and provides the transforms needed for the parallax effect.
O pseudo-elemento é o último filho do elemento com a classe .parallax.
A primeira metade do código mostra e posiciona o elemento psuedo. The transform property moves the pseudo-element back away from the camera on the z-index, then scales it back to fill the viewport.
Uma vez que o pseudo-elemento está mais afastado, parece mover-se mais lentamente.
no próximo passo, irá adicionar as imagens de fundo e o estilo de fundo estático.
Passo 6-adicionando as imagens e o fundo para cada secção
neste passo, irá adicionar o id finalCSS propriedades a adicionar nas imagens de fundo e cor de fundo da secção estática.
Em primeiro lugar, adicione uma cor de fundo sólida ao .static secção com o seguinte código após o .parallax::after classe:
....parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateZ(-1px) scale(1.5); background-size: 100%; z-index: -1;}.static { background: red;}...The.static class adds a background to the static section that does not have an image.
As duas secções com o.parallax também têm uma classe extra que é diferente para cada uma. Use the .bg1 and .bg2 classes para adicionar as imagens de fundo do gatinho.
adicione o seguinte código ao .static classe:
....static { background: red;}.bg1::after { background-image: url('https://placekitten.com/g/900/700');}.bg2::after { background-image: url('https://placekitten.com/g/800/600');}...The .bg1, .bg2 classes adicione as respectivas imagens de fundo para cada secção.
As imagens são do site placekitten. É um serviço para obter fotos de gatinhos para uso como espaços.
Agora que todo o código para o efeito de rolagem de paralaxe é adicionado, você pode ligar-se ao seu styles.css ficheiro no seu index.html.
Step 7 — estilos de ligação.css e índice de abertura.html no seu navegador
neste passo, irá ligar o seu ficheiro styles.css e abrir o projecto no seu navegador para ver o efeito de rolagem parallax.
em primeiro lugar, adicione o seguinte código ao ficheiro<head> tag in theindex.html:
...<head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Parallax</title></head>...Agora, você pode abrir o index.html arquivo no seu navegador:
Com isso, você tem de configurar o funcionamento de uma página web com um efeito de deslocamento. Confira este repositório GitHub para ver o código completo.
Conclusão
neste artigo, você configurar um projeto com um index.html e styles.css arquivo e agora tem uma página web funcional. Você adicionou na estrutura de sua página web e criou estilos para as várias seções no site.
é possível colocar as imagens que você usa ou o efeito paralaxe mais longe para que se movam mais lentamente. Terá de alterar a quantidade de pixels em perspective e o transform propriedades. Se não quiser que uma imagem de fundo se desloque, use background-attachment: fixed; em vez de perspective/translate/scale.