@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()