r8conf2016/sass/parallax.sass
$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)