Question

我正在寻找一个基于垂直滚动位置显示不透明度的jQuery脚本。其中（可见）垂直中间是不透明度1但在顶部和顶部都消失。 bottom to opacity 0.页面上具有相同类名的多个包装行元素。

=> Booting Thin
=> Rails 4.0.12 application starting in development on http://192.168.39.163:3004
=> Run 'rails server -h' for more startup options
=> Ctrl-C to shutdown server
Exiting
/home/vicky/.rbenv/versions/2.2.3/lib/ruby/2.2.0/fileutils.rb:252:in 'mkdir': Permission denied @ dir_s_mkdir - /home/vicky/vanerum/tmp/pids (Errno::EACCES)
    from /home/vicky/.rbenv/versions/2.2.3/lib/ruby/2.2.0/fileutils.rb:252:in 'fu_mkdir'
    from /home/vicky/.rbenv/versions/2.2.3/lib/ruby/2.2.0/fileutils.rb:226:in `block (2 levels) in mkdir_p'
    from /home/vicky/.rbenv/versions/2.2.3/lib/ruby/2.2.0/fileutils.rb:224:in `reverse_each'
    from /home/vicky/.rbenv/versions/2.2.3/lib/ruby/2.2.0/fileutils.rb:224:in `block in mkdir_p'
    from /home/vicky/.rbenv/versions/2.2.3/lib/ruby/2.2.0/fileutils.rb:210:in `each'
    from /home/vicky/.rbenv/versions/2.2.3/lib/ruby/2.2.0/fileutils.rb:210:in `mkdir_p'
    from /home/vicky/.rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/railties-4.0.12/lib/rails/commands/server.rb:71:in `block in start'
    from /home/vicky/.rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/railties-4.0.12/lib/rails/commands/server.rb:70:in `each'
    from /home/vicky/.rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/railties-4.0.12/lib/rails/commands/server.rb:70:in `start'
    from /home/vicky/.rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/railties-4.0.12/lib/rails/commands.rb:76:in `block in <top (required)>'
    from /home/vicky/.rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/railties-4.0.12/lib/rails/commands.rb:71:in `tap'
    from /home/vicky/.rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/railties-4.0.12/lib/rails/commands.rb:71:in `<top (required)>'
    from bin/rails:4:in `require'
    from bin/rails:4:in `<main>'

.inner.cover
{
   height:20%; 
}

像这样的网站： https://aibcomms.typeform.com/to/vMZwYQ

任何人都知道我在哪里可以找到这样的东西？尽可能避免使用插件？

Answer 1

也许这个决定适合你。祝你好运。

＆＃13;

'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);
});

＆＃13;

.line{
  opacity:0;
  display:none;
}
.fog{
  opacity:0.33;  
  display:block;
}
.active{
  opacity:1;
  display:block;
}
.inner.cover
{
   height:20%; 
}

＆＃13;

<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>

＆＃13;

Answer 2

也许这个解决方案适合你。祝好运。现在，您可以通过项目管理自己在向上或向下所需的方向。

＆＃13;

'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');
});

＆＃13;

.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%; 
}

＆＃13;

<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>

＆＃13;

基于滚动位置淡入的ScrollTop jQuery不透明度＆amp;在顶部＆amp;底部

2 个答案: