Doubt in code 🥺 [🅢🅞🅛🅥🅔🅓]

Question

I don't need this blinking effect during image transition 😔

Can someone please help me out to have smooth image change transition in background 🥺

Here is my try

https://code.sololearn.com/Wt7KbVkrCIDq/?ref=app

Thank you sooooooooooooooooooooooooooooooooooooooooooo much all for giving your valuable time and helping me 😊😊

Answer 1

[ Solved ]...may be...🤔
...
...
As ✨The INDIAN✨ said images takes some time to load🤗
...
And Atul🦚 has also commented good to add a loader..
..
..
I'm also telling same Add a swal/alert/preloader ; it will give some time to image for loading & your blinking problem gonna to be solve🙂

(I have added some alerts in below code and see its working 👍🏻)

Else use js to solve your problem
As done by Programmer below⬇️

And ል꙲꙲꙲̵̵͓̫̲̭͔̌̄̄̈́͟͞᭢s҉̑ͯ̌h̶̿̓꙲꙲i꙲꙲ᖽ̿͟͞҈҉҈҉a҈҉҈҉ 🎶🎵 Really your code is amazzing...
...
Harsh
Caleb
Ace🂡 [{TheWaterCoder}]
ÃKR
Alphin K Sajan
Coder
Sick L̲̅i̲̅n̲̅e̲̅ B̶r̶o̶🌡️ [TheBloodCoders]
Have also a good perspective🙏🏻

⬇️Here is my attempt(Blinking effect Solved)😊⬇️

https://code.sololearn.com/Wvf3wKoEIDPT/?ref=app

Answer 2

remove linear in animation

Answer 3

Caleb No ል꙲꙲꙲̵̵͓̫̲̭͔̌̄̄̈́͟͞᭢s҉̑ͯ̌h̶̿̓꙲꙲i꙲꙲ᖽ̿͟͞҈҉҈҉a҈҉҈҉ 🎶🎵 is right , after 1 smooth transition, there is 20 blinking effect between transitions and then smooth further ...

Answer 4

I believe this problem is due to image take time to load first :v
To overcome that use a preloader or image loader so u will see animation after all images in code loaded
U may refer to this 👇

https://code.sololearn.com/WgJfIUJ1tX7j/?ref=app

(I guess that will sort out the problem if not i have another idea too xD)

Coder can u check that preloader is ultimate solution or not?

Answer 5

https://code.sololearn.com/W7hktz55j38o/?ref=app
just added a 6 lines of js
and a div with id cover

happy coding🔥🙌

Answer 6

Mikhail Caleb but not in mine😔

ÃKR still not working 😔

Answer 7

This flash effect is coming because background is white if you change background color of flash change try to use any suitable background so that flash do not look bad

Answer 8

"http://css3.bradshawenterprises.com/cfimg/"
Look at the demo no 3 sis
Here is that code look similar to that code
Atul🦚 preloader is solution but only if she use image tags...
On locally this code not showing any gltich so i can say that blinking effect is becoz of images not loaded....
https://code.sololearn.com/Wvf3wKoEIDPT/?ref=app

ል꙲꙲꙲̵̵͓̫̲̭͔̌̄̄̈́͟͞᭢s҉̑ͯ̌h̶̿̓꙲꙲i꙲꙲ᖽ̿͟͞҈҉҈҉a҈҉҈҉ 🎶🎵 Behana use image tags becoz its so useful becoz once you loaded html elements that you can show then as you want
Eg: you can give class to img tags for smooth transition...

Answer 9

Looks very smooth on my phone🤷‍♂️👍

Answer 10

See
There nothing can be done to avoid that white splash
It is because the images are changing which are obviously from different servers
So it takes a millisecond to get that image from that server
That millisecond time is shown by a white colored ""blink""
So
To avoid that
You might use some background color
Or suitable image

Happy coding

Answer 11

looks very smooth on my phone as well

Answer 12

Its probly the seconds that its on

Answer 13

ል꙲꙲꙲̵̵͓̫̲̭͔̌̄̄̈́͟͞᭢s҉̑ͯ̌h̶̿̓꙲꙲i꙲꙲ᖽ̿͟͞҈҉҈҉a҈҉҈҉ 🎶🎵
You have to wait around 22 seconds before it stops

Answer 14

Harsh
Smart👏👏

Answer 15

ል꙲꙲꙲̵̵͓̫̲̭͔̌̄̄̈́͟͞᭢s҉̑ͯ̌h̶̿̓꙲꙲i꙲꙲ᖽ̿͟͞҈҉҈҉a҈҉҈҉ 🎶🎵 Im working on the code right now

Answer 16

is your internet bad?
maybe it is struggling to keep up?

Answer 17

ል꙲꙲꙲̵̵͓̫̲̭͔̌̄̄̈́͟͞᭢s҉̑ͯ̌h̶̿̓꙲꙲i꙲꙲ᖽ̿͟͞҈҉҈҉a҈҉҈҉ 🎶🎵 I changed the color to pink see if that look good.
https://code.sololearn.com/Wk5L1rFHXdck/?ref=app
If it does not look good jut change the color to what you like

Answer 18

ል꙲꙲꙲̵̵͓̫̲̭͔̌̄̄̈́͟͞᭢s҉̑ͯ̌h̶̿̓꙲꙲i꙲꙲ᖽ̿͟͞҈҉҈҉a҈҉҈҉ 🎶🎵
Try to use DATA: images....
I am not sure...
But give it a try

Answer 19

try this. (you will have to wait a second for it to start)

https://code.sololearn.com/WF7AHDVaJC0F/?ref=app

Answer 20

Alphin K Sajan, strange. i have no idea what is wrong with it then. sorry 😬