Change opacity gradually with scroll

Question

Change opacity gradually with scroll

Navigation

#1 by (3 votes)

0

I want to apply opacity to the footer of my site, the footer is fixed in bottom and behind the rest of the site type parallax effect. But I can not seem to get the opacity to stay gradually, as soon as I scroll down the scroll bar, the opacity that was at zero becomes 1 as soon as the scroll bar reaches my footer.

This is the footer div:

<div id="rodape" class="rodape"></div>

This is css:

#rodape {
    position: fixed;
    bottom: 0;
    z-index: -1;
}
.rodape {
    width: 100%;
    height: auto;
    background-color: #00e676;
}

Within div I'll put other elements like address, Google map, etc. As div is behind the rest of the site and fixed in bottom , to start appearing I want the opacity to be 0 and with the scroll it will increase to 1 when the scroll is finished, because it will be the end of the site. p>

I'm using the information from this codepen and this js:

var scroll = $('#rodape');
var range = 200;

$(window).on('scroll', function () {

  var scrollTop = $(this).scrollTop(),
      height = heade.outerHeight(),
      offset = height / 2,
      calc = 1 - (scrollTop - offset + range) / range;

  scroll.css({ 'opacity': calc });

  if (calc > '1') {
    scroll.css({ 'opacity': 1 });
  } else if ( calc < '0' ) {
    scroll.css({ 'opacity': 0 });
  }

});

Have you noticed that I do not handle a lot of javascript, right? But I want to leave this effect, does anyone know where I'm going? Is there any way to make this work, or some other solution?

jquery css rolamento

asked by anonymous 10.10.2017 / 22:18

1 answer

how to put a video inside a pdf [closed] How to mount an includes system with $ _GET

score 3 · Accepted Answer

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();

  $('.rodape').css({
    opacity: function() {
      var elementHeight = $(this).height();
      return 1 - (elementHeight - scrollTop) / elementHeight;
    }
  });
});

.encheLinguissa {
  height: 900px;
}

.rodape {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: rgb(0, 0, 0);
  opacity: 0;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass='encheLinguissa'></div><divclass='rodape'></div>

Tocalculateopacity,subtractthescrollTopvaluefromtheheightofthedivandthendivideitbytheheightofthediv.

Source:

scrollTop () - This method returns the vertical position of the scroll bar for the (div class rodape)

Another Solution:

The condition ( >1200 ) in line if($(document).scrollTop()>1200){ must have a value compatible with page height (in this example given by height: 1500px; )

The lower the value of the condition ( > 1200 ) the rodape div will appear with less scrolling.

    var div = $('.rodape');
    $(window).scroll(function(){
       if($(document).scrollTop()>1200){
          var percent = $(document).scrollTop() / ($(document).height() - $(window).height());
          div.css('opacity', 0 + percent);
       }else{
          div.css('opacity', 0);
       }

    });

.encheLinguissa {
  height: 1500px;
}

.rodape {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #00e676;
  opacity: 0;
  z-index: 1;
  transition: opacity 1.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='encheLinguissa'>
qqqqqqqqqqqq
</div>

<div class='rodape'>
<p>aaaaaaaaaaa</p>
<p>bbbbbbbbbbb</p>
<p>ccccccccccc</p>
</div>

transition - causes the transition to occur smoothly at a set time.