Need help with CSS animation


Hi,
i am trying to make these"?" marked images to be display:None but as soon as the 1st(Happy)
image hits them,they become visible.

Thank you!
The link to this code

give us you code to figure out what is the problem

Hi,i have uploaded the link to the code.Plz feel free to check out. :slight_smile:

If I understand you well, set z-index property of the fixed images to 0

@bahaa1985 Hey Bahaa,that would only make the first Happy emoji to slide on top of those other fixed image.That’s not what i am trying to accomplish here.
i appreciate your effort tho.Thank You.

Perhaps you will need JavaScript to deal with the collisions.
I don’t know anything about collisions, but they may be able to use a similar technique to controlling elements when scrolling.

Maybe you could use Element.getBoundingClientRect() https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect for each of the smileys, and then if the position of the smiling smiley is the same as another smiley position, the smiley becomes visible.

If not, then I have no idea but these pages are about collision detection.



1 Like

I challenged myself to try and help. This that makes a div appear when another div touches the right edge of it. Someone else may have a more efficient solution as my javaScript is not advanced.
https://codepen.io/leebut/pen/rNxywwm

1 Like

i see.This already freaked me out since i am still struggling with goddamn CSS haha.I appreciate your concern and for your time to search for these links.Thanks man!

Aha!Just saw your code.i believe this certainly require JS for what i am trying to accomplish.

I have no need any help