Antecedentes e Introdução
Se você estiver navegando em qualquer site moderno em computadores ou telefones celulares, pode ter percebido que, ao rolar para baixo / para cima no site, parece que a tela inteira está se movendo na direção da rolagem. Se este for o efeito de fundo, as informações em primeiro plano também mudam conforme você rola. Esse efeito pode ser descrito resumidamente como Rolagem paralaxe.
Rolando
Vamos entender o que significa rolagem. Quando você está visualizando uma página da web, a ação para navegar na página da web em qualquer direção (para cima, para baixo, para a esquerda e para a direita) é conhecida como Rolagem.
Normalmente, se você for um usuário de computador desktop, essa ação é feita usando a roda de rolagem do mouse.
História
Vejamos a palavra - Scroll. Antigamente, para enviar uma mensagem a outras pessoas que estão localizadas a uma grande distância, eram usados pergaminhos manuscritos. Esses pergaminhos se parecem com os mostrados abaixo -
Imagine a ação da pessoa que está segurando o pergaminho. Para ler o conteúdo na íntegra, a pessoa teria que “rolar” e rolar mais. O uso desses pergaminhos era também para manter um texto de registro ou decisões. Com o passar do tempo, o uso de pergaminhos foi aumentando à medida que eram preparados a partir de diferentes materiais de escrita como - papiro, pergaminho e papel.
Com a evolução dos computadores, o processamento e armazenamento de documentos, tabelas e imagens muito grandes tornou-se possível. Às vezes, os dados eram tantos que o tamanho da tela simplesmente não era suficiente para apresentar os dados ao usuário. Quando os dados a serem exibidos eram maiores do que o tamanho da janela ou área de exibição, os dados permaneceriam ocultos. Isso exigiu uma abordagem de expansão da área da tela.
Algumas opções para alcançar a expansão da tela estão listadas abaixo -
- Para aumentar o tamanho da tela
- Para reduzir o tamanho dos dados
- Para usar a rolagem
Esse mecanismo de rolagem é mais importante para pessoas que trabalham com design gráfico e edição de fotos.
Origem da rolagem paralaxe
Vejamos a história da rolagem paralaxe. Primeiro, vamos entender o que significa a palavra paralaxe. A palavra paralaxe vem da palavra gregaπαράλλαξις (paralaxe), o que significa alternância.
Se estivermos vendo um objeto de um ângulo, o objeto aparecerá de uma maneira específica. Mas se você estiver movendo o mesmo objeto de posições diferentes, haverá um movimento aparente de objetos. Esse fenômeno é conhecido como paralaxe.
Agora que entendemos a origem e os antecedentes do Parallax, vamos entender a história e o conceito de rolagem Parallax em web design.
Definição
De acordo com a Wikipedia - Parallax scrolling é uma técnica em computação gráfica em que as imagens de fundo passam pela câmera mais lentamente do que as imagens de primeiro plano, criando uma ilusão de profundidade em uma cena 2D e aumentando a sensação de imersão na experiência virtual.
A rolagem paralaxe foi empregada nos primeiros dias da animação. Muitos dos estúdios de animação (como a Disney) usaram câmeras multiplano para obter o efeito de paralaxe.
Conforme as tecnologias de computação gráfica evoluíram junto com as estruturas de ponta como JavaScript, os web designers e desenvolvedores podem agora construir sites com uma experiência rica. Embora a rolagem paralaxe tenha começado com algumas camadas, ela foi levada para o próximo nível com as barras de rolagem nos computadores. A técnica permaneceu a mesma, mas devido à sua aplicação para Scrolling, uma experiência única foi criada.
Exemplos
A rolagem paralaxe é amplamente usada em sites modernos. Como a rolagem paralaxe pode ser implementada para celulares e sites de desktop de uma só vez, a popularidade de tais sites disparou nos últimos anos.
Alguns exemplos de sites que empregam rolagem paralaxe são fornecidos abaixo -
Bear Grylls
Conforme a animação prossegue, você poderá ver como o conteúdo do site se torna interativo. Conforme você avança, mais e mais informações serão reveladas.
Faça o seu dinheiro importar
Para apresentar ao leitor os benefícios de uma cooperativa de crédito, este site o conduz através de uma história. Conforme você avança, as informações são reveladas de uma maneira única.
Infográfico da InfoQuest
A jornada de um funcionário para encontrar informações críticas em seu local de trabalho é retratada usando a experiência de rolagem.
GitHub 404
Isso é um pouco diferente da experiência usual de paralaxe, o objeto na parte superior da tela se move quando você passa o ponteiro do mouse sobre ele.
Aplicações do Parallax Scrolling
Até agora, deve estar claro a partir da definição e do plano de fundo que a rolagem paralaxe é útil em uma ampla variedade de mídia digital. Alguns dos aplicativos de rolagem paralaxe estão abaixo -
Design de jogo
A rolagem paralaxe é amplamente usada no design de jogos. O personagem precisa se mover em relação ao fundo e com o controle do jogador usando o mouse e o teclado, toda a experiência precisa mudar. O design do jogo é uma forma muito primitiva, porém moderna, de usar a rolagem paralaxe.
Sites
Para deixar o usuário agarrado ao site, alguma experiência dinâmica e diferenciada é importante. Como você deve ter notado nos exemplos de sites discutidos acima, a rolagem paralaxe aumenta o conteúdo por causa de sua representação de maneira interativa.
Este capítulo fala sobre conceitos de web design e vantagens do uso de paralaxe scroll em web design.
Fundo de Web Design
Desde o início da 20 ª século, a mídia de papel tem em uma concorrência predatória devido aos meios digitais. A mídia digital inclui o que vemos na internet e, portanto, as revistas afins que surgem.
Os boletins informativos que você recebe como parte das assinaturas semanais / mensais também estão incluídos na mídia digital. Principalmente, a mídia digital depende muito de dispositivos móveis e de desktop. Faz diferença quando você pode ver o conteúdo no seu celular (dispositivo portátil), bem como em dispositivos de desktop. A forma como o conteúdo é exibido em qualquer um dos dispositivos, um estilo específico de design do conteúdo está em jogo.
Este estilo de design é conhecido como Web Designing. Do ponto de vista de design ou codificação, quando um designer de página da web se propõe a construir uma página da web, ele / ela leva os dispositivos móveis em consideração também.
De acordo com a Wikipedia, Web design engloba muitas habilidades e disciplinas diferentes na produção e manutenção de websites. Uma dessas habilidades é projetar uma experiência impactante para os usuários. O design da Web atende a essa experiência e fornece uma maneira organizada de organizar o conteúdo da página e fornece estilos diferentes para eles.
O design da Web inclui - design de interface, design gráfico e o uso de certos padrões para escrever o código. Este trabalho pode ser realizado por uma única pessoa ou por uma equipe de pessoas.
Existem muitas ferramentas disponíveis no mercado para facilitar esse trabalho, porém, fica por conta da própria habilidade criativa criar a aparência de página web.
Web Design Moderno
Com a evolução da tecnologia, há uma explosão de conhecimento. A Internet tornou-se uma coisa e disparou a qualidade de nossas vidas. A qualquer momento, mais e mais informações estão sendo processadas por um usuário médio da Internet. Essas informações podem estar na forma de um site em um computador desktop ou em um dispositivo portátil; tablet ou celular.
Embora tantas informações tentem atrair a atenção do usuário, é óbvio que, como uma pessoa que projeta uma experiência na web, there are only 3 seconds allocated to pass the message across.
Como lidar com isso? É mais do que importante passar a mensagem, porque está na fonte de qualquer web design. Você quer construir um site que comunique, ao mesmo tempo que deve atrair e fazer o usuário se apegar ao conteúdo. É uma tarefa realmente difícil.
Considerando o vasto escopo de trabalho para qualquer conteúdo da web, mais e mais pessoas estão entrando no mundo do Web Design. Um web designer criativo é o assunto da cidade, graças ao seu incrível talento de criar uma boa experiência de usuário. O web designer pode atualmente conseguir um emprego em uma empresa de marketing / publicidade ou começar por conta própria para mergulhar no design da web.
Aesthetic appeal is the key for a given content on web. Isso significa que um web designer deve estar ciente dos princípios e fundamentos do design, cor, espaçamento, etc. Cada vez mais usuários podem ver conteúdo da web de ótima qualidade todos os dias. É óbvio que se irá comparar a página ou site atual com aquele que foi visitado há algumas horas ou minutos atrás. A ordem do conteúdo, juntamente com bons gráficos e cores, tornou muitos banners / páginas autônomos uma coisa popular na Internet.
Exemplo
Tomemos o caso de um gráfico simples. Existem muitos gráficos na internet, chamados memes. São simplesGraphics Interchange Format (GIF)imagens com algum texto embutido nos gráficos. Esses memes estão circulando na Internet com base em um evento recente em alguma parte do mundo. Se olharmos para este exemplo, o único apelo que eles têm é gráfico e algum texto relevante ou irrelevante.
Mesmo assim, ele ganhou tanta popularidade que nos faz pensar nas possibilidades incríveis da Internet.
Assim, para que um web design seja eficaz, tanto a criatividade quanto o método para comunicar a mensagem desempenham papéis importantes.
It is important point to note that a successful web page is combination of Web Design and Web Development. De acordo com a tendência atual do mercado, junto com o web designer, um desenvolvedor web é um item obrigatório na equipe. Um web designer sempre buscará inspiração e usará sua criatividade para criar gráficos e esquemas de cores relevantes. Já o desenvolvedor da Web usará suas habilidades de codificação para disponibilizar os gráficos e os esquemas de cores no site.
Um web designer também deve ter conhecimento de como escrever o código, para tornar o gráfico ou esquema de cores pretendido utilizável por um desenvolvedor web. Um código simples em um aplicativo simples como o Notepad pode ajudar um web designer a assumir o controle do desenvolvimento web.
Usando Parallax Scrolling
Parallax Scrolling está dentro dos limites de trabalho tanto do web designer quanto do desenvolvedor web. Um web designer pode criar o efeito de Parallax Scrolling usando ferramentas como InVision, UXPin para transmitir ao desenvolvedor web o comportamento pretendido na rolagem. Além disso, um desenvolvedor da web usará suas habilidades para criar o efeito de rolagem de paralaxe. Isso pode ser feito por diferentes técnicas de JavaScript, CSS e jQuery. Uma descrição detalhada de cada um desses métodos é fornecida nos próximos capítulos.
De acordo com a definição especificada na seção anterior, parallax scrolling is a technique when the background content is moved at a different speed than the foreground content when scrolling.
Uma técnica CSS simples para criar o efeito de rolagem de paralaxe é mostrada neste site - The Urban Walks .
Como você pode ver na captura de tela acima, o telefone celular no centro da tela mudará o conteúdo depois que você rolar duas vezes. Além disso, observe no primeiro scroll, o fundo com o celular vai mudar.
Essa transição está dando a você a sensação de que o telefone é constante em seu lugar e que o fundo muda conforme você rola para baixo. Esse efeito é chamado de efeito de rolagem de paralaxe. Você sabe que está rolando para baixo, pois há um indicador das telas à direita da tela na forma de alguns pontos.
O primeiro uso da rolagem paralaxe foi nos jogos de computador antigos. Onde uma imagem de fundo fixa se moveria em uma velocidade mais lenta, pois o personagem se movia mais rápido do que o fundo. Alguns exemplos desses jogos - Disney's Aladdin e Disney's Lion King. Esses jogos foram lançados em 1993 e 1994, respectivamente.
Embora seja verdade que tudo começou com os jogos, mas atualmente, muitos web designers estão enfatizando o efeito de fazer seu público amar seu site. As vantagens da rolagem paralaxe são estendidas de sites para sites móveis.
Esses sites, uma vez projetados com rolagem paralaxe para as versões de desktop, são adicionados com um código que também oferece suporte a telas móveis.
Vantagens do Parallax Scrolling na Web e em dispositivos móveis
Nesta seção, discutiremos as vantagens de usar a rolagem de paralaxe de várias perspectivas, conforme discutido abaixo -
Da perspectiva do público
Existe um elemento divertido associado à rolagem paralaxe. Como você viu no exemplo acima, transmitir as informações de mil palavras se tornou mais fácil à medida que o usuário rola a tela em diferentes telas.
Se considerarmos um usuário iniciante, há uma curiosidade associada a cada pergaminho. Assim, não só enriquece a experiência do site, mas também aumenta a probabilidade de o usuário passar mais tempo na primeira visita ao próprio site.
A proporção de envolvimento do usuário aumenta drasticamente à medida que o usuário fica intrigado na rolagem.
O usuário não precisa se preocupar com o processo de descobrir as informações, pois elas estão disponíveis de uma maneira mais óbvia.
Em alguns casos, você pode colocar uma história sobre o produto / serviço que está oferecendo, animando outros itens na tela, como o logotipo ou o ícone do menu.
Da perspectiva técnica
Depois de implementar a rolagem paralaxe para uma versão para desktop, muito facilmente a mesma estrutura pode ser usada para o site ou telas móveis.
Como o snippet de código é simples e reutilizável, se você for uma agência de marketing ou uma empresa provedora de serviços de site da Web, isso torna-se fácil ao conseguir novos clientes.
O conhecimento da rolagem paralaxe vem com mais experiência em estruturas de front-end, como CSS, JavaScript, etc.
Para um desenvolvedor da web, quando se trata de criar um efeito de rolagem de paralaxe, várias técnicas estão disponíveis. Uma dessas técnicas é usarCascaded Styling Sheets(CSS).
CSS explica como os elementos HTML são exibidos na tela. Pode-se criar um arquivo CSS e ele pode ser usado para o site completo. É mais simples adicionar arquivos CSS do que adicionar estilos a cada elemento HTML e gerenciá-los em diferentes partes da página da web.
Note- Alguns dos métodos discutidos abaixo neste capítulo são específicos para computadores desktop e não para dispositivos móveis. Será mencionado nas etapas quando uma técnica específica não for adequada para dispositivos móveis.
Considerando o descarregamento de CSS em todo o desenho extra no modelo de objeto de documento (DOM), há uma maior utilização da aceleração de hardware e um efeito suave sem sobrecarregar a CPU.
Método da posição absoluta
Esse método é frequentemente usado para criar um efeito de paralaxe, pois é relativamente leve em comparação com outras opções disponíveis. A posição da imagem de fundo é mantida fixa em relação a outro conteúdo na tela. No exemplo discutido abaixo, você verá como fazer isso usando a magia do CSS.
Nesta seção, examinaremos dois métodos para o Método da Posição Absoluta -
- Fundo Único
- Fundo Múltiplo
Método de fundo único
Neste método, iremos criar dois arquivos na mesma pasta. Observe as etapas fornecidas abaixo para o mesmo propósito -
Step 1
Temos que criar dois arquivos na mesma pasta: o primeiro arquivo com marcação HTML e o segundo com código CSS.
Step 2
Agora, vamos definir nossa marcação HTML. Observe o código fornecido abaixo -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>Step 3
Abra o bloco de notas. Copie e cole o snippet de código acima.
Quando você estiver salvando o arquivo, em Save as type, selecione All Files. Insira um nome para o seu arquivo conforme necessário, mas ele precisa ser seguido por uma extensão -.html como mostrado na imagem abaixo.
Step 4
Assim que o arquivo for salvo, crie outro arquivo no bloco de notas e cole o código fornecido abaixo -
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}Como você viu na última etapa, ao salvar o arquivo, em Save as digite, selecione All Files. Insira um nome para o seu arquivo conforme necessário e adicione uma extensão.css para isso.
Análise de Código
Vamos entender qual parte do código é responsável pelo efeito de paralaxe. O trabalho mais importante para paralaxe é feito usando regras de perspectiva e transformação. Referir-seline 15no trecho de código acima. A perspectiva é criada para o nossoBgContainerprimeiro. Isso inicia uma plataforma para regra de transformação.
No Parallax contêiner começando na linha 40, transform regra na linha 48 empurra o div BgContainer para o fundo usando traduzir (-1px).
Você pode modificar os valores dos parâmetros de conversão e escala para modificar a profundidade da paralaxe.
Ao abrir o arquivo html, o efeito de paralaxe ficará visível conforme mostrado abaixo -
Note - Para o restante do tutorial, será assumido que o leitor é capaz de criar os arquivos HTML e CSS de acordo com a estrutura de pastas fornecida no método acima.
Método de fundo múltiplo
Neste método, teremos imagens diferentes aparecendo conforme o usuário rola a página para baixo. Existe uma imagem com lápis, que é usada em diferentes combinações de cores para ilustrar esse efeito.
Observe o seguinte código para a página HTML conforme mostrado abaixo -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>Semelhante ao exemplo anterior, usaremos styles.cssarmazenado no mesmo local que este arquivo HTML. Temos três div diferentes nomeados como Primeiro, Segundo, Terceiro e Quarto.
O código CSS para a rolagem paralaxe é fornecido abaixo -
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}Aqui, criamos o efeito de paralaxe da linha 7, propriedade importante aqui é background-attachment:fixed.
Usando esta propriedade, a primeira imagem com lápis de cor ficará sempre no topo. Conforme você rola para baixo, imagens diferentes, conforme descrito na linha 28, começarão a aparecer.
Como resultado, você poderá ver o efeito de paralaxe conforme mostrado no GIF abaixo. A imagem a seguir é a captura de tela do exemplo que consideramos para vários planos de fundo.
Pure CSS Parallax
Vamos combinar o conhecimento dos dois métodos anteriores e criar um efeito avançado de Pure CSS Parallax.
A diferença será a maneira como organizamos o image elemento e o z-transformpropriedade. A explicação da propriedade será fornecida após o código CSS.
Crie o arquivo HTML com o código a seguir usando o método usual do Bloco de Notas.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>Para o arquivo CSS, o código é fornecido a seguir -
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}Análise de Código
Fixamos a posição da primeira camada em line 26 usando position:absolutepropriedade. As posições também são codificadas para 0.
Dentro parallax_two, que é a camada com título, aplicamos z-index: 10para fornecer um efeito flutuante ao cabeçalho. A camadaparallax_three é movido para a parte inferior, fornecendo uma propriedade de margem superior.
Assim, podemos aumentar o nível de complexidade em nosso efeito Parallax.
Observe o efeito conforme mostrado na figura abaixo.
Para criar o efeito Parallax, o método mais popular é usar JavaScript. Deste capítulo em diante, discutiremos os conceitos de JavaScript e algumas das bibliotecas usadas para obter a rolagem Parallax.
Utilizar JavaScript puro faz sentido para manter o desempenho do site ideal. Existem muitas outras vantagens de usar bibliotecas de um aspecto de desempenho. No entanto, para entender melhor a organização do código, começaremos com a implementação de paralaxe de JavaScript pura. Curiosidade, às vezes JavaScript puro também é chamadovanilla JavaScript.
Parallax Scrolling usando Pure JavaScript
Primeiro, crie o arquivo HTML principal com o código mostrado abaixo. A página HTML consistirá apenas em quatro textos de título.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>Observe que na linha número 4, para este exemplo, estamos usando myscripts.js arquivo que será armazenado na mesma pasta que o arquivo HTML e o arquivo CSS.
Agora, vamos preparar nosso arquivo CSS conforme mostrado abaixo.
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}Agora vem a parte do JavaScript, crie um arquivo no bloco de notas e salve-o como myscripts.js .
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});Análise de Código
Vamos analisar o código JavaScript.
Código de line number 1 to 4 representa a função auxiliar.
Na linha 6, selecionamos nosso elemento de paralaxe e adicionamos scrollevento para a janela. Para determinar quanta área é rolada, estamos usandoscrolledHeightpropriedade. Conforme a tela rola para baixo,backgroundPositionY é atualizado para o elemento paralaxe.
Para diminuir o efeito de paralaxe, nós dividimos por 1,5, este número pode ser alterado para qualquer número que você quiser.
Agora, você poderá ver a página rolando para baixo, conforme mostrado na imagem abaixo.
Usando a biblioteca JavaScript ScrollMagic
Conforme discutido na seção anterior, embora possamos usar JavaScript puro para criar o efeito de paralaxe, existem algumas bibliotecas JavaScript poderosas que irão aprimorar a experiência do usuário. ScrollMagic é uma dessas bibliotecas para criar interações de rolagem paralaxe.
Vamos discutir mais sobre isso com a ajuda de um exemplo dado abaixo -
Note- Neste exemplo, para simplificar, teremos o CSS armazenado em arquivo HTML. Além disso, o código JavaScript estará presente no mesmo documento. Resumindo, criaremos apenas um arquivo HTML e ele terá bibliotecas ScrollMagic referenciadas junto com o CSS necessário.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>Conforme mostrado no código acima, exigimos referências de bibliotecas JavaScript de line 3 to 6. O código CSS é especificado da linha 9 a 19.
Rede de distribuição de conteúdo
As referências de script da linha 3 a 6 apontam para URLs ScrollMagic Content Delivery Network (CDN). Usar um CDN faz sentido no desenvolvimento de sites modernos, já que você carrega as bibliotecas necessárias sem diminuir a velocidade do seu site.
Se houver personalizações necessárias nas bibliotecas, será necessário hospedar as bibliotecas em seus respectivos servidores para utilizar esses efeitos. Se você estiver usando funcionalidades básicas de uma biblioteca, é eficiente usar o URL do CDN.
O código HTML acima mostra uma imagem separada por 2 divisões. A primeira divisão aparece com um título -These are bricks e a segunda divisão aparece com - Some More Bricks.
Observe que no código CSS da linha 9 a 19, estamos apenas especificando a posição e o estilo do respectivo div de paralaxe.
O trabalho de criar esta paralaxe suave sceneé feito pela biblioteca ScrollMagic. Se você se referir ao código de script da linha 43 a 62, ScrollMagiccontroller é invocado e um scene é criado.
As cenas guiam o DOM para criar o efeito de paralaxe quando 80% da tela está ocupada. JavaScript é usado para entender o gatilho de rolagem. Como resultado, o que você obtém é uma experiência flutuante nesta página.
Note - Considerando a imagem acima como uma imagem GIF, você não conseguirá observar o efeito suave das divisões do texto.
Animações de gatilho
As possibilidades de criar uma experiência de usuário variada são infinitas com a Biblioteca ScrollMagic. Observe os trechos de código fornecidos abaixo para acionar animações na rolagem.
Observe que para isso você precisa de dois arquivos * menos; um arquivo HTML e um arquivo CSS.
Crie um arquivo HTML com o código mostrado abaixo -
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>Agora, crie um arquivo CSS com o código a seguir.
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}Análise de Código
Referindo-se ao código HTML, o código ScrollMagic começa em line 17 e continua até line 25. Nesta seção, estamos criando duas cenas ScrollMagic. A primeira cena é para a imagem do tijolo e a outra é para a animação do banner.
Conforme especificado em setTween função em line 20, quando a ação de rolagem acontece em 40% do tamanho da tela, a próxima cena começa mostrando o banner É isso!
A opacidade do div com id - square é controlado no arquivo CSS em line 10 e line 15.
Como resultado, você verá a animação abaixo na página.
Rolagem Horizontal
Também podemos aplicar a rolagem paralaxe e obter uma rolagem horizontal. A biblioteca ScrollMagic pode ser usada para criar um efeito horizontal de rolagem. Veja o código abaixo.
Embora o código seja direto para criar o efeito de rolagem horizontal, precisaremos da referência jquery para obter o movimento horizontal das telas. Os detalhes do jQuery são fornecidos no próximo capítulo, por enquanto, basta seguir o código fornecido a seguir.
Vamos criar três arquivos separados - arquivo HTML para o código principal, arquivo CSS para estilos e arquivo JS para chamadas de função ScrollMagic.
Aqui está o código para o documento HTML.
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>Observe que temos três seções, que aparecerão após a rolagem. As três seções são denotadas por ids title1, title2 e title3 nas linhas 15,19 e 23 respectivamente.
O código para o documento CSS é fornecido abaixo -
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}Análise de Código
As cores de fundo para as três telas (ou seções) são fornecidas em lines 10, 22 e 25.
Estamos calculando a largura relativa de cada tela no código começando em line 13.
O código JavaScript para o ScrollMagic é fornecido abaixo -
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});Observe o triggerHookpropriedade na linha 8. Esta propriedade é responsável por fornecer o efeito de rolagem quando o usuário atinge a conclusão do evento de rolagem. A funçãoTimelineMax é responsável por fornecer o efeito de rolagem horizontal às nossas telas.
Depois de criar os respectivos arquivos, você poderá ver a animação de rolagem horizontal conforme mostrado abaixo.
Nos capítulos anteriores, entendemos como os bons efeitos do uso de bibliotecas JavaScript agregam ao site. JavaScript, quando combinado com Photoshop, fornece flexibilidade fenomenal e facilidade para adicionar rolagem paralaxe ao seu site.
Neste capítulo, veremos três plug-ins do Photoshop para adicionar o efeito de rolagem paralaxe. Assim como mencionamos no capítulo anterior para JavaScript, usaremos referências do Photoshop em nosso código HTML para criar uma poderosa rolagem de paralaxe no Photoshop.
Um ponto importante a ser observado sobre os plug-ins do Photoshop é que muitas vezes os plug-ins não são atualizados, portanto, você pode querer fazer alguma pesquisa antes de começar a usar qualquer plug-in para rolagem paralaxe.
Parallax Scrolling usando Parallax.js simples
Parallax.js usando o plugin do Photoshop, podemos criar o efeito de rolagem paralaxe sem muitos aborrecimentos. Considerar o plugin jQuery requer a inclusão de bibliotecas de ponta, como bootstrap. Observe que neste capítulo haverá tags HTML5 no código.
Vejamos o arquivo HTML mostrado abaixo -
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>Código de Análise
Os trechos de código acima mostram o código de uma página com duas imagens e um texto de amostra entre elas.
Como você pode ver, o código começa com <!DOCTYPE html>Essa é a maneira típica de informar aos navegadores que o código é baseado em HTML5.
a <meta> tags de line 4 to 6mostra o código que é máquina de interpretação. Você não será capaz de ver o impacto deste código. Uma coisa importante a notar aqui é - commeta tag, os desenvolvedores da web obtêm um controle aprimorado sobre os dados exibidos.
Também em line 8 and 9, Incluímos as folhas de estilo CSS junto com o Bootstrap. Para uma fonte e tipografia específicas, Bootstrap é a biblioteca amplamente usada.
Lines 10 and 11cuidar das bibliotecas do Photoshop e Parallax.js. É importante incluir controle sobre Parallax.js para ter o efeito de imagens paralaxe. Você será capaz de encontrardata-parallax propriedade com div em line 21, O que é suficiente para chamar a biblioteca parallax.js para o efeito de paralaxe necessário.
O efeito de paralaxe pode ser visto no código em lines 21 e line 40. Propriedades importantes que fazem esse efeito acontecer com parallax.js são -data-parallax, data-image-src, data-natural-width, data-natural-height.
Com o arquivo CSS, temos que fornecer apenas uma propriedade. É como mostrado abaixo -
.parallax-container {
height: 500px;
width: 100%;
}No código HTML acima, criamos uma estrutura específica para arquivos CSS. Teremos uma pasta chamadacss, que terá arquivos CSS - bootstrap.min.css e style.css.
Depois que tudo estiver concluído com os documentos, você poderá ver o efeito de paralaxe conforme mostrado abaixo -
Parallaxator usando Photoshop Plugin
O melhor plugin do Parallaxator para Photoshop oferece efeitos de rolagem paralaxe e é fácil de usar. Você pode baixar o plugin Parallaxator, seus arquivos CSS e JS neste link - Parallaxator GitHub .
Depois que os arquivos CSS e JS forem baixados, você pode usar o código mostrado a seguir para criar o código HTML.
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>Código de Análise
O efeito de paralaxe é fornecido pela classe parallax_child, que é fornecida com cada tag img. O parallax_child está conectado aos arquivos CSS e JS fornecidos abaixo.
Para que o plugin do paralaxador funcione, incluímos fm.parallaxator.jquery.css e fm.parallaxator.jquery.js. Esses arquivos devem estar disponíveis no mesmo diretório que o arquivo HTML.
O código para CSS é mostrado abaixo -
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}Como resultado do código acima, você poderá ver o efeito de paralaxe.
Plug-in Stellar.js jQuery para Parallax Scrolling
Stellar.js é outra adição à lista de plug-ins paralaxe do Photoshop. Embora não seja mais mantido, os desenvolvedores que usaram sua versão estável podem usar o efeito de rolagem em paralaxe com facilidade. É compatível com as últimas versões do Photoshop e fácil de implementar.
Você precisará baixar o jquery.stellar.js mais recente do site oficial do plug- in Stellar.js . Uma vez baixado, crie este arquivo de plugin na mesma pasta que seus arquivos HTML e CSS.
Vamos dar uma olhada no código HTML.
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>Código de Análise
Para que Stellar.js funcione, incluímos a biblioteca logo após o plugin do Photoshop ser referenciado em jquery.stellar.js line 6.
Funções para paralaxe estelar são chamadas na tag do script de line 8 to line 15. Com a propriedadedata-stellar-background-ratio, Estamos definindo um deslocamento para as imagens exibidas. Isso é feito emlines 19,20,21 and 22.
O código CSS é fornecido abaixo -
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}Uma vez que ambos os arquivos são criados e stellar.js, o arquivo do plugin é incluído na mesma pasta, você deve ser capaz de ver o efeito conforme mostrado na imagem abaixo -
Bootstrap é uma estrutura popular com muitos componentes prontos para uso à sua escolha. O bootstrap pode otimizar o código para implementar a rolagem de paralaxe.
Neste capítulo, com um exemplo, vamos discutir como vamos usar o componente Jumbotron para implementar a rolagem paralaxe.
Página inteira com Parallax Bootstrap4 Jumbotron
Imagine um site onde o usuário é mostrado com uma grande caixa de "call to action" com algum conteúdo sobre um desconto ou venda. Normalmente, o Jumbotron encontra sua aplicação em tais lugares. É uma grande caixa útil para atrair a atenção do usuário.
Como estamos usando apenas um componente do Bootstrap, não criaremos um arquivo CSS separado para este exemplo. Vamos mergulhar direto no código HTML.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>Código de Análise
a line 64 referências à biblioteca Bootstrap. Estamos especificando a margem e o raio da borda do Jumbotron deline 8 to 11.
Como podemos ver em line 33, Estamos criando uma div com a classe Jumbotron para mostrar a caixa grande onde teremos nossa imagem específica carregada. Observe que não há URL direto para a imagem neste momento, usaremos a imagem baixada. Você pode baixar qualquer imagem de alta resolução para o seu exemplo e especificá-la emline 16.
A saída que você pode ver ao executar o código fornecido acima é mostrada abaixo -
Neste tutorial, estudamos diferentes bibliotecas para a criação de rolagem paralaxe. Cobrimos todos os aspectos do nível básico ao avançado, onde usamos CSS Bootstrap usado para o desenvolvimento de front end. Sugerimos que você aplique suas habilidades criativas para criar uma página da web que seja difícil de ignorar. Lembre-se de que, para a rolagem em paralaxe, existem exemplos enormes on-line para fornecer uma inspiração.
Utilização de Parallax Scrolling
Como já discutimos nos capítulos introdutórios, você pode usar a rolagem em paralaxe para obter uma experiência de usuário extraordinária. Aqui estão algumas ideias para o site, onde você pode incluir rolagem paralaxe.
Linha do tempo do site
Esses tipos de site geralmente têm uma história para contar sobre um produto ou empresa ou qualquer outra coisa. Você pode criar um efeito de paralaxe para transmitir a história ao visitante e mantê-lo envolvido com diferentes animações.
Para um site de linha do tempo, valerá a pena criar um fundo e mostrar o conteúdo do texto em primeiro plano. Você pode se associar a um designer gráfico para criar gráficos que vão de mãos dadas com o plano de fundo.
Site do aplicativo móvel
Hoje em dia, o aplicativo móvel é obrigatório para qualquer oferta de produto / serviço. Existem muitas startups procurando criar um site de aplicativo móvel que forneça uma explicação do que o aplicativo móvel pode e não pode fazer.
A App Store da Apple, conhecida por suas rígidas diretrizes de criação de aplicativos, exige que o aplicativo móvel tenha um site de suporte. Este site sempre deverá ser atraente e amigável.
Usando a rolagem Parallax, você pode usar uma imagem móvel e mostrar diferentes tipos de funcionalidades conforme o usuário rola a página para baixo. Um exemplo já foi discutido no Capítulo 4 deste tutorial.
Efeitos sobre o mouse
Você pode usar o poder da rolagem paralaxe e passar o mouse para criar o próximo nível de animação. Com o mouse, você pode controlar a direção da rolagem e criar um efeito de paralaxe.
Desta forma, existem muitas possibilidades quando se trata de criar uma grande experiência. Tudo que você precisa é uma ideia e um conjunto certo de ferramentas e bibliotecas.
Futuro da IU da Web
Com o poder da tecnologia e elementos criativos como rolagem paralaxe, há uma competição nunca antes para criar experiências de usuário incríveis. Isso não se limita apenas a sites, mas também se estendeu a sites móveis.
Embora a IU da Web esteja atualmente em seu pico, é preciso tempo para ter uma página da Web compatível com um dispositivo móvel. Como vimos nos exemplos de Bootstrap e jQuery, o site não pode viver uma vida longa se não for compatível com dispositivos portáteis.
Junto com as bibliotecas existentes, o futuro da experiência do usuário espera ansiosamente por Inteligência Artificial e realidade virtual. Existem algumas páginas da web que podem ser visualizadas usando um equipamento de RV. Em tal situação, manter contato com os plug-ins mais recentes e também procurar criar um novo realmente faz sentido.
Você aplica o conhecimento adquirido neste tutorial para criar a melhor experiência do usuário, desejo-lhe muita sorte e sucesso em sua jornada de desenvolvimento web!