slideshow with changing font color on each slide + callback font to set color on scroll

问题

I'm trying to accomplish a couple of things here in a header element. Firstly, I'd like a jquery slideshow set to relative. Secondly, I'll have my png logo and nav links fixed sitting in front of the slideshow. since some of the slides will be dark, and some will be light, I'll need the logo + nav links to change to set colors in unison as the images cycle so they can always be read.

So far, it seems like I could accomplish these 2 tasks with cycling through divs, but since the images will be relative and the logo+nav will be fixed, I'll need the opacity of the fixed divs' background to change it's opacity from 0 - 100 as you scroll down and the slideshow scrolls up and out of view.

And since the colors of the logo+nav will sometimes be one color and sometimes be another depending on what slide is showing, I need to add an additional callback telling the logo+nav to return to black upon scroll no matter what they were when scrolling began.

I have a semi working DEMO HERE.

This demo shows the slideshow + div opacity on scroll. through they are not playing nice together in the fiddle, they are working fine together on my actual site.

Feel free to tear this apart. Thanks!

回答1:

This is what you want ? http://jsfiddle.net/MNFTT/89/

CSS:

#slideshow{
    
    position:relative;
    top:0;
    left:0;
    
} 

#slideshow ul, #slideshow li{
    
    margin:0;
    padding:0;
    list-style-type:none;
    
} 

.slideshow_item{
    
    position:absolute;
    left:0;
    top:0;
    list-style-type:none;
    
} 

.slideshow_item img{
    
    margin:0;
    padding:0;
    vertical-align:bottom;
    
} 

div.fademe {
    width: 100%; 
    position: fixed; 
    display: block; 
    height: 150px; 
    background: #ffffff; 
    z-index: 8; 
}

#header-wrapper {
    padding: 0;
    margin: 0 auto;
}

#header {
    position: fixed; 
    width: 100%; 
    height: 100px; 
    z-index: 9; 
    margin: 0 auto;
}

#header .inner {
    margin: 0 auto; 
    padding: 0 25px 0 25px; 
    width: 950px; 
    height: 100px; 
    z-index: 10;
}

#header-logo {
    background:url(http://img585.imageshack.us/img585/4227/xlogo.png);
    width:71px;
    height:51px;
    margin: 0 auto;
    margin-top: 31px;
    background-repeat: no-repeat;
}

#navbar {
    text-align: justify;
    margin-top: 25px;
}

#navbar a{
    font-family: "ss-bol", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000000;
}

#navbar a:hover{
    font-family: "ss-bol", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #595959;
}


#navbar span {
    width: 100%;
    display: inline-block;
}

#page {
    width: 100px;
    height: 100%;
}

HTML

<div id="header-wrapper">
<div class="fademe"></div>
            <div id="header">
        <div class="inner">
            <a href="/" title"logo"><div id="header-logo"></div></a>
            <div id="navbar">
              <a href="#">NEW</a>
              <a href="/shop">SHOP</a>
              <a href="/wine">ART</a>
              <a href="/blog">BLOG</a>
              <a href="#">MUSIC</a>
              <a href="#">CONTACT</a>
            <a href="#">ABOUT</a>
            <span></span></div>
        </div>
        </div>
</div>


<div id="slideshow"> 
    
    <ul>
        
        <li class="slideshow_item">
            
            <a href="#"><img src="http://img829.imageshack.us/img829/6969/newslide2.jpg" alt="persiannewyear11-hp" /></a> 
            
        </li>
        
        <li class="slideshow_item">
            
            <a href="#"><img src="http://img696.imageshack.us/img696/3193/newslide1.jpg" alt="holi11-hp" /></a> 
            
        </li>
        
    </ul> 
    
</div>
<div id="page">
TEXT FOR SCROLLING
.....
</div>

JS:

/* slideshow */
$(function(){

var slide_pos = 0;
var slide_len = 0;


    slide_len = $(".slideshow_item").size() - 1;

    $(".slideshow_item:gt(0)").hide();

    slide_int = setInterval(function() {

        slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
        slide_cur.fadeOut(2000);

        slide_pos = (slide_pos == slide_len ? 0 : (slide_pos + 1));

        slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
        slide_cur.fadeIn(2000);

    }, 5000);




    var divs = $('.fademe');
    var navbar_a=$('#navbar a');
    var navbar=$('#navbar');
    divs.css('opacity', 0);
    $(window).scroll(function() {
    var imgH=$('.slideshow_item').height();
        var percent = $(document).scrollTop()/imgH;
       divs.css('opacity', percent);
        var bg=Math.round(255-(percent*255));
        bg=bg>0?bg:0;
        var fg=255-(bg/2+128);
       console.log(percent,imgH,fg);
       divs.css('background-color','rgb('+bg+','+bg+','+bg+')');
       navbar_a.css('color','rgb('+fg+','+fg+','+fg+')');
    });
});

来源：https://stackoverflow.com/questions/12792666/slideshow-with-changing-font-color-on-each-slide-callback-font-to-set-color-on

标签

jquery

callback

scroll

slideshow

opacity