I'd like to do the fade in the other side : fadeIn
from down to up and not like now, fadeOut
down to up
var $elem = $('.test.fade'); for (var i = 0; i <= 5; i++) { $elem.clone().appendTo('body'); } $(window).scroll(function() { $('.fade').each(function() { var bounds = this.getBoundingClientRect(), op = Math.max((bounds.height + Math.min(bounds.top, 0)) / bounds.height, 0); $(this).css('opacity', op); }); });
* { padding: 0; margin: 0; box-sizing: border-box; } .test { height: 70vh; width: 30%; background-color: rgba(0, 0, 0, 0.6); margin: 1em auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test fade"></div>
Thank you for help.
Change the opacity calculation to this:
op = Math.max((bounds.height - Math.max(bounds.top, 0)) / bounds.height, 0);
So it becomes dependent on the bottom border of the boxes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.