Skyline

When the skyline element is in visible part of the document, starts animation to show it.

Don't forget to add animation classes to your skyline elements.


...
skylines = document.querySelectorAll("[data-spy='skyline']")
for sky in skylines
	sky.skyline
		delay: ->
			2000 * Math.random()

Let's change animation to -newspaper--.



...
skylines = document.querySelectorAll("[data-spy='skyline']")
for sky in skylines
	sky.skyline
		delay: ->
			2000 * Math.random()

Properties

Name Default Description
spy @el.getAttribute( 'data-spy' ) or 'skyline' Set toggle type of the element.
offset @el.getAttribute( 'data-offset' ) or 5 Number. Vertical offset to start showing scrollspy elements before or after they are visible.
delay @el.getAttribute( 'data-delay' ) or 300 Number or Function, returning number. Delay before showing.
once @el.getAttribute( 'data-once' ) or no Boolean, show just once and don't hide element anymore.
onMobile @el.getAttribute( 'data-on-mobile' ) or no Stop Skyline plugin on mobile devices.

Methods

Method Description
activate

Activate current skyline element.

deactivate

Deactivate current skyline element.

start

Start listening scroll events.

stop

Stop listening scroll effects.

refresh

Refresh sizes and position of the skyline element.

Events

Inside each method to get skyline use @ or this in js. Class instance always stores in data attribute of the skyline element @data['kitSkyline'] or this.data['kitSkyline'] in js.
Event Description
beforeactive

Set a function to call it before start skyline. If it returns deferred.promise(), then skyline will not start till deferred.resolve(), and woun't start at all if deferred.reject(). You can just get data with ajax instead of using deferred.

skylines = document.querySelectorAll(".radio-with-before")
for btn in skylines
	beforeactive: ->
		d = $.Deferred()
		skyline = @data['kitSkyline']
		skyline._addClass '_disabled_'
		setTimeout ->
			d.resolve()
		,2000
		d.promise()

	onactive: ->
		skyline = @data['kitSkyline']
		skyline._removeClass '_disabled_'

	beforedeactive: ->
		d = $.Deferred()
		skyline = @data['kitSkyline']
		skyline._addClass '_disabled_'
		setTimeout ->
			d.resolve()
		,3000
		d.promise()

	ondeactive: ->
		skyline = @data['kitSkyline']
		skyline._removeClass '_disabled_'

onactive

Set a function to call it after skyline start.

failactive

Set a function to call it if start failed.

beforedeactive

Call this function before stop skyline.

ondeactive

Call this function after stop skyline.

faildeactive

Set a function to call it if stop failed.