Demos:
- Simple text paragraphs demo: https://s3-ap-southeast-1.amazonaws.com/portfolio-giang-nguyen/cascadingDivs/text-sample/index.html
- Real-life banner with gif & buttons scenario: https://s3-ap-southeast-1.amazonaws.com/portfolio-giang-nguyen/cascadingDivs/banner-sample/index.html
Sample usage:
- Include your favorite version of jQuery
- Include cascadingDivs.js
- Wrap your contents in blocks (or any kind of html element, if you like to live dangerously)
- Call the plugin
<script> $(function() { $('#cascade-div-container').cascadingDivs(); }); </script> <div id="cascade-div-container"> <div> ... </div> <div> ... </div> </div>You can customize your child block selector & sliding time:
<script> $(function() { $('#cascade-div-container').cascadingDivs({ divSelector: '.cascading-block', slideTime: 2 // seconds }); }); </script> <div id="cascade-div-container"> <img class="cascading-block" ... /> <p class="cascading-block"> ... </p> </div>See full source code of working demos in text-sample/index.html & banner-sample/index.html
