How to change header font and nav link color when slideshow image changes


Tags: javascript,jquery,html,css3

Problem :

I have a fixed header and I have a slideshow just behind it. Basically the header has a transparent background and it's just text over the slideshow. Now I'm trying to change the color of my header font(which includes my nav) color when the image of my slider changes. The problem I'm having is that my slider is purely CSS3 and I can't find a way to detect when the image is being changed to change my header font.

Here's my code for my slider: HTML

<div id="slider">
    <figure>
        <img src="images/eg1.jpg" alt="" class="imageA">
        <img src="images/eg2.jpg" alt="" class="imageB">
        <img src="images/eg3.jpg" alt="" class="imageC">        
    </figure>
</div>

CSS

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

div#slider { 
    overflow: hidden; 
    height: 100vh; 
}
div#slider figure img {
    width: 50%; 
    float: left;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover; 
    background:cover;
}
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 15s slidy infinite; 
}

Here's my Header HTML. I don't think the CSS is needed but if needed let me know I'll put it here:

<header>
    <div id="logo">
        <h2>The Market</h2>
    </div>

    <nav id="headNav">
        <ul>
            <li data-menuanchor="home" class="active"><a href="#home">Home</a></li>
            <span>|</span>
            <li data-menuanchor="collections"><a href="#collections">Collections</a></li>
            <span>|</span>
            <li data-menuanchor="showroom"><a href="#showroom">Showroom</a></li>
            <span>|</span>
            <li data-menuanchor="contact"><a href="#contact">Contact</a></li>
            <span>|</span>
            <li data-menuanchor="about"><a href="#about">About</a></li>
        </ul>
    </nav>
</header>

Finally here's the javascript I used to change the header text color when the image changes. It doesn't work but it's what I tried. I would really appreciate any help on how to fix the script:

<script>
    $('img.imageA').on('load',function(){
        document.getElementById("header").style.color = "red";
    });
</script>

Thanks :)



Solution :

the easy solution would be to use the same animation timing for changing the color of text,try this:

header{animation : 15s colorful}
@keyframes colorful {
0% {  color:blue}
20% { color:blue}
25% { color:purple}
45% { color:purple}
50% { color:purple}
70% { color:purple}
75% { color:pink}
95% { color:pink}
100% { color:cyan}
}

    CSS Howto..

    How do I line up my textboxes without using a table? html/css

    How to get my navigation bar to be vertically centered

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    How to overide CSS style of a class using jquery? [closed]

    How do I replicate the bootstrap mobile navbar toggle (without using bootstrap)?

    How can I add CSS to a form in Rails when the form is rendered in two different locations?

    how to route arrow from right to down css

    CSS - How to remove white
    margins

    how to use namespaces in css?

    How to line up a label to the right of a styled checkbox

    How can browsers resolve icon libraries that aren't specifically referenced in the frontend code?

    jQuery: How to get DIV to slide-off the screen and another to slide in?

    How to render CSS conditionally in page

    How to push up text in CSS?

    How to style