Instructions

First make sure you have jQuery loaded up in your page first, then load multiverseParallax.js into your page. Now all you have to do is apply the proper jQuery functions on the elements of your choosing, and you're done.

For example, if you want to apply the parallax on all elements with class parallax, you can use the following code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="multiverseParallax.js"></script>

<script>
  $('.parallax').multiverseParallax();
</script>

Global settings

Multiverse Parallax allows you to preset values for all your parallax elements and other related things. You can either do that by directly changing settings, or by creating an element with the data contained in it. Said element will be removed once the data has been loaded.

In the first case, you need to define your settings in an object. The key names are different from the names used when using an element to load your data.

var options = { paddingTop: '20px', navScrollOffset: 10 };

$.multiverseParallaxSettings( options );

De instellingen in de tabel hieronder kunnen worden gebruikt door data- toe te voegen, of door een <var> element aan te maken binnen deze sectie met de naam in de name-attribuut:

Parameters

Hier is een volledige lijst van parameters, welke kunnen worden gebruikt door data- toe te voegen:

Voorbeeld - Basis

Dit is een basis-opstelling voor een parallax-achtergrond. data-parallax-image is hier een niet-gedocumenteerde parameter dat kan worden gebruikt, en deze maakt het mogelijk om direct achtergronden toe te voegen. In de volgende voorbeelden wordt dit weggelaten tenzij het nodig is om deze te definiëren.

<section data-background-speed-y="0.3" data-parallax-image="readme-assets/live-concert.jpg" class="parallax">
</section>

Voorbeeld - Patroon

Dit patroon beweegt horizontaal, en heeft tevens een vaste grootte voor het achtergrondplaatje, welke kan worden bereikt door data-background-size in te stellen. Deze werkt het zelfde als de background-size stijlatribuut.

<section data-background-speed-y="0" data-background-speed-x="1" data-background-size="150px 150px" class="parallax">
</section>

Voorbeeld - Veranderend achtergrond bij plakken

Wanneer de achtergrond op een bepaalde positie komt, wanneer de achtergrond op een positie "plakt", verandert de achtergrond. Deze positie wordt bepaald door de data-parallax-stick-x of data-parallax-stick-y parameter. data-parallax-stick-image bepaalt de afbeelding die moet worden weergeven wanneer de achtergrond plakt.

<section data-background-speed-y="0.3" data-parallax-stick-y="before" data-parallax-stick-image="readme-assets/home-office-stick.jpg" data-parallax-image="readme-assets/home-office.jpg" class="parallax">
</section>

Voorbeeld - Pijl

Soms is het nodig dat een stick event op een ander moment wordt getriggert. In dit geval kan worden gebruik gemaakt van data-parallax-trigger-height. Deze kan, net zoals de meeste soortgelijke data-attributen, drie verschillende soorten data aannemen. Wanneer het een numerieke waarde heeft zal het aannemen dat het een percentage moet zijn. In dit geval is het een percentage van de hoogte van het venster, niet van het blok zelf. Er kan ook worden gekozen voor een exacte waarde, welke wordt aangeduid door px achter de waarde te zetten. Wanneer het geen van de vorigen is wordt er aangenomen dat het de waarde moet nemen van een doel-element.

In dit voorbeeld wordt er gekozen voor een percentage, omdat de hoogte van de element 200% de hoogte van het venster is.

De afbeelding is hier tevens geschaald door middel van data-parallax-size-y. Een soortgelijke attribuut is data-parallax-size-x, welke voor de breedte van de huidige element werkt. Wanneer enkel een van beiden wordt ingesteld, past de grootte van het missende attribuut zich aan de ander aan, gelijkend aan wanneer er als grootte auto wordt gebruikt.

<section data-background-speed-y="1" data-parallax-stick-y="after" data-parallax-stick-force="true" data-parallax-size-y="5" data-background-repeat="no-repeat" data-image-size="136.301x133.554" data-parallax-offset-y-percent="45" data-parallax-align-x="center" data-parallax-height="200" data-parallax-trigger-height="100" class="parallax">
</section>

Voorbeeld - Scheur

Mocht het nodig zijn dat er een animatie speelt bij het scrollen, dan kunnen er keyframes worden toegevoegd. Deze worden gedefinieerd in een element met class parallax-keyframes, welke weer elementen bevat met class parallax-keyframe.

<section data-background-speed-y="1" data-parallax-stick-force="true" data-parallax-size-y="100" data-background-repeat="no-repeat" data-image-size="15x58" data-parallax-align-x="center" data-parallax-trigger-height="-50" data-parallax-offset-y-percent="50" class="parallax">
  <object class="parallax-keyframes" data-type="main" data-parallax-animation-length="5">
    <param class="parallax-keyframe" data-frame="0" data-background-image="readme-assets/cracked-1.svg"></param>
    <param class="parallax-keyframe" data-frame="1" data-background-image="readme-assets/cracked-2.svg"></param>
    <param class="parallax-keyframe" data-frame="2" data-background-image="readme-assets/cracked-3.svg"></param>
    <param class="parallax-keyframe" data-frame="3" data-background-image="readme-assets/cracked-4.svg"></param>
  </object>
</section>