Machen Sie CSS-Hintergrundbild kontinuierlich ändern jQuery zu blinzeln

Ich bin auf der Suche nach einer Schleife durch eine Reihe von Hintergrundbildern, die die gleichen sind, aber Farbe ändern, um eine Art Farbwechsel-Effekt nachzuahmen (Ich habe mit eingebetteten SVG-Füllungen versucht und es funktioniert nicht wie benötigt)Machen Sie CSS-Hintergrundbild kontinuierlich ändern jQuery zu blinzeln

Initiale Idee war, Klassen hinzuzufügen und zu entfernen, die die URL des Hintergrundbildes enthalten. Aber ich bin mir nicht sicher, wie ich das anstellen soll? Kann die .click-Funktion durchlaufen, aber ich brauche sie kontinuierlich beim Laden der Seite.

Jede Hilfe sehr geschätzt. Ein großer Dank

HTML:

<h1>Lets make 
    <span class="container--pop"> 
      <span class="container--pop__container"> 
       <span class="text--highlight text--highlight-red">this</span> 
      </span> 
    </span> 
change background. 
</h1>

CSS:

.text--highlight-red { 
    background:url('../images/sprites/brush-stroke.svg'); 
    background-repeat:no-repeat; 
    background-size:100%; 
    height: 1.5em; 
    padding: 0.3em 0.8em 0.5em 0.5em; 
} 

.text--highlight-green { 
    background:url('../images/sprites/brush-stroke-green.svg'); 
    background-repeat:no-repeat; 
    background-size:100%; 
    height: 1.5em; 
    padding: 0.3em 0.8em 0.5em 0.5em; 
} 

.text--highlight-orange { 
    background:url('../images/sprites/brush-stroke-orange.svg'); 
    background-repeat:no-repeat; 
    background-size:100%; 
    height: 1.5em; 
    padding: 0.3em 0.8em 0.5em 0.5em; 
}

JS:

$('.text--highlight').click(function(){ 
     if($(this).hasClass('text--highlight-red')) 
     { 
      $(this).addClass('text--highlight-green').removeClass('text--highlight-red'); 
     } 
     else 
     { 
      $(this).addClass('text--highlight-orange').removeClass('text--highlight-green'); 
     } 
    });

Quelle

2016-04-06 Sofi Smith

Blick in 'setInterval()' –

Sie können durch diese Anordnung Farben in einem Array und die Verwendung Modulo-Operator % mit setInterval Schleife gesetzt.

var colors = ['green', 'red', 'yellow', 'blue']; 
 

 
(function() { 
 
    var i = 0; 
 
    function changeBg() { 
 
    $('div').css('background-color', colors[i]); 
 
    i = (i+1) % colors.length; 
 
    } 
 

 
    setInterval(changeBg, 1000); 
 
})();

div { 
 
    height: 100vh; 
 
    background-color: blue; 
 
    transition: all 0.3s ease-in; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div>

Quelle

2016-04-06 16:45:42

Das ist großartig, aber wie würde ich passieren, wie oft eine Schleife dieses Array (im Nachhinein ist schlecht!) haha Vielen Dank –

Sie könnten einen weiteren Zähler wie diese https://jsfiddle.net/Lg0wyt9u/528/ –

AWESOME hinzufügen. Ich aktualisiere nur die if-Anweisung, da es gelockt werden muss und ein fehlendes Semikolon, aber alle Magie - danke macht alles Sinn :) '( var i = 0; Funktion changeBg() { // Konsole. log ("ändere meine Farben"); $ ('.Text - markieren '). css (' Hintergrundbild ', Farben [i]); if (counter <8) {i = (i + 1)% colors.length; Zähler ++; } } setInterval (changeBg, 300); })(); ' –

CSS3 Lösung:

Verwenden CSS3 Animationen background-color an bestimmten i zu ändern Intervalle.

body { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    background-color: red; 
 
    animation-name: changeColor; 
 
    animation-duration: 2s; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
@keyframes changeColor { 
 
    0% {background-color:red;} 
 
    25% {background-color:yellow;} 
 
    50% {background-color:blue;} 
 
    75% {background-color:green;} 
 
    100% {background-color:red;} 
 
}

<body></body>

Quelle

2016-04-06 16:44:52 Roy

Roy-Lösung ist ein guter Start, aber die Frage zum Ändern der Farbe eines Bildes fragt, nicht die Hintergrundfarbe. Da das OP ausdrücklich gesagt hat, dass die Bilder gleich sind und sie versucht, einen Farbänderungseffekt zu erzielen, schlage ich vor, eine teilweise transparente Überlagerung zu verwenden. Ich habe das vorher Pseudoelement zusammen mit Roys Technik verwendet, um es in this codepen zu tun.

Ein paar Dinge zu beachten:

Der Behälter muss Position relativ sein, so dass die absolut positionierte Overlay innerhalb der Grenzen des Behälters bleiben.
Alle Kinder, die auf dem Overlay angezeigt werden müssen, müssen ebenfalls relativ zur Position sein. Wenn Sie die Position relativ zu h1 entfernen, sehen Sie, dass sie hinter dem Overlay angezeigt wird.

Und hier ist der Code: Er tut dies mit kontinuierlich

<div class="container"> 
    <h1>This is on top of the overlay</h1> 
</div> 


.container { 
    position: relative; 
    display: block; 
    width: 640px; 
    height: 480px; 
    background: url('http://lorempixel.com/image_output/cats-q-c-640-480-1.jpg') no-repeat; 
} 
.container:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    opacity: .3; 

    background-color: red; 
    animation-name: changeColor; 
    animation-duration: 5s; 
    animation-iteration-count: infinite; 
} 

h1 { 
    position: relative; 
    color: #fff; 
    font-family: arial; 
} 

@keyframes changeColor { 
    0% {background-color:red;} 
    25% {background-color:yellow;} 
    50% {background-color:blue;} 
    75% {background-color:green;} 
    100% {background-color:red;} 
}

Quelle

2016-04-06 17:21:43 developering

Machen Sie CSS-Hintergrundbild kontinuierlich ändern jQuery zu blinzeln

Antwort

Verwandte Themen