Opacity according to page scroll

Asked

Viewed 809 times

2

I have the following complication:

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

In this code I can put opacity: 1; when the scroll is at the top and when just turning 1px it already poe opacity: 0; What I’m trying to do is that it starts with 0.7 and gradually disappears until I get to the top, I use the VH measure to leave the page the size of the view and with that, at the 0vh position it would be 0.7 and at the 100vh position it would be 0.1

The site is this one http://disk.bl.ee/beltran/clean_style.php

javascript jquery rolling opacity

  • It would be better to post the solved passage as an answer, rather than incorporate it into the question field. You can keep your acceptance with whoever you’ve solved for you, and leave your answer as a compliment.

  • @Bacco a yes, I understand, I’ll do it then.

3 answers

4


I imagine you want something like this:

The calculation of opacity is equivalent to:

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

Being the 100vh represented by $(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

  • perfect, it looked amazing, Valew.

2

Thanks to our friend below, I got the following code that I will leave to those who also need this kind of help.

    $(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); });

2

at the 0vh position it would be 0.7 and at the 100vh position it would be 0.1

Running your function on the website you sent, it does not behave as you expect. If you try to run and log the values in the console and scroll down the page, you will notice that the first value returned by it is 0 and the subsequent negative numbers.

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

Here’s the output as I scroll down the page:

> 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

What is this VH measure that you are trying to use? Could you upgrade a version of your page without any change in the opacity of the button for me to do some tests here? Thanks.

Browser other questions tagged javascript jquery rolling opacity

You are not signed in. Login or sign up in order to post.