vELRyY

index.html

<div class="page-corner">
  <div class="page-corner-bg"></div>
  <div class="page-corner-txt"></div>
  <div class="page-corner-curl"></div>
</div>

style.scss

@import "bourbon";
$curl-scale: 1.09;
$bg-curl-offset-y: -13px;

$curl-timing-function: ease-in-out;
$curl-duration: 8s;


@mixin curl-keyframes($name, $un-curled, $curled, $part-curled) {
  @include keyframes($name) {
    $j: 0;
    
    $chunks: 6;
    $c: 50% / $chunks;
    
    0% { transform: $un-curled; }
    $j: $j + 1 * $c;
    
    #{$j + 0.00 * $c} { transform: $curled; animation-timing-function: ease-out; }
    #{$j + 1.0 * $c} { transform: $curled; }
    #{$j + 2.8 * $c} { transform: $un-curled; animation-timing-function: ease-in-out; }
    $j: $j + 3.8 * $c;

    #{$j + 0.00 * $c} { transform: $un-curled; }
    #{$j + 0.30 * $c} { transform: $curled; animation-timing-function: ease-out; }
    #{$j + 0.70 * $c} { transform: $part-curled; animation-timing-function: ease-in; }
    $j: $j + 0.7 * $c;
    
    #{$j + 0.00 * $c} { transform: $part-curled; }
    #{$j + 0.30 * $c} { transform: $curled; animation-timing-function: ease-out; }
    #{$j + 1.10 * $c} { transform: $un-curled; animation-timing-function: ease-in; }
    
    100% { transform: $un-curled; }
  
  }
}

@include curl-keyframes(curl-bg, rotate(-36.87deg), 
                                 rotate(-40deg) translateY($bg-curl-offset-y),
                                 rotate(-36.87deg + (-(40deg - 36.87deg)/2)) translateY($bg-curl-offset-y/2));

@include curl-keyframes(curl-bg-pattern, rotate(0) translateY($bg-curl-offset-y),
                                         rotate(40 - 36.87deg) translateY(0),
                                         rotate((40 - 36.87deg)/2) translateY($bg-curl-offset-y/2));

.page-corner-bg {
  width: 300px;
  height: 300px;
  background: #6A707C;
  
  position: fixed;
  top: 100%;
  left: 100%;
  margin-top: -90px;
  margin-left:-113px;
  
  transform: rotate(-36.87deg);
  
  @include animation-name(curl-bg);
  @include animation-duration($curl-duration);
  @include animation-iteration-count(infinite);
  
  
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkYGCQBOLnQAwGjDAGNgGwSgwVAE+2AgXahLM7AAAAAElFTkSuQmCC);
    
    @include animation-name(curl-bg-pattern);
    @include animation-duration($curl-duration);
    @include animation-iteration-count(infinite);
  }
}


$cs: $curl-scale - 1;
$cs2: ($curl-scale * 1.125) - 1;
@include curl-keyframes(curl-curl, scaleX(1) scaleY(1),
                                   scaleX($curl-scale) scaleY($curl-scale * 1.125),
                                   scaleX(1 + $cs/2) scaleY(1 + $cs2 / 2));

.page-corner-curl {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 299px;
  height: 275px;
  background: url(http://f.cl.ly/items/3d2H3V0j210s2F1t032X/curl.png) bottom right no-repeat;
  
  transform-origin: bottom right;
  
  @include animation-name(curl-curl);
  @include animation-duration($curl-duration);
  @include animation-iteration-count(infinite);
}



.page-corner-txt {
  position: fixed;
  bottom: 0;
  right: 0;
  margin-bottom: 10px;
  margin-right: 10px;
  background: url(http://f.cl.ly/items/3A1l303M1P2S1i1K3d3V/txt.png) center center no-repeat;
  height: 46px;
  width: 52px;
}

vELRyY.markdown

vELRyY

A Pen by Juan Patten on CodePen.

License.