Как добавить эффект затухания при изменении изображения при прокрутке

Когда я прокручиваю вниз, мое изображение меняется. это круто. Но я просто хочу добавить эффект выцветания на мои изображения в этой ситуации. демо здесь.Как добавить эффект затухания при изменении изображения при прокрутке

https://dl.dropboxusercontent.com/u/186799776/xampp/htdocs/www/index.html

КОД ЗДЕСЬ

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Bootstrap 101 Template</title> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 


    <style> 
     .hidden { 
      position: absolute; 
      top: -9999999px; 
     } 

     #bottommark { 
      position: absolute; 
      bottom: 0; 
     } 

     #animation { 
     background-repeat: no-repeat; 
     position : fixed; 
     top: 0; 
     width: 980px; 
     margin: 0 auto; 
     } 


    </style> 









    </head> 
    <body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-9"> 
       <img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg"/> 
       <img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg"/> 
       <img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg"/> 
       <img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg"/> 
       <img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg"/> 
       <img src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg" id="animation" /> 
       <div id="bottommark"></div>     
      </div> 
      <div class="col-md-3"> 
       <ul> 
        <li><a href="">Test</a></li> 
        <li><a href="">Test</a></li> 
        <li><a href="">Test</a></li> 
        <li><a href="">Test</a></li> 
        <li><a href="">Test</a></li> 
        <li><a href="">Test</a></li> 
        <li><a href="">Test</a></li> 
        <li><a href="">Test</a></li> 
        <li><a href="">Test</a></li> 
        <li><a href="">Test</a></li> 
        <li><a href="">Test</a></li> 
        <li><a href="">Test</a></li> 
        <li><a href="">Test</a></li> 
        <li><a href="">Test</a></li> 

       </ul> 
      </div> 
     </div> 
    </div> 


    <div class="another"> 
     <div class="mian"> 

      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 
      <li>list</li> 

     </div> 
    </div> 



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 



    <script> 
     $(document).ready(function(){ 

      $(window).scroll(function(){ 
       var offset1 = $(document).height(); 

       var offset = $(window).scrollTop(); 

       var lineH = offset1 - offset; 
       var lineHpart = offset1/5; 

       $("span").html(lineH); 
        if (lineH > lineHpart*4) { 
         $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg"); 
        } 
        if ((lineH < lineHpart*4) && (lineH > lineHpart*3)) { 
         $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg"); 
        } 
        if ((lineH < lineHpart*3) && (lineH > lineHpart*2)) { 
         $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg"); 
        } 
        if (lineH < lineHpart*2 && lineH > lineHpart*1) { 
         $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg"); 
        } 
        if (lineH < lineHpart) { 
         $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg"); 
        } 
       }); 
      }); 
    </script> 
    </body> 
</html>

источник

2015-09-01 Bized Khan

возможно дубликат [JQuery - Затухание на Scroll/FadeIn на "scrollstop"] (http://stackoverflow.com/questions/1654792/jquery-fadeout-on-scroll-fadein -on-scrollstop) – AleshaOleg

$(window).on('scroll',function(){ 
       if($(window).scrollTop()){ 
        $('#yourImg').animate({opacity:0},1000,function(){}); 
       }elseif(!($(window).scrollTop())){ 
        $('#yourImg').animate({opacity:1},1000,function(){}); 
       } 
});

Я не проверял этот код, но я думаю, что это даст вам начать на то, что вы хотите.

источник

2015-09-01 15:07:09 Jared

Я просто добавляю ваш код. Но когда я прокручиваю вниз, изображение не меняется сейчас. Не могли бы вы дать мне решение. Вот файл https://dl.dropboxusercontent.com/u/186799776/xampp/htdocs/www/test.html –

Вот JSFiddle раствором https://jsfiddle.net/84rqx7dg/

я использовал переход CSS3 для замирания и используется JQuery для изменения классов вместо замены СРК.

$(document).ready(function(){ 
 

 
      $(window).scroll(function(){ 
 
       var offset1 = $(document).height(); 
 

 
       var offset = $(window).scrollTop(); 
 

 
       var lineH = offset1 - offset; 
 
       var lineHpart = offset1/5; 
 

 
       $("span").html(lineH); 
 
        if (lineH > lineHpart*4) { 
 
         $('.image.active').removeClass('active'); 
 
         $('#img1').addClass('active'); 
 
        } 
 
        if ((lineH < lineHpart*4) && (lineH > lineHpart*3)) { 
 
         $('.image.active').removeClass('active'); 
 
         $('#img2').addClass('active'); 
 
        } 
 
        if ((lineH < lineHpart*3) && (lineH > lineHpart*2)) { 
 
         $('.image.active').removeClass('active'); 
 
         $('#img3').addClass('active'); 
 
        } 
 
        if (lineH < lineHpart*2 && lineH > lineHpart*1) { 
 
         $('.image.active').removeClass('active'); 
 
         $('#img4').addClass('active'); 
 
        } 
 
        if (lineH < lineHpart) { 
 
         $('.image.active').removeClass('active'); 
 
         $('#img5').addClass('active'); 
 
        } 
 
       }); 
 
      });

.container{ 
 
    min-height: 1500px; 
 
} 
 
.image{ 
 
    width: 980px; 
 
    position : fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    opacity: 0; 
 
    transition: all 1s; 
 
} 
 
.active { 
 
    opacity: 1; 
 
}

<div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-9"> 
 
       <img id="img1" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg"/> 
 
       <img id="img2" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg"/> 
 
       <img id="img3" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg"/> 
 
       <img id="img4" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg"/> 
 
       <img id="img5" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg"/> 
 
       <img id="img6" class="image active" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg" /> 
 
       <div id="bottommark"></div>     
 
      </div> 
 
      <div class="col-md-3"> 
 
       
 
      </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="another"> 
 
     <div class="mian"> 
 

 
      
 

 
     </div> 
 
    </div>

источник

2015-09-01 15:25:18 danabel

спасибо. работает. –

Как добавить эффект затухания при изменении изображения при прокрутке

ответ

Смежные вопросы