This is a rebound of "[GIF]Animations" from Filip Slováček.
http://dribbble.com/shots/1386563--GIF-Interactions?list=users
A Pen by Craig Richardson on CodePen.
This is a rebound of "[GIF]Animations" from Filip Slováček.
http://dribbble.com/shots/1386563--GIF-Interactions?list=users
A Pen by Craig Richardson on CodePen.
div.container | |
a.icon-menu | |
div.icon__wrap | |
div.icon | |
div.line | |
div.line | |
div.line | |
a.icon-arrow-left | |
div.icon__wrap | |
div.icon | |
div.line | |
div.line | |
div.line | |
a.icon-arrow-right | |
div.icon__wrap | |
div.icon | |
div.line | |
div.line | |
div.line | |
a.icon-cross | |
div.icon__wrap | |
div.icon | |
div.line | |
div.line |
/*================== | |
This is a rebound of "[GIF]Animations" On Dribbble: | |
http://dribbble.com/shots/1386563--GIF-Interactions?list=users | |
==================*/ | |
var index = 0, | |
intervalTime = 3000, | |
$el = $('[class^=icon-]'), | |
timer = setInterval(cycleActiveIcons, intervalTime); | |
function cycleActiveIcons() { | |
if (index === 4) index = 0; | |
$el.eq(index).addClass('active'); | |
setTimeout(function() { | |
$el.removeClass('active'); | |
}, intervalTime/2); | |
index++; | |
} |
@import "compass"; | |
$transitionDuration: .5s; | |
$transitionEffect: ease; | |
body { | |
background-color: #1d1d1f; | |
.container { | |
bottom: 0; | |
height:100px; | |
left: 0; | |
margin: auto; | |
padding: 10px 0; | |
position: absolute; | |
right: 0; | |
text-align:center; | |
top: 0; | |
width: 680px; | |
} | |
} | |
//Square container for icons. | |
[class^="icon-"] { | |
@include transform(rotate(45deg)); | |
display:inline-block; | |
height:90px; | |
width:90px; | |
position: relative; | |
overflow: hidden; | |
background: #545356; | |
margin: 0 40px; | |
&:before { | |
@include transition(top $transitionDuration $transitionEffect, left $transitionDuration $transitionEffect); | |
@include transform(rotate(45deg)); | |
content:""; | |
width:140%; | |
height:140%; | |
position: absolute; | |
background: #fff; | |
top:80%; | |
left:80%; | |
z-index: 10; | |
} | |
&:after { | |
background-color: #1d1d1f; | |
background-clip: padding-box; | |
border: 4px solid rgba(0,0,0,0); | |
bottom:0; | |
@include box-sizing(border-box); | |
content:""; | |
height:100%; | |
width:100%; | |
position: absolute; | |
right:0; | |
@include transform(translateZ(0)); | |
z-index: 20; | |
} | |
&:hover:before, &.active:before{ | |
left:-20%; | |
top:-20%; | |
} | |
&:hover .icon__wrap:after, &.active .icon__wrap:after{ | |
top: -35%; | |
} | |
//White horizontal animation | |
.icon__wrap { | |
position:relative; | |
@include transform(rotate(315deg)); | |
z-index: 30; | |
width: 100%; | |
height: 100%; | |
&:after { | |
z-index: 40; | |
content: ""; | |
width:140%; | |
height: 4px; | |
background: #fff; | |
position: absolute; | |
top: 121%; | |
left: -10%; | |
@include transition(top $transitionDuration $transitionEffect); | |
} | |
//Main wrapper and logic for inner icons. | |
.icon{ | |
@include box-sizing(border-box); | |
@include transition(all $transitionDuration $transitionEffect); | |
.line{ | |
@include transition(all $transitionDuration $transitionEffect); | |
&:after{ | |
@include transition(all $transitionDuration $transitionEffect); | |
} | |
} | |
} | |
} | |
} | |
.icon-menu .icon { | |
padding-top:30px; | |
padding-left:13px; | |
.line { | |
background-color: transparent; | |
height: 4px; | |
margin-bottom: 8px; | |
position: relative; | |
width: 32px; | |
&:after{ | |
background-color: #515153; | |
content: ""; | |
height: 100%; | |
position:absolute; | |
top:0; | |
width: 100%; | |
} | |
&:first-of-type, &:last-of-type, &:nth-of-type(2):after { | |
@include transform(translateX(100%)); | |
} | |
&:nth-of-type(2), &:first-of-type:after, &:last-of-type:after{ | |
@include transform(translateX(-100%)); | |
} | |
} | |
} | |
.icon-arrow-left .icon { | |
padding-top:36px; | |
padding-left:29px; | |
.line { | |
position: relative; | |
width:29px; | |
height: 4px; | |
background-color: #515153; | |
margin-top: 1px;; | |
&:first-of-type { | |
@include transform(rotate(-45deg)); | |
width: 18px; | |
} | |
&:nth-of-type(2) { | |
margin-left:3px; | |
} | |
&:last-of-type{ | |
@include transform(rotate(45deg)); | |
width: 18px; | |
} | |
&:after{ | |
@extend .line; | |
margin: 0; | |
margin-left: 1px; | |
content: ""; | |
position: absolute; | |
background-color: transparent; | |
@include transform(translateX(100%)); | |
} | |
&:first-of-type:after { | |
@include transform(rotate(0)); | |
top:28px; | |
left:150%; | |
} | |
&:nth-of-type(2):after { | |
@include transform(translateX(100%)); | |
margin-left: -5px; | |
} | |
&:last-of-type:after{ | |
@include transform(rotate(0)); | |
bottom:28px; | |
left:150%; | |
} | |
} | |
} | |
.icon-arrow-right .icon{ | |
padding-top:36px; | |
padding-left:25px; | |
.line{ | |
width:29px; | |
height: 4px; | |
background-color: #515153; | |
margin-top: 1px;; | |
&:first-of-type { | |
@include transform(rotate(45deg)); | |
width: 18px; | |
margin-left: 18px; | |
} | |
&:nth-of-type(2) { | |
margin-left:3px; | |
} | |
&:last-of-type{ | |
@include transform(rotate(-45deg)); | |
margin-left: 18px; | |
width: 18px; | |
} | |
&:after{ | |
@extend .line; | |
margin: 0; | |
margin-left: 1px; | |
content: ""; | |
position: absolute; | |
background-color: #1d1d1f; | |
@include transform(translateX(-145%)); | |
margin-right: 1px;; | |
} | |
&:first-of-type:after { | |
@include transform(rotate(0)); | |
top:28px; | |
right:150%; | |
} | |
&:nth-of-type(2):after { | |
margin-left: -12px; | |
} | |
&:last-of-type:after{ | |
@include transform(rotate(0)); | |
top:-28px; | |
right:150%; | |
} | |
} | |
} | |
.icon-cross .icon{ | |
padding-top:42px; | |
padding-left:25px; | |
.line{ | |
position: relative; | |
width:38px; | |
height: 4px; | |
background-color: #515153; | |
&:first-of-type { | |
@include transform(rotate(45deg)); | |
margin-bottom: -4px; | |
} | |
&:last-of-type{ | |
@include transform(rotate(-45deg)); | |
} | |
&:after{ | |
@extend .line; | |
content:""; | |
position: absolute; | |
background-color: transparent; | |
margin-top: 4px; | |
} | |
&:first-of-type:after { | |
top:-100%; | |
left:-100%; | |
@include transform(rotate(0)); | |
} | |
&:last-of-type:after{ | |
top:-100%; | |
left:-100%; | |
@include transform(rotate(0)); | |
} | |
} | |
} | |
//Hover functions | |
.icon-menu:hover, .icon-menu.active{ | |
.icon .line { | |
@include transform(translateX(16px)); | |
background-color: #fff; | |
&:after{ | |
opacity:0; | |
} | |
} | |
} | |
.icon-arrow-left:hover, .icon-arrow-left.active { | |
.icon{ | |
@include transform(translateX(-38px)); | |
.line { | |
background-color: #1d1d1f; | |
&:after{ | |
background-color: #fff; | |
} | |
} | |
} | |
} | |
.icon-arrow-right:hover, .icon-arrow-right.active { | |
.icon{ | |
@include transform(translateX(38px)); | |
.line { | |
background-color: #1d1d1f; | |
&:after{ | |
background-color: #fff; | |
} | |
} | |
} | |
} | |
.icon-cross:hover, .icon-cross.active { | |
.icon { | |
.line { | |
background-color: transparent; | |
&:after{ | |
background-color: #fff; | |
} | |
&:first-of-type { | |
@include transform(rotate(45deg) translateX(100%)); | |
} | |
&:last-of-type{ | |
@include transform(rotate(-45deg) translateX(100%)); | |
} | |
&:first-of-type:after , &:last-of-type:after{ | |
top:-100%; | |
left:-100%; | |
@include transform(rotate(0)); | |
} | |
} | |
} | |
} | |