003
Card shuffle
Have you ever marveled at the dexterity of dealers shuffling cards? Good news: JavaScript can help us achieve the same effect! In this example, we’ll make cards appear one by one from the bottom of the screen, move them to the center, and fan them out. Are you a casino enthusiast? You’re in the right place.
HTML Structure
The structure here is fairly simple. Each card will be positioned at the edge of a large circle. These circles will rotate to create the fan effect. They’ll be contained within a container div, which will remain pinned throughout the height of the pin-height div.
<div class="pin-height">
<div class="container">
<div class="circles">
<div class="circle">
<div class="card">...</div>
</div>
<div class="circle">
<div class="card">...</div>
</div>
<div class="circle">
<div class="card">...</div>
</div>
...
</div>
</div>
</div>