Animations #8

by furlann

HTML

<link rel="stylesheet" href="http://krasimirtsonev.com/blog/articles/HTMLAnimations/examples/animate.css">
<script src="http://krasimirtsonev.com/blog/articles/HTMLAnimations/examples/animate.js"></script>
<div class="container animated">
    <div class="star">★</div>
    <span>GIRLS</span>
</div>
<div class="container2 animated">
    <div class="star">★</div>
    <span>BOYS</span>
</div>

    <div id="conteudo">
        <span> conteudo </span>
    </div>

    <div id="conteudo2">
        <span> conteudo2 </span>
    </div>

CSS

.container {
    font-size: 40px;
    background: #C9C9C9;
    padding: 20px;
    width: 100px;
    text-align: center;
    border-radius: 6px;
    margin: 0 auto;
    cursor: pointer;
    line-height: 20px;
}

.container2 {
    font-size: 40px;
    background: #C9C9C9;
    padding: 20px;
    width: 100px;
    text-align: center;
    border-radius: 6px;
    margin: 0 auto;
    cursor: pointer;
    line-height: 20px;
}
.container span {
    display: block;
    margin: 12px 0 0 0;
    font-size: 16px;
    font-weight: bold;
}

.container2 span {
    display: block;
    margin: 12px 0 0 0;
    font-size: 16px;
    font-weight: bold;
}

JavaScript

var el = document.querySelector(".container");
var el2 = document.querySelector(".container2");

var controller = Animate(el);
var controller2 = Animate(el2);

var link = document.getElementById('conteudo');
link.style.display = 'none';

var link2 = document.getElementById('conteudo2');
link2.style.display = 'none';

el.addEventListener("click", function() {
    
    // mixture
    controller
    
    .add("bounceOutRight");
    link.style.display = '';  
});

el2.addEventListener("click", function() {
    
    // mixture
    controller2
    
    .add("bounceOutLeft");
    link2.style.display = '';  
});