extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'parallax'
  - var parent = 'experimentals'
  - var title = 'Parallax - Experimentals - Spectre.css CSS Framework'
  - var description = 'The Parallax component acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('parallax', 'Parallax')
    p
      small.label.label-secondary CSS ONLY

    include ../_layout/_ad-g.pug

    p
      | The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.

    .docs-demo.columns
      .column.col-sm-12.col-8.col-mx-auto
        .parallax
          .parallax-top-left(tabindex="1")
          .parallax-top-right(tabindex="2")
          .parallax-bottom-left(tabindex="3")
          .parallax-bottom-right(tabindex="4")
          .parallax-content
            .parallax-front
              h2 tvOS parallax demo
            .parallax-back
              img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <div class="parallax">
            <div class="parallax-top-left" tabindex="1"></div>
            <div class="parallax-top-right" tabindex="2"></div>
            <div class="parallax-bottom-left" tabindex="3"></div>
            <div class="parallax-bottom-right" tabindex="4"></div>
            <div class="parallax-content">
              <div class="parallax-front">
                <h2>tvOS parallax demo</h2>
              </div>
              <div class="parallax-back">
                <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
              </div>
            </div>
          </div>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug