%section.slide#slide1{:'data-type' => 'background', :'data-speed' => '10'}
  %article Simple parallax scrolling is...
%section.slide#slide2{:'data-type' => 'background', :'data-speed' => '10'}
  %article Something new...
%section.slide#slide3{:'data-type' => 'background', :'data-speed' => '10'}
  %article ...beautiful...
%section.slide#slide4{:'data-type' => 'background', :'data-speed' => '10'}
  %article ...exciting...
View Compiled
$white: #fff

.slide
	background-repeat: repeat 
	background-position: 50% 0
	background-attachment: fixed
	min-height: 1000px
	width: 100%
	margin: 0 auto
	max-width: 1920px
	position: relative
	-webkit-box-shadow: 0 0 50px black
	box-shadow: 0 0 50px black
#slide1
	background-image: url(http://lorempixel.com/1920/600/fashion)
#slide2
	background-image: url(http://lorempixel.com/1920/600/sports)
#slide3
	background-image: url(http://lorempixel.com/1920/600/business)
#slide4
	background-image: url(http://lorempixel.com/1920/600/cats)
article
	height: 458px
	position: absolute
	text-align: center
	top: 150px
	width: 100%
	font-size: 80px
	color: $white
	-webkit-text-shadow: 0 0 20px black
	text-shadow: 0 0 20px black
View Compiled
elementInViewport = (el) ->
  boundingRect = el.getBoundingClientRect()
  top = el.offsetTop
  left = el.offsetLeft
  width = el.offsetWidth
  height = el.offsetHeight

  while el.offsetParent
    el = el.offsetParent
    top += el.offsetTop
    left += el.offsetLeft

  (top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset)

$(document).ready ->
  $window = $(window)

  $('.slide').each ->
    $bgobj = $(@)
    $window.scroll ->
      if(elementInViewport($bgobj.get(0)))
        yPos = ($bgobj.offset().top - $window.scrollTop()) / $bgobj.data('speed')
        coords = "50% #{yPos}px"

        $bgobj.css {
          backgroundPosition: coords
        }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js