FadeIn scroll elements

Question

I have a function that at the moment is gradually disappearing in the elements, but id, for example, the mouse wheel, to control their opacity, if possible.

Can anyone advise how I will do this? Will it require a mousewheel plugin? thanks for any input

http://jsfiddle.net/gLtgj54s/

$('.sector-link').each(function (i) { $(this).delay(350 * i).fadeIn(800); }); 

HTML markup

 <div style="overflow:scroll;width:100%; border:0; height:300px; "> <div style="height:3000px; position:relative;"> <div style="position:fixed;left:0; top:50px;"> sector links... </div> </div> </div> 

Answer 1

One approach is that you can use data attributes to set the point when an element should disappear.

 <div class="sector-link" data-scroll-point="100">Link 1</div> 

And in JS, check when the scrollTop value is in the range between the scroll point of an element and the scroll point of the next element.

 var arr = []; $('.sector-link').each(function(i) { arr.push($(this).data("scroll-point")); }); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); elementFade(scrollTop); }); elementFade = function(top) { for (var i = 0; i < arr.length; i++) { var min = arr[i]; var max = i != (arr.length - 1) ? arr[i + 1] : (arr[i] + 100); if (top >= min && top < max) { $('[data-scroll-point="' + arr[i] + '"]').fadeIn(800); $('p.info').html($('[data-scroll-point="' + arr[i] + '"]').html() + " visible at point " + arr[i]); } } } 

 body { height: 3000px; } p.info { position: fixed; top: 0; font-size: 11px; color: #555; background: #eee; padding: 3px; } .sector-link { float: left; margin: 5px; padding: 5px; border-radius: 2px; background: #abcdef; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="info">Not visible</p> <div style="position:fixed;left:0; top:50px;"> <div class="sector-link" data-scroll-point="100">Link 1</div> <div class="sector-link" data-scroll-point="300">Link 2</div> <div class="sector-link" data-scroll-point="500">Link 3</div> <div class="sector-link" data-scroll-point="700">Link 4</div> <div class="sector-link" data-scroll-point="1000">Link 5</div> <div class="sector-link" data-scroll-point="1200">Link 6</div> <div class="sector-link" data-scroll-point="2000">Link 7</div> <div class="sector-link" data-scroll-point="2500">Link 8</div> </div> 

Updated fiddle

Answer 2

Anytime you use the mouse wheel to scroll, changes in opacity make it more or less visible. This uses the DOMMouseScroll event or the mousewheel event. See the following code:

 function moveObject(event){ var delta=0; if(!event)event=window.event; if(event.wheelDelta){ delta=event.wheelDelta/600; }else if(event.detail){ delta=-event.detail/20; } var target = $('body > div'); var adj = parseFloat(target.css('opacity')); target.css('opacity',Math.max(0,Math.min(1,adj+Math.max(0.6,adj)*delta))); } if(window.addEventListener){ document.addEventListener('DOMMouseScroll',moveObject,false); }else{ document.onmousewheel=moveObject; } 

Here's jsFiddle to try it yourself: http://jsfiddle.net/gLtgj54s/14/

Thanks: http://viralpatel.net/blogs/javascript-mouse-scroll-event-down-example/

Answer 3

• That's what you need?

  Jsfiddle

   var cpt = 0; $( window ).scroll(function() { $('.sector-link:eq('+cpt+')').fadeIn(800); cpt = cpt + 1; }); 

  I removed the delay (350) on jsfiddle, but you can return it if necessary: JsFiddle

• I don’t know if you need this, but if so, there is JsFiddle code (not perfect) that does what you want, plus the opposite .

  • In scroll down mode: Your word appears one after another
  • In scroll mode: Your name disappears one by one

Answer 4

I updated your fiddle , hope this is what you were looking for?

It just uses .fadeIn / .fadeOut for each item depending on the scroll position

eg:

 if ( $(document).scrollTop() > 50 ) { $('#2').fadeIn(800); } else { $('#2').fadeOut(800); } 

Answer 5

You can use the library, namely scrollReveal.js, which is pretty nice.

here is the Code Pen I made using the library. Simplified this code pen

Your code may be as simple as:

 <html> <body> <p data-scrollreveal='ease in 50px'> Thing </p> <p data-scrollreveal='ease in 50px'> Thing </p> <p data-scrollreveal='ease in 50px'> Thing </p> ... </body> </html> 

https://github.com/julianlloyd/scrollReveal.js

Answer 6

Because Apple decided not to send the “scroll” event until it finishes scrolling, I would suggest something like this -

First set everything to display: block and opacity: 0

 var scrollTop; var $elements = $(...); window.setTimeout(function(){ // Better to use requestAnimationFrame if available if (scrollTop !== window.scrollTop) { scrollTop = window.scrollTop; for (var i=0; i<elements.length; i++) { var rect = elements[i].getBoundingClientRect(); elements[i].style.opacity = Math.min(1, Math.max(0, rect.top, rect.bottom > 0 ? window.innerHeight - rect.bottom : 0) / 20); // ie, Put in something to control it based on the difference between the top/bottom of the element and the display } } }, 50); 

Although this is a jQuery question, running such code in every frame that can change can be expensive, so I used direct DOM code, which is significantly faster!

Answer 7

Saves the modified script . This is not entirely clear in your question, but I assume that you need a set of opacity based on where the item is in the viewport.

 $(document).ready(function () { $('.sector-pink').css({ opacity: 0, visibility: 'visible' }); var setOpacity = function () { var container = $(this); $('.sector-link').each(function () { var self = $(this); var fromBottom = container.height() - self.offset().top; var opacity = fromBottom / 100; //100 is a magic number that will control how far from the bottom of the viewport things become fully visible. self.find('span').text(opacity.toFixed(2)); self.css({ 'opacity': opacity }); }); }; $('#container').scroll(function () { setOpacity(); }); setOpacity(); }); 

Answer 8

If you understand correctly, you want the elements to disappear gradually when the user scrolls down the page. (Run the code snippets to find out if you want it or not)

 var showing = false; $(document).scroll(function() { if (!showing && isElementInViewport($('.sector-link:last'))) { showing = true; $('.sector-link').each(function(i) { $(this) .delay(100 * i) .css('visibility', 'visible') .hide() .fadeIn(400); }); } }) // This function determines if the given element is inside the current view port function isElementInViewport(el) { //special bonus for those using jQuery if (typeof jQuery === "function" && el instanceof jQuery) { el = el[0]; } var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ ); } 

 body { height: 100000px; } .sector-link { font-size: x-small; visibility: hidden; border: 1px solid yellowgreen; padding: 0.1em; width: 120px; text-align: center; color: white; } div.placeholder { text-align: center; padding: 0.1em; height: 500px; width: 120px; background: yellowgreen; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="placeholder">Scroll down slowly</div> <div> <div class="sector-link" style="background:#563895">THING</div> <div class="sector-link" style="background:#765835">THING</div> <div class="sector-link" style="background:#068865">THING</div> <div class="sector-link" style="background:#a468f5">THING</div> <div class="sector-link" style="background:#56ffab">THING</div> <div class="sector-link" style="background:#563895">THING</div> <div class="sector-link" style="background:#8f68f5">THING</div> <div class="sector-link" style="background:#a6b8f5">THING</div> </div> 

Answer 9

You can just use Twitter Bootstrap Scroll Spy rather than trying to reinvent the wheel. To achieve the desired behavior with it, just follow the instructions and add the following css:

 .active ~ li { opacity: 0; transition: 1s; } 

By the way, you can also try it there. Open the linked website, add the snippet to the console, and scroll through the documentation.

Answer 10

So here is my solution to the problem:

Elements that have the .sectrol-link class disappear or singly, depending on how you scroll.

For this method to work, you do not need to have an actual scroll bar. The solution does not track the scroll position; it is based on the scrollwheel event.

It also disappears when scrolling items.

I am sure that you can customize the solution to suit your needs.

  // Constants var pxPerItem = 720; var sectorLinks = $('.sector-link'); var scrollYMax = sectorLinks.length * pxPerItem; //Fade controller variable var currentScrollY = 0; //Calculates fade value for the item based on current 'scroll' position function calculateFade(itemNo) { var relativeScroll = (currentScrollY - pxPerItem * itemNo) / pxPerItem; return Math.min(Math.max(0, relativeScroll), 1) } //Keeps the controller scroll variable within the bounds based on the amount of elements. function normalizeCurrentScroll() { currentScrollY = Math.min(Math.max(0, currentScrollY), scrollYMax); } //The actual event that controls items fade $(window).bind('mousewheel DOMMouseScroll', function(event){ var delta = event.originalEvent.wheelDelta == 0 ? event.originalEvent.detail : event.originalEvent.wheelDelta; currentScrollY -= delta; for (var i = 0; i < sectorLinks.length; i++) { $(sectorLinks[i]).fadeTo(20, calculateFade(i)); } normalizeCurrentScroll(); }); 

The amount of wheel spin needed to fade out or disappear is controlled by the variable 'pxPerItem'. If you want to place such a thing below on your page, you will have to set up the scrollYMax variable and calculate the FadeFunction to match your height.

Fiddle: https://jsfiddle.net/gLtgj54s/18/

Answer 11

I have successfully used this to accomplish what you want to do:

 $(window).bind("scroll", function() { if ($(this).scrollTop() > 800) { //Fade in at a level of height $(".XX").fadeIn("fast"); checkOffset(); //Call function } else { $(".XX").stop().fadeOut("fast"); } }); function checkOffset() { if ($('.XX').offset().top + 500 + $('#myDiv').height() >= $('.Container').offset().top) { $(".XX").stop().fadeOut("fast"); } if ($(window).scrollTop() + $(window).height() < $('.Container').offset().top) { $('.XX').css('position', 'fixed'); //Restore when you scroll up } }