Crimea

by raskalbass

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://jackrugile.com/jrumble/js/jquery.jrumble.1.3.min.js"></script>
<link rel="stylesheet" href="http://daneden.github.io/animate.css/animate.min.css">
<div class="bigcontainer">
    <div class="logo">
        <img src="https://dl-web.dropbox.com/get/crimea/logo.png?_subject_uid=54070572&w=AAA3RZ84tWhE_vZk_mEbXRpUcl4brmqcJukVF3JJno7vfA" />
    </div>
    <div id="variants">
        <div class="variant v1"> <a href="vt1"><img src="https://dl-web.dropbox.com/get/crimea/car.png?_subject_uid=54070572&w=AAC50GDW1dgK4GyknZRsjvWKmx46VUqQy29Hi9u5UCeY7Q"/></a>

        </div>
        <div class="variant v2"> <a href="vt2"><img src="https://dl-web.dropbox.com/get/crimea/plane.png?_subject_uid=54070572&w=AAC6pFUgrl_c40GLMkepb47mXJhGid5hFvblzqqugXJxVw"/></a>

        </div>
        <div class="variant v3"> <a href="vt3"><img src="https://dl-web.dropbox.com/get/crimea/train.png?_subject_uid=54070572&w=AAAZJzKJYW3_IH08-KWufntnQbKrZDFWgWkKU46QTVORHg"/></a>

        </div>
        <br style="clear: both; margin-top: 20px;" />
    </div>
</div>
<div class="vartext vt1"></div>
<div class="vartext vt2"></div>
<div class="vartext vt3"></div>
<!--верх вправо низ влево-->

CSS

.variant {
    width: 220px;
    float: left;
    height: 220px;
    margin: 10px;
    text-align: center;
    line-height:220px;
    border-radius: 50%;
    border: 3px solid #E91B2B;
    box-shadow: 0 0 0 2px #E91B2B, 0 0 13px #333;
}
.vartext {
    width: 500px;
    margin: 0px auto;
    height: 300px;
    margin-top: 10px;
    display: none;
}
.v2 {
    border: 3px solid #FACE20;
    box-shadow: 0 0 0 2px #FACE20, 0 0 13px #333;
}
.v3 {
    border: 3px solid #2A771F;
    box-shadow: 0 0 0 2px #2A771F, 0 0 13px #333;
}
.vt1 {
    box-shadow: 0 0 0 2px #E91B2B, 0 0 13px #333;
}
.vt2 {
    box-shadow: 0 0 0 2px #FACE20, 0 0 13px #333;
}
.vt3 {
    box-shadow: 0 0 0 2px #2A771F, 0 0 13px #333;
}
.variant img {
    width: 70%;
}
.rotate {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
#variants {
    width: 720px;
    margin: 5px;
}
.logo img {
    width: 100%;
    padding: 20px;
}
.logo {
    background:#1f7774;
    max-width:730px;
}
.bigcontainer {
    margin: 0 auto;
    max-width:730px;
    background: url();
}

JavaScript

$(".variant").hover(function () {
    $this = $(this).children();
    $this.toggleClass('animated bounce');
});
$(".variant").mouseleave(function () {
    $(this).children().trigger('stopRumble');
});
var prevt;
$(".variant a").click(function (e) {

    e.preventDefault();
    var vt = $(this).attr("href");
    vt = '.' + vt + '';
    if ($(prevt).length) {
        $('.vartext').removeClass('animated bounceInLeft');
        $(prevt).addClass('animated bounceOutLeft');
        setTimeout(function () {
        $(prevt).removeClass('animated bounceOutLeft');
        $(prevt).hide();    
        }, 900);
    }


    $('.variant').addClass('animated bounceOutRight');
    setTimeout(function () {
        $(vt).addClass('animated bounceInRight');
        $(vt).show();
    }, 700);
    setTimeout(function () {
        $('.variant').css({
            "margin-top": "10px"
        });
        $('.variant').removeClass('animated bounceOutRight');
        $('.variant').addClass('animated bounceInLeft');
        prevt = vt;
    }, 1700);

});