Wall

Make a parallax effect with image or video background

Look at the example. Walls with video and image backgrounds code below.
walls = document.querySelectorAll("[data-kind='wall']")
for wl in walls
	wl.wall()

Yosemite

Time-lapse video project set in Yosemite National Park, 2014

The LIFE, Colin Delehanty

Yosemite

Time-lapse video project set in Yosemite National Park, 2014

The LIFE, Colin Delehanty
You can add a content after <header>
Look at the example. Walls with video and image backgrounds code below.

Yosemite

Time-lapse video project set in Yosemite National Park, 2014

The LIFE, Colin Delehanty
A lot of content here.

Properties

Name Default Description
kind @el.getAttribute( 'data-kind' ) or 'wall' Set walling type.
target @el.getAttribute( 'data-target' ) or '.-thumbnail' String. Selector for the scrolling background element. For example <figure> or <video> or #video-id.
header @el.getAttribute( 'data-header' ) or '.-header' String. Selector for the header inside wall.
headerFade @el.getAttribute( 'data-fade' ) or yes Boolean. Hide header while scrolling out.
speed @el.getAttribute( 'data-speed' ) or 0.7 Number between 0 and 1. 1 – background element stands, 0 – element scrolls as usual.
zoom @el.getAttribute( 'data-zoom' ) or no Boolean. Zoom background element while scrolling.
height @el.getAttribute( 'data-height' ) or '100%' String or Number. Height of the wall. Inside should be measures like % or px. If number than it will use px.
onMobile @el.getAttribute( 'data-on-mobile' ) or no Deactivate wall on mobile devices.

Methods

Method Description
start

Activate wall.

stop

Deativate wall.

refresh

Refresh all positions and sizes.

destroy

Destroy current instance.

Events

Inside each method to get wall element use @ or this in js. Class instance always stores in data attribute of the wall element @data['kitWall'] or this.data['kitWall'] in js. To get wall element do @data['kitWall'].el. To get wall background element do @data['kitWall'].target.
Method Description
beforeactive

Set a function to call it before activate the wall. If it returns deferred.promise(), then wall will not start till deferred.resolve(), and woun't start if deferred.reject().

document.querySelector('.wall').wall
	beforeactive: ->
		d = $.Deferred()

		console.log @
		# The wall will be in the log
		# so you can, for example, add classes
		# to disable the wall

		console.log @data['kitWall']
		# The instance of Wall class will in log
		# so to get wall element you need to do
		wall = @data['kitWall']
		wall._addClass 'some-class'

		# Do something here before activate wall
		# in this case it will start in 2 seconds
		setTimeout ->
			d.resolve()
		, 2000
		# End of your code

		d.promise()

onactive

Set a function to call it after wall started.

failactive

Set a function to call it if starting failed.

beforedeactive

Call this function before wall stopped.

ondeactive

Call this function after wall stopped.

faildeactive

Set a function to call it if stopping failed.