Some Favourite Animations

A few animations that I've come across.

 

1) Cool Hamburger Menu

This really turned me on when I saw it. Great idea! I saw it on Science Friday's website as their mobile "hamburger menu". Just click on it. Of course it would open and close a mobile menu.

 

 

 

HTML

<button class="menu-toggle">
<div class="menui top-menu"> </div>
<div class="menui mid-menu"> </div>
<div class="menui bottom-menu"> </div>


</button>

CSS

.menu-toggle {
    z-index: 999;
    position: absolute;
    display: block;
    width: 68px;
    height: 68px;
    margin: 0px;
    top: 0;
    right: 5%;
    background-color: transparent;
}
.menu-toggle .menui {
    background-color: #2f2e2c;
    margin-top: 10px;
    position: absolute;
    transition: 0.6s ease;
        transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.75, 0, 0.29, 1.01);
}
.menu-toggle .top-menu {
    top: 11px;
    width: 85%;
    height: 2px;
    border-radius: 10px;
}
.menu-toggle .mid-menu {
    top: 23px;
    width: 85%;
    height: 2px;
    border-radius: 10px;
}

.menu-toggle .bottom-menu {
    top: 34px;
    width: 85%;
    height: 2px;
    border-radius: 10px;
}

.menu-toggle.open .top-menu {
    top: 24px !important;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.menu-toggle.open .mid-menu {
    opacity: 0;
}

.menu-toggle.open .bottom-menu {
    top: 24px !important;
    -webkit-transform: rotate(-225deg);
    -moz-transform: rotate(-225deg);
    -ms-transform: rotate(-225deg);
    -o-transform: rotate(-225deg);
    transform: rotate(-225deg);
}

Javascript

$('.menu-toggle').click(
function(a) {
  $('.menu-toggle').hasClass("open") ? $('.menu-toggle').removeClass("open") : $('.menu-toggle').addClass("open")
});

2) Image Hover Effects

All done with CSS, the image-hover library is super! http://www.imagehover.io/

HTML

<figure class="imghvr-push-up" style="background-image: url('/images/headers/raindrops.jpg');"><img src="/images/headers/raindrops.jpg" /> 
    <figcaption>
        <div class="portfolio-hover">
            <span class="ph-title">So classy!</span>
        </div>
    </figcaption>
</figure>

CSS

[class^="imghvr-"] figcaption{
    background-color:rgba(19,87,150,0.6)
}
.portfolio-hover{
    display:table;width:100%;height:100%
}
.ph-title{
    font-size:48px;
    font-family:'Poppins';
    color:#fff;
    text-align:center;
    display:table-cell;
    vertical-align:middle
}
.imghvr-push-up figcaption{
    -webkit-transform:translateY(100%);
    transform:translateY(100%)
}
.imghvr-push-up:hover>img{
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%)
}