Fading background image with javascript on image switch

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP

Fading background image with javascript on image switch



I have three images which my two div's switch between. However, the animation appears too rough. How do I apply a fade right before the switch?


<div class="my-images">
<div id="image-1"></div>
<div id="image-2"></div>
</div>


<script>
function displayNextImage()
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("image-1").style.backgroundImage = images[x];
document.getElementById("image-2").style.backgroundImage = images[x];


function startTimer()
setInterval(displayNextImage, 10000);


var images = ,
x = 0;
images[0] = "url('images/snow.jpeg')";
images[1] = "url('images/nike.jpeg')";
images[2] = "url('images/motor.jpeg')";
</script>



This loops continuously so I do not want it just fading in on the first load.




2 Answers
2



Without JQuery you'll have cross-browser compatibility issue.
So i suggest you to use JQuery to achieve this.


<div class="my-images">
<div class="my-image" id="image-1"></div>
<div class="my-image" id="image-2"></div>
</div>


<script>
function displayNextImage()
$("#image-" + x).css('backgroundImage', images[x]).show('slow');
x++;


var images = ,
x = 0;
images[0] = "url('images/snow.jpeg')";
images[1] = "url('images/nike.jpeg')";
images[2] = "url('images/motor.jpeg')";
</script>



And you have to add this to css:


.my-image
display:none;



In case you not use display: block to you element:
Your CSS will be:


display: block


.my-image
display:whatYouWant;



Then need add the document ready() function and change show() to fadeIn():


ready()


show()


fadeIn()


$(document).ready(function()
$(".my-image").hide();
);

function displayNextImage()
$("#image-" + x).css('backgroundImage', images[x]).fadeIn('slow');
x++;



This will work because fadeIn() set to display the previous value.


fadeIn()



If you want div visible before image adding, remove $(document).ready() call and edit displayNextImage():


$(document).ready()


displayNextImage()


function displayNextImage()
$("#image-" + x).hide().css('backgroundImage', images[x]).fadeIn('slow');
x++;





I understand what you did but on load it makes the divs dissapear then reappear after the timer with the new image. I do not want the divs to dissapear on load.
– James
9 hours ago





check edited answer
– Frighi
9 hours ago





On load the div is still missing and this only fades slow the first time after that it doesn't anymore then it just changes the pictures. Thanks for the help anyway.
– James
9 hours ago





Ops, I didn't understand you want visible divs before images, I edited answer again
– Frighi
9 hours ago





OMG I love you thank you.
– James
8 hours ago



You can do it with CSS animation, for each cycle:



1) swap the image sources like you are already doing



2) reset the fade in animation, more info here



3) increment your index




const imgs = [
'https://source.unsplash.com/iMdsjoiftZo/100x100',
'https://source.unsplash.com/ifhgv-c6QiY/100x100',
'https://source.unsplash.com/w5e288LU8SU/100x100'
];

let index = 0;

const oldImage1 = document.getElementById('oldImage1');
const newImage1 = document.getElementById('newImage1');
const oldImage2 = document.getElementById('oldImage2');
const newImage2 = document.getElementById('newImage2');

window.setInterval(() =>
// put new image in old image
oldImage1.src = newImage1.src;
oldImage2.src = newImage2.src;

// Set new image
newImage1.src = imgs[index];
newImage2.src = imgs[index];

// reset animation
newImage1.style.animation = 'none';
newImage1.offsetHeight; /* trigger reflow */
newImage1.style.animation = null;
newImage2.style.animation = 'none';
newImage2.offsetHeight; /* trigger reflow */
newImage2.style.animation = null;

// increment x
index = index + 1 >= imgs.length ? 0 : index + 1;
, 1500);


.parent
position: relative;
top: 0;
left: 0;
float: left;


.oldImage1
position: relative;
top: 0;
left: 0;


.newImage1
position: absolute;
top: 0;
left: 0;


.oldImage2
position: relative;
top: 0;
left: 100;


.newImage2
position: absolute;
top: 0;
left: 100;


.fade-in
animation: fadein 1s;


@keyframes fadein
from opacity: 0;
to opacity: 1;


<div class="parent">
<img id="oldImage1" class="oldImage1" src="https://source.unsplash.com/ifhgv-c6QiY/100x100" />
<img id="newImage1" class="newImage1 fade-in" src="https://source.unsplash.com/w5e288LU8SU/100x100" />
</div>
<div class="parent">
<img id="oldImage2" class="oldImage2" src="https://source.unsplash.com/ifhgv-c6QiY/100x100" />
<img id="newImage2" class="newImage2 fade-in" src="https://source.unsplash.com/w5e288LU8SU/100x100" />
</div>






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

Executable numpy error

Image
Clash Royale CLAN TAG #URR8PPP Executable numpy error I'm trying to create an executable file for my code. I've already tried with cx_Freeze and with pyinstaller. Both gives me the same error, which is: "Missing required dependencies 0.format(missing_dependencies))" PS C:UsersGustavoDesktopbuildexe.win32-3.6> python AgendaOficial.py C:UsersGustavoAppDataLocalProgramsPythonPython36-32python.exe: can't open file 'AgendaOficial.py': [Errno 2] No such file or directory PS C:UsersGustavoDesktopbuildexe.win32-3.6> .AgendaOficial.exe Traceback (most recent call last): File "C:UsersGustavoAppDataLocalProgramsPythonPython36-32libsite-packagescx_Freezeinitscripts__startup__.py", line 14, in run module.run() File "C:UsersGustavoAppDataLocalProgramsPythonPython36-32libsite-packagescx_FreezeinitscriptsConsole.py", line 26, in run exec(code, m. dict ) File "AgendaOficial.py", line 8, in File "C:UsersGustavoAppDataLocal
Read more

PySpark count values by condition

Image
Clash Royale CLAN TAG #URR8PPP PySpark count values by condition I have a DataFrame, a snippet here: [['u1', 1], ['u2', 0]] basically one string ('f') and either a 1 or a 0 for second element ('is_fav'). What I need to do is grouping on the first field and counting the occurrences of 1s and 0s. I was hoping to do something like num_fav = count((col("is_fav") == 1)).alias("num_fav") num_nonfav = count((col("is_fav") == 0)).alias("num_nonfav") df.groupBy("f").agg(num_fav, num_nonfav) It does not work properly, I get in both cases the same result which amounts to the count for the items in the group, so the filter (whether it is a 1 or a 0) seems to be ignored. Does this depend on how count works? count 1 Answer 1 There is no filter here. Both col("is_fav") == 1 and col("is_fav") == 0) are just boolean expressions and count doesn't really care about their value as long a
Read more

Trying to Print Gridster Items to PDF without overlapping contents

Image
Clash Royale CLAN TAG #URR8PPP Trying to Print Gridster Items to PDF without overlapping contents I want to print gridster items to pdf using chome browser. Unfortunately the item overlaps on next page. Is there any way to make gridster item go to next page if it doesnt fit in the current page when printing to pdf? Screenshot By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Read more