2

I am looking for a jQuery script that displays opacity based on vertical scroll position. Where the (visible) vertical middle is opacity 1 but fades at both top & bottom to opacity 0. Multiple wrapper row elements on page with same class name.

.inner.cover
{
   height:20%; 
}
<div class="inner cover" style="opacity:0;">1 Vertical Top</div>
<div class="inner cover" style="opacity:0.333;">2</div>
<div class="inner cover" style="opacity:1;">3 Vertical Middle</div>
<div class="inner cover" style="opacity:0.333;">4</div>
<div class="inner cover" style="opacity:0;">5 Vertical Bottom</div>
<div class="inner cover" style="opacity:0;">6 Below Vertical Bottom</div>
<div class="inner cover" style="opacity:0;">7 Below Vertical Bottom</div>
<div class="inner cover" style="opacity:0;">8 Below Vertical Bottom</div>
<div class="inner cover" style="opacity:0;">9 Below Vertical Bottom</div>

Something like this site: https://aibcomms.typeform.com/to/vMZwYQ

Anyone know where/if I can find something like this? Trying to avoid plugin if possible?

Improve this question

2 Answers 2

Reset to default
0

Perhaps this solution will suit you. Good luck. Now you can manage yourself in what direction you need to up or down through the items.

'use strict';
jQuery(function($){
  
  var lines = $('.line');
  
  function setStep(step,move){
    
    $('.line').removeClass('active');
    $('.line').removeClass('fog');

    $(lines[step]).addClass('active');
    
    switch (move) { 
      case 'down':  
        if (lines.length-1 > step){
          $(lines[step])            
            .prev()
            .addClass('fog');
          $(lines[step])  
            .next()
            .addClass('fog');
      
          step++;
      
          setTimeout(function(){
            setStep(step,move);
          },2000);
      
        } else {
          setStep(lines.length-1,'up');
        }
        break;
      case 'up':
        if (0 < step){
          
          $(lines[step]).addClass('active');
          
          if (lines.length-1 !== step ){
            $(lines[step])              
              .next()
              .addClass('fog');
          }
          
          $(lines[step])
            .prev()
            .addClass('fog');
      
          step--;
      
          setTimeout(function(){
            setStep(step,move);
          },2000);
      
        } else {
          setStep(0,'down');
        }
        break;
    }
  }
  
  //start item active 0
  setStep(0,'down');
});
.line{
  opacity:0;
  display:none;
  transition: opacity 0.9s;
}
.fog{
  opacity:0.33;  
  display:block;
  transition: opacity 0.9s;
}
.active{
  opacity:1;
  display:block;
  transition: opacity 0.9s; 
}
.inner.cover
{
   height:20%; 
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
  <div class="inner cover line" >1 Vertical Top</div>
<div class="inner cover line" >2</div>
<div class="inner cover line" >3 Vertical Middle</div>
<div class="inner cover line" >4</div>
<div class="inner cover line" >5 Vertical Bottom</div>
<div class="inner cover line" >6 Below Vertical Bottom</div>
<div class="inner cover line" >7 Below Vertical Bottom</div>
<div class="inner cover line" >8 Below Vertical Bottom</div>
<div class="inner cover line" >9 Below Vertical Bottom</div>
</body>
</html>

Improve this answer
1
  • Very close now but if you scroll fast to the bottom it does not seem to show content or gets hung up on one the top divs? I changed the CSS to: .inner.cover { min-height:600px; }
    – Kerry7777
    Commented Dec 14, 2015 at 22:49
0

Perhaps this decision will suit you. Good luck.

'use strict';
jQuery(function($){
  
  var lines = $('.line');
  
  function setStep(step){
    
    $('.line').removeClass('active');
    $('.line').removeClass('fog');

    $(lines[step])
        .addClass('active')
        .prev()
        .addClass('fog');
    
    if (lines.length-1 > step){
      
      $(lines[step])  
        .next()
        .addClass('fog');
      
      step++;
      
      setTimeout(function(){
      setStep(step);
      },2000);
      
    }
    
  }
  
  //start item active 0
  setStep(0);
});
.line{
  opacity:0;
  display:none;
}
.fog{
  opacity:0.33;  
  display:block;
}
.active{
  opacity:1;
  display:block;
}
.inner.cover
{
   height:20%; 
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
  <div class="inner cover line" >1 Vertical Top</div>
<div class="inner cover line" >2</div>
<div class="inner cover line" >3 Vertical Middle</div>
<div class="inner cover line" >4</div>
<div class="inner cover line" >5 Vertical Bottom</div>
<div class="inner cover line" >6 Below Vertical Bottom</div>
<div class="inner cover line" >7 Below Vertical Bottom</div>
<div class="inner cover line" >8 Below Vertical Bottom</div>
<div class="inner cover line" >9 Below Vertical Bottom</div>
</body>
</html>

Improve this answer
1
  • Thanks @Bear GRiZZLY Xi almost exactly as I want. The script works nicely scrolling down but not on the way back up? Also noticed a typo (full stop) at the end of .addClass('active') & I was also going to ask about a animate or transition when the class changes.
    – Kerry7777
    Commented Dec 7, 2015 at 21:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.