Magnify Elements On Mouse Hover – Mac Animation

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

Preview:

Magnify Elements On Mouse Hover – Mac Animation

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;

You Might Be Interested In:


Leave a Reply