полезный миксин для параллакса (.sass)

SASS миксин для параллакса

Источник http://codepen.io/scottkellum/pen/bHEcA

//-- В ФАЙЛ vars.sass --//

// parallax variables
$parallax-perspective: 1 !default
$parallax-element: "body" !default
$parallax-ios: true !default
//-end parallax variables

//-- В ФАЙЛ mixins.sass --//

// parallax mixin 
=parallax-init($perspective: $parallax-perspective, $element: $parallax-element, $parallax-ios: $parallax-ios)  // этот миксин указываем для инициализации параллакс эффекта, для блока, в котором будет реализован сам параллакс (+parallax-init)
  @if $element == "body"
    html, body
      width: 100%
      height: 100%
      margin: 0
      padding: 0
      overflow: hidden

  #{$element}
    overflow: auto
    perspective: $perspective * 1px
    transform-style: preserve-3d

    // Allows for smooth scrolling but disables parallax effects.
    @if $parallax-ios == false
      -webkit-overflow-scrolling: touch

    // Preserve 3D
    &, *
      transform-style: preserve-3d

=parallax($distance: 0, $perspective: $parallax-perspective)  // этот миксин указываем для каждого параллакс изображения в блоке (+parallax(.1))
  transform: translateZ($distance * $perspective * 1px) scale(abs($distance - 1))
  z-index: $distance * 1000
//-end parallax mixin

//-- В файл или header.sass или base.sass --//

// container parameters
+parallax-init // применяем к блоку родителю .containers. Инициализируем эффект.
.containers    // может быть любой класс блока, в котором находятся ихображения для параллакса
 > *           // применяется значение ко всем прямым потомкам (!не ко вложенным тегам или классам прямых потомков)
    position: absolute
//-end container parameters