Configurable Shadow Animation On Scroll Using jQuery - theawesomeshadow

theawesomeshadow is a jQuery plugin which applies highly configurable shadow animations to card-style layout interface on vertical page scrolling, using CSS3 transform and box-shadow properties.

How to use it:

1. Load jQuery library and the jQuery theawesomeshadow plugin's script at the end of the document so the page loads faster.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="dist/js/jquery.theAwesomeShadow.min.js"></script>

2. Call the plugin with default options on the target cards.

$('.card').theAwesomeShadow();

3. Config the shadow animation on scroll.

var options = {

    // Min Shadow
    minshadow: 5,               

    // Max Shadow    
    maxshadow: 45,                  

    // Scale/Zoom
    zoom: 1.019,                    

    // Tweak (When animation starts and stops)
    tweak: -300,                    

    // Shadow Color
    shadowcolor: 'rgba(0,0,0,0.4)', 

    // Shadow Horizontal Length
    shadowLeftRight: 0,             

    // Shadow Vertical Length
    shadowTopBottom: 2        
          
};

---

This awesome jQuery plugin is developed by binoalien. For more Advanced Usages, please check the demo page or visit the official website.