4

Existe alguma forma que eu possa controlar ou criar uma diferença/delay entre a velocidade de scroll do mouse e a velocidade que uma imagem em background usando background-attachment: fixed apareça?

CSS:

#parallax {
    background: url('../image/parallax.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    height: 500px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

HTML:

<section id="parallax">
    <h2>Nosso tabuleiro é o campo</h2>
</section>

Edit: Para servir como exemplo, preciso que seja parecido com isso http://pixelcog.github.io/parallax.js/ (mas necessariamente usando background-attachment, se possível)

7
  • 1
    Talvez seja possível sim! Por favor coloque o que vc já tem de HTML e CSS para que a gente possa pelo menos simular o que vc já tem ai. Só com esse pedaço de CSS não da para fazer muita coisa
    – hugocsl
    11/02/2019 às 11:31
  • @hugocsl adicionado
    – Luan
    11/02/2019 às 11:38
  • da uma olhada aqui css-tricks.com/snippets/jquery/smooth-scrolling acho que vai te ajudar!
    – Lodi
    11/02/2019 às 11:44
  • @Lodi não é essa a questão. Eu preciso que a imagem de fundo "passe" mais devagar que o scroll do mouse. Não tem nada a ver com smooth scrolling.
    – Luan
    11/02/2019 às 11:55
  • Cara tem que ser com a imagem como Background-image ou pode ser com a tag <img> mesmo? Usando uma imagem no HTML é possível, com uma imagem no background acho que não da...
    – hugocsl
    11/02/2019 às 12:45

2 Respostas 2

2

A única forma de controlar o scroll independente do comportamento padrão é usando a propriedade de perspective, e mesmo assim essa propriedade não funciona se aplicada direto no corpo do HTML, ela deve ser aplicada no body, sendo assim vc tem que avaliar se vai conseguir aplicar essa técnica no seu projeto.

A grosso modo o que vamos fazer aqui é colocar no body perspective:1px e na div que vai ter o efeito de parallax vamos colocar transform:translateZ(-1px); Isso vai fazer com que a div com fique 100% "mais recuada" no eixo Z

inserir a descrição da imagem aqui

Mas como ela foi 100% "para traz" ela vai ficar menor, e vamos precisar colocar um scale(2) para trazer a imagem de volta para o tamanho real. Imagine que vc tem um quadro de 1m x 1m que está a 100m de vc e outro quadro de 1m x 1m que está a 200m de vc, o quadro que está a 200m vai parecer menor que o primeiro quadro que está mais próximo de vc.

Tendo isso em mente, tudo que estiver em movimento em primeiro plano vai parecer que está mais rápido do que está no segundo plano, isso vai fazer o efeito de parallax acontecer!

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Esse é o resultado do código

inserir a descrição da imagem aqui

Segue o código da imagem acima:

* {
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  overflow-x: hidden;
  overflow-y: auto;

  -webkit-perspective: 1px;
  perspective: 1px;
}

.parallax {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective-origin-x: 100%;
  perspective-origin-x: 100%;

  position: relative;
  z-index: -20;
}
.parallax h2 {
  background: url('https://placecage.com/500/200');
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  background-position: center center;
  background-size: cover;
  height: 500px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  -webkit-transform: translateZ(-1px) scale(2.1);
  transform: translateZ(-1px) scale(2.1);

  /* 12rem é uma medida relativa ao H1 pode variar o valor dependendo da altura do elemento que estiver no lugar do H1 ou no tamanho da fonte dele*/
  /* 40vw é um tamanho relativo ao tamanho da imagem, como usei uma imagem que tem (500px X 200px) eu tenho que dividir 200 por 500 e multiplicar por 100, isso seria: 200/500 = 0,4 logo 0,4 * 100 = 40vw */
  top: calc(((100vh - (40vw + 12rem)) / 4) * -2);
}

h1 {
  background-color: #fff;
  padding: 1em;
}
.content {
  background-color: #fff;
}
<h1>meu h1</h1>
<div class="parallax">
  <h2>meu h2</h2>
</div>
<div class="content">
  <section>minha section</section>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias quisquam rerum quos mollitia porro enim aliquam sed voluptatibus quaerat, esse iste dolorem perferendis, accusantium laboriosam et illum quam maxime minima inventore. Sunt omnis amet in dolore excepturi est incidunt quisquam consequatur? Harum dolore culpa exercitationem reprehenderit asperiores eveniet, ab rem fugiat voluptate sit hic eaque numquam? Obcaecati accusantium autem ea laboriosam? Error facilis, veritatis aliquid sit magnam explicabo consequuntur aperiam possimus quasi. Atque laudantium magnam nihil libero magni labore, voluptate nobis accusamus harum blanditiis cumque ipsam adipisci, minima cupiditate dignissimos totam doloremque. Corporis labore similique assumenda sequi, quos consequatur odio nemo repudiandae culpa deserunt dolores! Quisquam necessitatibus voluptas saepe excepturi maxime eveniet quibusdam earum, accusamus culpa, quos eos voluptatibus facere atque rem! Accusamus quaerat enim omnis sapiente dolores ex corrupti animi debitis voluptatum cumque laborum tempora autem quos aliquid fugiat, rerum sunt voluptate in et voluptatibus ipsa vel optio? Dolores, illum aspernatur omnis velit, debitis ullam, dignissimos ea et alias a excepturi error tempora consequuntur. Aliquid debitis commodi veniam eveniet ad eos repellat est dignissimos in dolores nemo rem quibusdam asperiores maxime possimus itaque quae natus provident reiciendis eum at, rerum suscipit placeat! Fugit quo ullam vero facere unde reprehenderit.
  <span>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam debitis reiciendis molestiae dolorem nostrum excepturi dicta similique animi, necessitatibus facere assumenda mollitia alias odit architecto? Tenetur doloribus sapiente eligendi velit quas ex omnis excepturi in, id, recusandae officia iure dolorem a quod, officiis tempora voluptate molestiae natus accusantium quibusdam impedit animi. Amet harum impedit a beatae at dolor magnam pariatur dicta ut error voluptate vitae fuga, eos omnis totam saepe sed soluta minus nam, aspernatur excepturi voluptatibus. Inventore mollitia fuga a, dignissimos nesciunt quis? Accusantium officiis sed, doloribus sapiente ad provident porro deleniti! Dolores hic, sunt neque possimus nesciunt voluptas, velit illum enim similique illo ex in itaque eos pariatur, inventore aliquid optio officia voluptate quibusdam facilis! Voluptatem, cumque. Minima, soluta sunt aspernatur quia architecto incidunt. Blanditiis consequatur corporis aut dignissimos, culpa quidem. Reiciendis eveniet deleniti cupiditate sequi facere in, quae praesentium labore excepturi voluptatibus ipsa nobis maiores quos officia delectus repudiandae. Ratione aperiam minima labore, facilis eos porro, quasi magnam eligendi dolor ab doloribus molestias numquam. Odit quia eius ducimus ratione corrupti placeat eos libero consectetur aliquid dolore eveniet vitae, aperiam aliquam ad sunt tempore quo similique sit quibusdam eligendi blanditiis! Consequatur velit at odio perferendis doloremque. Obcaecati deserunt at architecto et! Nesciunt nostrum libero numquam voluptatibus saepe eius cumque corporis itaque debitis! Deserunt aperiam tempore corrupti rem fugiat. Veritatis enim nam sint unde placeat rerum, aliquid velit numquam deserunt voluptatem quam a sequi obcaecati consequuntur similique expedita incidunt odio, molestias repellat cum, deleniti consequatur nemo! Dolor culpa consequatur, fugit provident autem veniam delectus. Aspernatur nesciunt placeat, quae perspiciatis velit earum saepe asperiores? Hic, et? Repellat a atque modi praesentium odio, in sed expedita debitis fuga ut architecto, adipisci nobis nam voluptatem quae nulla. Possimus dicta provident laborum qui fugiat! Praesentium corporis assumenda aliquid voluptates est expedita beatae porro.
  </span>
</div>


OBS1: Nesse artigo tem mais detalhes https://learn-the-web.algonquindesign.ca/topics/css-animations-effects/#parallax

OBS2: Aqui tem um artigo legal sobre a propriedade perspective: https://css-tricks.com/tour-performant-responsive-css-site/


DICA

Recomendo que quem tiver interesse não deixa de ver esse filme que o próprio Walt Disney explica como funciona a animação em planos. É um conceito bem próximo do que foi feito aqui. https://www.youtube.com/watch?v=YdHTlUGN1zw

inserir a descrição da imagem aqui

4
  • Estava trabalhando em uma versão usando jQuery, ainda não está 100% mas está bem perto do que eu preciso codepen.io/luanpiegas/pen/zejGpG
    – Luan
    11/02/2019 às 13:55
  • @LuanDavi como vc não tem acesso ao HTML não sei se vc vai conseguir implementar essa técnica, por isso falei que talvez JS seja a melhor opção para o seu caso... Infelizmente não manjo muito de JS para te ajudar como o código, mas talvez vc possa abrir uma Nova Pergunta como o seu JS para ver se alguém tem algum dica para te ajudar.
    – hugocsl
    11/02/2019 às 13:58
  • vou tentar aplicar seu exemplo
    – Luan
    11/02/2019 às 13:59
  • @LuanDavi da uma estudada nele e testa em um ambiente mais "limpo" para vc ver como as coisas vai se aplicando, Vc tb vai precisar tratar a responsividade para ficar legal em telas pequenas... Mas boa sorte ai []´s
    – hugocsl
    11/02/2019 às 14:00
-2

Olá, você pode controlar a aparição de um elemento usando

transition-duration: 5s;
transition-delay: 2s;

Da uma olhada nesse exemplo: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition-delay

2
  • Como exatamente a sua resposta se relaciona com a questão? Acredito que não tenha ligação nenhuma com o que preciso fazer.
    – Luan
    11/02/2019 às 12:04
  • Como na pergunta você se referiu ao css, imaginei que sua dúvida era relacionada, porém, você pode usar isso que te passei e combinar com JS no evento OnScroll e setar pra que o Parallax tenha um transition-delay de acordo como vai dando scroll na página 11/02/2019 às 12:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .