javascript - Is it possible to change font color based on background slider image name using jQuery? -
i trying change font color of navigation based on color of background image image slider. i'm adding class nav looking @ end of image name "dark.png" or "light.png" change font color don't know how change font color every time slider switches images.
if there simpler/better solution out there please let me know. realize i'm mixing pure javascript , jquery in example if has pure jquery solution awesome.
here code simplified version troubleshooting. did jsfiddle example.
html:
<body> <nav> <ul> <li>about</li> </ul> </nav> </body>
css:
body { background-repeat: no-repeat; background-size:cover; width:300px; height:300px; } .dark { color:#ffffff; }
javascript:
$(document).ready(function(){ //slideshow: $(function () { var slideshow = $('body'); var backgrounds = [ 'url(http://markpfaff.com/bk1-dark.png)', 'url(http://markpfaff.com/bk2-light.png)']; var current = 0; function nextbackground() { slideshow.css( 'background-image', backgrounds[current = ++current % backgrounds.length]); settimeout(nextbackground, 5000); } settimeout(nextbackground, 5000); slideshow.css('background-image', backgrounds[0]); }); }); (function colorchange(){ var b = $('body').css('background-image'); if(b.match(/-dark.png\)$/)){ $("nav").addclass("dark"); }else if(b.match(/-light.png\)$/)){ $("nav").removeclass("dark"); } })();
there many options , here 1 of them. keep array of classes relative index of backgrounds. there no need of color change function.
$(function () { var slideshow = $('.body'); var backgrounds = [ 'url(http://markpfaff.com/bk1-dark.png)', 'url(http://markpfaff.com/bk2-light.png)']; var colorsclasses = ['dark','light']; var current = 0; function nextbackground() { slideshow.css( 'background-image', backgrounds[current = ++current % backgrounds.length] ); $("nav").attr("class",colorsclasses[current]); settimeout(nextbackground, 5000); } settimeout(nextbackground, 5000); slideshow.css('background-image', backgrounds[0]); slideshow.css("color",color[0]); });
Comments
Post a Comment