Refactored the inspirational card stack designs from Codrops to use ESNext, but mostly to understand how the animations work so I can add it to another project.
Some effect inspiration for card stacks. The idea is to show animation ideas for positive (accept) or negative (reject) feedback on a generic card element.
Reworked Source Demo - this repo
<ul id="stack_example" class="stack stack--example">
<li class="stack__item"><img src="img/1.png" alt="Tree 1" /></li>
<li class="stack__item"><img src="img/2.png" alt="Tree 2" /></li>
<li class="stack__item"><img src="img/3.png" alt="Tree 3" /></li>
<li class="stack__item"><img src="img/4.png" alt="Tree 4" /></li>
<li class="stack__item"><img src="img/5.png" alt="Tree 5" /></li>
<li class="stack__item"><img src="img/6.png" alt="Tree 6" /></li>
</ul>
<div class="controls">
<button class="button button--sonar button--reject" data-stack="stack_example"><i class="fa fa-times"></i><span class="text-hidden">Reject</span></button>
<button class="button button--sonar button--accept" data-stack="stack_example"><i class="fa fa-check"></i><span class="text-hidden">Accept</span></button>
</div>const myStack = new CardStack("example", document.getElementById("stack_example"), options);The individual stacks in the demo can be quickly created by using their specific class in the repo. For example:
const yuda = new Yuda("stack_example");Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".
Read more here: License
Dynamics.js by Michaël Villar
Tree vector designed by Freepik
Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest