Author: | ht3aa |
---|---|
Views Total: | 1,556 views |
Official Page: | Go to website |
Last Update: | January 6, 2022 |
License: | MIT |
Preview:

Description:
Mac Animation is a JavaScript library that applies a smooth magnifying effect to elements on mouse hover. Inspired by Mac bottom navigation bar.
How to use it:
1. Load the macNavAnimation.js JavaScript library in the document.
<script src="macNavAnimation.js"></script>
2. Add the CSS class ‘block’ to the parent container. That’s it.
<ul class="block"> <li><i class="fab fa-facebook fa-2x"></i></li> <li><i class="fab fa-twitter fa-2x"></i></li> <li><i class="fab fa-pinterest fa-2x"></i></li> <li><i class="fab fa-linkedin fa-2x"></i></li> <li><i class="fab fa-whatsapp fa-2x"></i></li> <li><i class="fab fa-tumblr fa-2x"></i></li> ... </ul>
3. Customize the hover effect.
const range = 4; const amplifier = 55; const childSmallestValue = 64;