Scrolling Effects のやつ

sticker.scss

@import "util.scss";

$sticky-area: 100%;
@mixin use-stickers($height){
  $sticky-area: $height;
  body {
    margin: 0;
    height: $height;
    overflow-x: hidden;
  }
}

%sticker {
  float: left;
  position: absolute;
  left: 0;
  top: 0;
  @include vendor((transform-origin, 0 0));
}

@mixin sticker(
  $start-x: 0, $start-y: 0,
  $vel-x: 0, $vel-y: -1,
  $range-from: 0, $range-to: 1,
  // shorthands
  $start: null, $velocity: null, $range: null
){
  @if $start != null { $start-x: nth($start, 1); $start-y: nth($start, 2);}
  @if $velocity != null { $vel-x: nth($velocity, 1); $vel-y: nth($velocity, 2);}
  @if $range != null { $range-from: nth($range, 1); $range-to: nth($range, 2);}

  @extend %sticker;
  > * {
    @extend %sticker;
  }

  @if $vel-x == 0 and $vel-y == -1 {
    // static
    left: $start-x;
    top: $start-y;
  } @else {
    $scale: sqrt($vel-x * $vel-x + ($vel-y + 1) * ($vel-y + 1));
    $sinr: -$vel-x / $scale;
    $cosr: ($vel-y + 1) / $scale;

    $rotate: arctan($sinr / $cosr);

    $range: $sticky-area * ($range-to - $range-from);
    $width: abs($range * $sinr);
    $height: abs($range * $cosr);

    $trans-x: 0;
    $trans-y: -$width * $sinr;
    @if $sinr >= 0 and $cosr > 0 {
      $trans-x: $height * $sinr;
      $trans-y: 0;
    } @else if $sinr > 0 and $cosr <= 0 {
      $rotate: $rotate + $PI;
      $trans-x: -$width * $cosr + $height * $sinr;
      $trans-y: -$height * $cosr;
    } @else if $sinr <= 0 and $cosr < 0 {
      $rotate: $rotate - $PI;
      $trans-x: -$width * $cosr;
      $trans-y: -$width * $sinr - $height * $cosr;
    }

    // set styles
    width: $width / $scale;
    height: $height / $scale;
    @include vendor(
      (transform, translateY($sticky-area * $range-from)
        translate3d($trans-x, $trans-y, 0) rotate($rotate) scale($scale))
    );
    > * {
      @include vendor-prop(position, sticky);
      @include vendor(
        (transform, scale(1 / $scale) rotate(-$rotate)
          translate3d(-$trans-x, -$trans-y, 0) translate($start-x, $start-y))
      );
    }
  }
}

util.scss

// vendor-prefix list
$vendor-prefixes: '-webkit-' '-moz-' '-ms-' '' !default;

// add vendor prefixes
@mixin vendor($list) {
  @if length(nth($list, 1)) != 2 { $list: append((), $list); }
  @each $l in $list {
    $prop: nth($l, 1);
    $value: nth($l, 2);
    @each $p in $vendor-prefixes {
      #{$p + $prop}: $value;
    }
  }
}
@mixin vendor-prop($prop, $value) {
  @each $p in $vendor-prefixes {
    #{$prop}: #{$p + $value};
  }
}


// math
// !!! do not use this !!! use ruby custom functions instead !!!
// ref: https://github.com/scottkellum/Sassy-math
$PI: 3.14159265;

@function sqrt($x) {
  @if $x == 0 { @return 0; }
  $s: 1;
  $t: 0;
  @while $t != $s { $t: $s; $s: ($s + $x / $s) / 2; }
  @return $s;
}
@function arctan($x) {
  @if $x == 0 { @return 0rad; }
  @if $x == 1/0 { @return 0.5rad * $PI; }
  @if $x == -1/0 { @return -0.5rad * $PI; }
  
  $r: $x > 1 or $x < -1;
  @if $r { $x: 1 / $x; }
  $a: 0;
  $i: 10;
  @while $i >= 1 {
    $a: $i * $i * $x * $x / (2 * $i + 1 + $a);
    $i: $i - 1;
  }
  @if $r {
    @return $x * ($PI / 2 / abs($x) - 1 / (1 + $a)) * 1rad;
  } @else {
    @return $x / (1 + $a) * 1rad;
  }
}