ScrollSync Module

Usage

Load the file /modules/miniature.earth.scrollsync.js or copy the code to your script and customize it to your needs.

Methods

Earth.ScrollSync.enable( earth, container, elements, activate )

earth

(EarthInstance) Reference to the earth

container

(HTML ELement) e.g. document.documentElement or document.getElementById('my-scroll-box')

elements

(array) An array of objects with HTML elements and their corresponding location, e.g.

[
	{ element: firstElement, location : { lat: 30.5, lng: 40.1 } },
	{ element: secondElement, location : { lat: 28.2, lng: 72.3 } }
]

You can add custom variables to the objects and access them during the activate callback.

activate

(function) Callback function to handle the change of the active element.
The first parameter gives you the activated element.
The second parameter gives you the deactivated element.

myearth.addEventListener( "ready", function() {
	
	var elements = [];
	
	document.querySelectorAll('.sections').forEach( function(item) {

		var latlng = item.dataset.location.split(',');
	
		var marker = myearth.addMarker( {
			location : { lat: latlng[0], lng: latlng[1] }				
		} );
	
		elements.push( {
			element : item,
			location : { lat: latlng[0], lng: latlng[1] },
			marker : marker	// custom variable
		} );
		
	} );
	
	
	Earth.ScrollSync.enable(
		// earth
		myearth,
		
		// container
		document.documentElement,
		
		// elements
		elements,
		
		// activate
		function(new_element, old_element) {
			if (new_element) {
				new_element.marker.color = 'green';
				new_element.element.classList.add('active');
			}
			if (old_element) {
				old_element.marker.color = 'red';
				old_element.element.classList.remove('active');
			}
		}
	);

} );