http://hipertextos.github.io/src/css/anime.css +
Ways to animate
In the HTML markup
Sample
content
content
Markup
<!-- Syntax --> <div class="anm-[animationName]">content</div> <!-- Example --> <div class="anm-tada">content</div> <div class="anm-shake">content</div>
With jquery: on load
Sample
#animation1
Markup
<!-- Snippets -->
<div id="animation1">#animation1</div>
<!-- jQuery -->
<script>
$(document).ready(function(){
$('#animation1').addClass('anm-fadeIn');
});
</script>
With jquery: on click
Sample
#animation2
Markup
<!-- Snippets -->
<button id="clickthis">#clickthis</button>
<div id="animation2">#animation2</div>
<!-- jQuery -->
<script>
$('#clickthis').click(function(){
$('#animation2').toggleClass('anm-fadeIn');
});
</script>
Applying animations in collapse, tabs and modals
Sample
Cite
Cite
Cite
Open dialog
Markup
<!-- Accordion demo -->
<div class="accordion">
<h4>Cite</h4>
<section>Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</section>
<h4>Cite</h4>
<section>Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</section>
<h4>Cite</h4>
<section>Quid te vis alicui præferre; cum plures doctiores te inveniantur, et magis in lege periti. Si vis utiliter aliquid scire et discere: ama nesciri et pro nihilo reputari.</section>
</div>
<script>
$(function() {
$('.accordion section').toggleClass('closed');
$('.accordion h4').click(function(e){
$(this).next('section').toggleClass('closed anm-shake')
.siblings('section:visible').toggleClass('closed anm-shake');
e.preventDefault();
});
});
</script>
<!-- Tabs demo -->
<div class="tabs">
<div class="tab">
<label class="idtrigger tab-active" href="#one">Tab One</label>
<label class="idtrigger" href="#two">Tab Two</label>
<label class="idtrigger" href="#three">Tab Three</label>
</div>
<div class="container">
<div class="tab-panel idpanel closed" id="one">
<p>Stuff for Tab One</p>
</div>
<div class="tab-panel idpanel" id="two">
<p>Stuff for Tab Two</p>
</div>
<div class="tab-panel idpanel" id="three">
<p>Stuff for Tab Three</p>
</div>
</div>
</div>
<script>
// Tabs & sliders
$('.idpanel').toggleClass('closed');
$('.idtrigger').click(function(e){
e.preventDefault();
var currentPanel = $(this).attr('href');
$(this).toggleClass('tab-active').siblings('.idtrigger').removeClass('tab-active');
$(currentPanel).toggleClass('closed anm-fadeIn').siblings('.idpanel:visible').toggleClass('closed anm-fadeIn');
if ($('.idpanel:visible').length) {
} else {
}
});
</script>
<!-- Dialog -->
<a class="button button-modal" href="#warning1">Open dialog</a>
<section class="dialog" id="warning1"><h4>Warning 1</h4><a class="button-close" href="#warning1">X</a></section>
<script>
$(function() {
$('.dialog').toggleClass('closed');
$('.button-modal, .dialog .button-close').click(function(){
var currentDialog = $(this).attr('href');
$('.overlay').toggleClass('closed anm-fadeIn');
$(currentDialog).toggleClass('closed anm-moveFromTop');
});
});
</script>
On scroll page with jquery
On scroll with jQuery (and re-when come back to top).
Sample
Markup
<!-- Snippets -->
<label class="animeinscroll button flat red">.animeinscroll</label>
<label id="animeinscroll">#animeinscroll</label>
<!-- jQuery -->
<script>
// Animations on scroll
// Create a window variable to set the scroll
var win = $(window);
// Create a variable for .anim
var variable1 = $('.animeonscroll');
var variable2 = $('#animeonscroll');
// Apply the animations on scroll
win.scroll(function(event) {
variable1.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass('anm-moveFromLeftFade slow');
} else {
el.removeClass('anm-moveFromLeftFade slow');
}
});
});
win.scroll(function(event) {
variable2.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass('anm-moveFromRightFade slow');
} else {
el.removeClass('anm-moveFromRightFade slow');
}
});
});
</script>
As a slide transitions
Sample
Slides are explained in the next chapter: Slides.