LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.container {
  width: 460px;
}
.item {
  color: #fff;
  text-align: center;
  line-height: 75px;
  opacity: 1;
  display: inline-block;
  background-color: #5677fc;
  width: 75px;
  height: 75px;
  margin: 2px;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000;
          perspective: 1000;
}
.visible {
  opacity: 1;
  -webkit-transform: scale(0);
          transform: scale(0);
}
JS
for i in $(".item")
  offset = i.offsetLeft + i.offsetTop
  delay = offset/1000
  # TODO: Calculate delay relative to first element offset, not absolute offset
  # BONUS: Map delay to an easing function
  $(i).html delay
  $(i).css
    'transition-delay': "#{delay*1.318}s"
    'transition-duration': "#{0.3}s"

appear = () ->
  setTimeout (()-> 
               $('.item').addClass('visible')
               disappear()
             ), 1500

disappear = () ->
  setTimeout (()-> 
               $('.item').removeClass('visible')
               appear()
             ), 1500
  
 appear()
Host Instantly Drag and Drop Website Builder

 

Description

http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-hierarchical-timing
Term
Mon, 11/27/2017 - 22:10

Related Codes

Pen ID
Pen ID
Pen ID