2

Tenho a seguinte complicação:

$(window).scroll(function() {
    $('ID').css('opacity', parseInt(1 - ($(this).scrollTop()/100)*1)); });

Neste código eu consigo colocar o opacity: 1; quando o scroll está no topo e ao girar apenas 1px ele já poe opacity: 0; O que estou tentando fazer é que ele comece com 0.7 e vá sumindo aos poucos até chegar na parte de cima, eu utilizo a medida VH para deixar a página do tamanho do view e com isso, na posição 0vh ele ficaria 0.7 e na posição 100vh ele ficaria 0.1

O site é este aqui http://disk.bl.ee/beltran/clean_style.php

2
  • Seria melhor postar o trecho resolvido como resposta, em vez de incorporar no campo da pergunta. Pode manter a aceitação com quem resolveu pra você, e deixar sua resposta como complemento.
    – Largato
    Commented 24/10/2016 às 7:58
  • @Bacco a sim, entendi, farei isso então.
    – flourigh
    Commented 26/10/2016 às 7:07

3 Respostas 3

4

Imagino que queira algo como isto:

O cálculo da opacidade equivale a:

opacidade = valorInicial * (1 - scrollTop / 100vh)

Sendo o 100vh representado pelo $(window).height().

Javascript:

$(document).on('scroll', function(){
  var max = 0.7; //Valor inicial, que também deve ser ajustado no css
  var opacity = max * (1 - $(this).scrollTop() / $(window).height()); 
  $('div p').css('opacity', opacity);
  $('div p span').html($('div p').css('opacity'));
})
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
div {
  width: 100%;
  background: #333;
  height: 100vh;
  position: relative;
}
div:nth-child(odd) {
  background: #666;
}
div p {
  display: block;
  width: 100%;
  font-size: 6vw;
  text-align: center;
  opacity: 0.7;
  position: absolute;
  line-height: 40px;
  bottom: 10px;
  color: #fff;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Minha opacidade é:
    <br> <span></span>
  </p>
</div>
<div>
</div>

JsFiddle

1
  • perfeito, isso ficou incrível, valew.
    – flourigh
    Commented 22/10/2016 às 8:12
2

na posição 0vh ele ficaria 0.7 e na posição 100vh ele ficaria 0.1

Rodando a sua função no site que você mandou, ela não se comporta como você espera. Se você tentar rodar e logar os valores no console e rolar a página pra baixo, você vai perceber que o primeiro valor retornado por ela é 0 e os subsequentes são números negativos.

$(window).scroll(function() {
  $('ID').css('opacity', parseInt(1 - ($(this).scrollTop()/100)*1))
  console.log(parseInt(1 - ($(this).scrollTop()/100)*1))
});

Aqui está a saída conforme eu uso o scroll pra baixo da página:

> Object { length: 1, 1 more… }
> 0
This site appears to use a scroll-linked positioning effect.
This may not work well with asynchronous panning;
see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects
for further details and to join the discussion on related tools
and features!
> 0
> -0
> -1
> -2
> -3

O que é esta medida VH que você está tentando usar? Você poderia upar uma versão da sua página sem nenhuma alteração na opacidade do botão pra eu fazer uns testes aqui? Valeu.

2

Graças ao nosso amigo abaixo, consegui o seguinte código que deixarei para quem também precisar deste tipo de ajuda.

    $(document).on('scroll', function() {
    var max = 0.3;
    var mim = 0.1;
    var opacity = max * (1 - $(this).scrollTop() / $(window).height());
    if (opacity > mim) {
        var opacity = opacity;
    } else {
        var opacity = mim; }
    $('ELEMENTO').css('opacity', opacity); });

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 .