APO-Epsilon/apo-website

View on GitHub
sass/parallax.sass

Summary

Maintainability
Test Coverage
$parallax-perspective : 1 !default;
$parallax-element     : "body" !default;
$parallax-ios         : true !default;

html
  width: 100%
  height: 100%
  margin: 0
  padding: 0
  //overflow: hidden

body
  //overflow: hidden
  //overflow: auto
  -moz-perspective: 1px
  -webkit-perspective: 1px
  perspective: 1px
  @include transform-style(preserve-3d)
  *
  @include transform-style(preserve-3d)

@mixin parallax($perspective: $parallax-perspective)
  $distance: 0
  
  @include transform(translateZ($distance * $perspective * 1px) scale(abs($distance - 1)))
  z-index: $distance * 1000

.row
  margin: auto
  :nth-child(1)
    @include parallax(-.4)
  :nth-child(2)
    @include parallax(.2)
  :nth-child(3)
    @include parallax(.3)
  :nth-child(4)
    @include parallax(.1)
  :nth-child(5)
    @include parallax(-2)
  :nth-child(6)
    @include parallax(.4)
  :nth-child(7)
    @include parallax(-1)
  :nth-child(8)
    @include parallax(-.4)
  :nth-child(9)
    @include parallax(.4)
  :nth-child(10)
    @include parallax(-1)