This concept is based on Foundation framework and Animate.css animations. You can play around with the code and achieve different results.
Any animation from Animate.css can be used for the initial services appearance and the reveal animation for the services description. Just change the class after animated with any class from Animate.css:
- For the services boxes
<li class="interactive-service-list hidden animated flipInY" data-service="1"><i class="fi-check styled-icons"></i><br /> Service 1</li> - For the services description
<div id="3" class="interactive-service-content removed animated zoomIn">
You need to have included in your page:
- jQuery
- Foundation
- Animate.css
animated-services.min.js
- hoverIntent jQuery Plug-in - if you want to use inteligent hover detection
- Denislav Popov