Hey,
i am working currently on my random quote machine. I thought about some random images, changing every time someone hits the new quote button. It nearly all worked but the transitions between my images are not smoothy. Does someone got a tip how to add smooth transition between my images?
Link to my pen: https://codepen.io/Chepalos/pen/vgwazm?editors=0010
It might not be the best way, but what I’d do is add the css property “transition” on the opacity to your background. “transition” creates a transition(duh!) when the property added to transition(here the opacity) change. In your javascript, on your button click, you change the opacity to 0(background will fade-out) then create a setTimeout of the time of your transition(so that your image change when the transition is finished), in that setTimemout you change the background-image and when the image is loaded you change the opacity to 1.
I’ll let you search on how to detect that the background-image is loaded, I found the answer on stackoverflow.
I’m not verry good to explain things so I hope it’s clear!
i will try that, but maybe because i will using Ajax for getting my random quotes i can use it to for my changing background image.