Atualmente, temos uma grande variedade de páginas da web, que podem implementar diferentes padrões de design, que podem variar de um design plano clássico ou o novo design de material inovador.
Mas existe uma forma bastante diferente e peculiar de se fazer sites, sites meramente informativos e que não possuem uma funcionalidade muito complexa como tal. Para esses casos, podemos usar um site de uma única página que implementa o efeito Paralaxe.
Esse efeito nos dá a sensação de que temos vários planos e até várias páginas em um. Vamos ver então como podemos implementá-lo.
Código HTML
Nosso HTML Será composto por uma estrutura bastante simples, composta por div que iremos identificar como containers de acordo com certas classes, além disso incluiremos nossas folhas de estilo da forma usual, assim como nosso JavaScript. Para este exemplo, vamos contar com ambos jQuery como de Underscore.js que é uma biblioteca que nos fornece várias funcionalidades que nos ajudarão neste exercício:
Home ParallaxQueda do céu
Filme 1
O profissional
Filme 2
Cães reservatórios
Filme 3
Código CSS
Para a nossa folha de estilo trabalharemos um pouco mais usaremos as propriedades de CSS3 em relação a transforma para dar o efeito de mover para cima ou para baixo nossos fundos, além disso, usaremos os filhos do nosso documento para atribuir diferentes imagens de fundo que servirão como nossas páginas múltiplas, vamos ver este fragmento de nosso CSS:
.background {tamanho do fundo: capa; repetição de fundo: sem repetição; posição de fundo: centro central; estouro: oculto; vai-mudar: transformar; -webkit-backface-visibility: oculto; visibilidade da face posterior: oculto; altura: 130vh; posição: fixa; largura: 100%; -webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transformar: traduzirY (30vh); -webkit-transição: todos os 1.2s cúbicos-bezier (0,22, 0,44, 0, 1); transição: todos os 1.2s cúbicos-bézier (0,22, 0,44, 0, 1); } .background: antes de {content: ""; posição: absoluta; largura: 100%; altura: 100%; topo: 0; esquerda: 0; direita: 0; inferior: 0; cor de fundo: rgba (0, 0, 0, 0,3); } .background: primeiro filho {background-image: url (skyfall.jpg.webp); -webkit-transform: translateY (-15vh); -ms-transform: translateY (-15vh); transformar: traduzirY (-15vh); } .background: primeiro filho .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformar: traduzirY (15vh); } .background: nth-child (2) {background-image: url (theprofessional.jpg.webp); } .background: nth-child (3) {background-image: url (reservoirdogs.png.webp); } .background: enésimo filho (1) {índice z: 3; } .background: enésimo filho (2) {índice z: 2; } .background: enésimo filho (3) {índice z: 1; }Para finalizar com a nossa folha de estilo aplicaremos algumas alterações ao texto que será incluído em cada container, bem como a transição que cada um deles deve fazer de acordo com o scroll que fazemos no site, indicando se estamos avançando ou para baixo
.content-wrapper {height: 100vh; exibir: -webkit-box; exibir: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: centro; justificar-conteúdo: centro; alinhamento de texto: centro; -webkit-flex-flow: coluna nowrap; -ms-flex-flow: coluna nowrap; flex-flow: coluna nowrap; cor: #fff; família da fonte: Montserrat; transformação de texto: maiúsculas; -webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transformar: traduzirY (40vh); vai-mudar: transformar; -webkit-backface-visibility: oculto; visibilidade da face posterior: oculto; -webkit-transição: todos 1.7s cúbico-bezier (0,22, 0,44, 0, 1); transição: todos os 1.7s cúbicos-bezier (0,22, 0,44, 0, 1); } .content-title {font-size: 12vh; altura da linha: 1,4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); transform: translate3d (0, -15vh, 0); } .background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformar: traduzirY (15vh); } .background.up-scroll + .background {-webkit-transform: translate3d (0, 30vh, 0); transform: translate3d (0, 30vh, 0); } .background.up-scroll + .background .content-wrapper {-webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); transformar: traduzirY (30vh); } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); transform: translate3d (0, -130vh, 0); } .background.down-scroll .content-wrapper {-webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); transformar: traduzirY (40vh); } .background.down-scroll + .background: not (.down-scroll) {-webkit-transform: translate3d (0, -15vh, 0); transform: translate3d (0, -15vh, 0); } .background.down-scroll + .background: not (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transformar: traduzirY (15vh); }
Código JavaScript
Finalmente em nosso JavaScript vamos lidar com o que são ouvinte dos nossos eventos, ou seja, saber quando o usuário usa a rolagem do mouse para rolar pela página da web. Além disso, detectaremos o navegador utilizado e estabeleceremos alguns valores constantes como a duração que um controle deslizante deve ter antes de poder ser alterado novamente, a sensibilidade do scroll e o número de páginas que teremos.
var time = false; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); sensibilidade var Scroll = 30; var durationSliders = 600; var sliderActual = 0; var sliderTotales = $ (". background"). length; função paralaxeffect (evt) {if (esFirefox) {delta = evt.detail * (-120); } else if (esInternetE) {delta = -evt.deltaY; } else {delta = evt.wheelDelta; } if (time! = true) {if (delta = ScrollSensitivity) {time = true; if (currentSlider! == 0) {currentSlider--; } previousItem (); durationSliderTime (durationSliders); }}}Por fim, vamos estabelecer o tempo que a imagem deve ser fixada para ir para a próxima, assim como os ouvintes de nossos eventos, adicionalmente usaremos a função de adicionar ou remover classe para saber quando uma das imagens está na parte inferior ou superior:
função timeSliderDuration (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = é Firefox? "DOMMouseScroll": "roda"; window.addEventListener (ScrollMouse event, _.throttle (Parallax effect, 60), false); function eleNext () {var $ slidePrevious = $ (". background"). eq (currentSlider - 1); $ slideAnterior.removeClass ("up-scroll"). addClass ("down-scroll"); } function previousItem () {var $ slideSig = $ (". background"). eq (currentSlider); $ slideSig.removeClass ("rolar para baixo"). addClass ("rolar para cima"); }Com nosso código finalizado, só temos que testar o funcionamento de nossa aplicação, para isso basta usar a rolagem de nosso mouse para ver o comportamento, vejamos:
Este efeito dá uma sensação bastante nova aos nossos sites, porém é aconselhável utilizá-lo em certas aplicações como portfólios ou páginas de informação, pois qualquer outro site que trate outros tipos de processos ou informações deixará o usuário cansado e perderá o interesse por ele. .
