I have a this spinning wheel, what I am trying to do is when the wheel starts spinning the block which is currently in the center should have opacity 100% and the rest is lets say 50% so it will give that highlight effect.
Code in link
Thanks in advance
Block in the center should be highlighted when spinning
4
Answers
Have all the
.card
elements haveopacity: 0.5
. We shall apply theopacity: 1
on the active.card
as needed. To try to keep it as performant as possible, we only listen for active positional change when the spinner is spinning. We userequestAnimationFrame()
to time our checks to the display frame.It’s not exactly what you wanted but it’s close and less heavy on the computing side
How to check overlapping you can find here
jQuery/JavaScript collision detection
But I’m not sure that your solution is correct…
A different approach would be to overlay the cards with a semi transparent grayish color, with the middle bit transparent. That way no extra calculations have to happen.
Here’s a simple snippet – overlaying with a black, transparent, black linear-gradient. Obviously you can alter that to get the effect you want.
Note: the GPU usage on my laptop was 15% when this was running.