Vendor Plugin

Vendor : Jarallax

Smooth parallax scrolling effect for background images, videos and inline elements. Code in pure JavaScript with NO dependencies + jQuery supported. YouTube, Vimeo and Local Videos parallax supported. 


/* 
	:: Vendor Path
	node_modules/jarallax/

	:: Installed
	npm install jarallax

	:: SOW Controller Init
*/	$.SOW.vendor.jarallax.init('.jarallax')

Element

X and Y

This has a little bug – don't load on Ajax, only on regular pages. Refresh to see it in action! All others (image/video) are working without issue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. 


<div class="p-5">

	<p class="lead" data-jarallax-element="-40 50">X and Y</p>
	<p class="lead" data-jarallax-element="-40">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum.
	</p>

</div>

Image

...
...

SMARTY REBORN

EXTRA LIGHTWEIGHT • FULLY SCALLABE • MODERN

Get Smarty Reborn 


<div class="jarallax overlay-dark overlay-opacity-5 d-flex align-items-center justify-content-center text-white" data-speed="1.4">
	
	<!-- parallax image -->
	<img class="jarallax-img" src="demo.files/images/unsplash/covers/nicolas-ramirez-b-9fXiJOooY-unsplash.jpg" alt="...">

	<!-- optional line lenses -->
	<div class="position-absolute absolute-full w-100 overflow-hidden">
		<img class="img-fluid" width="2000" height="2000" src="assets/images/masks/shape-line-lense.svg" alt="...">
	</div>

	<div class="text-center pt--180 pb--180">

		<h1 class="m-0">
			SMARTY REBORN
		</h1>

		<p>
			EXTRA LIGHTWEIGHT &bull; FULLY SCALLABE &bull; MODERN
		</p>

		<p class="mt-5 mb-0">
			<a href="https://wrapbootstrap.com/theme/smarty-website-admin-rtl-WB02DSN1B" class="btn btn-pill btn-light transition-hover-top">
				Get <b>Smarty Reborn</b>
			</a>
		</p>

	</div>

</div>

Local Video

...

SMARTY REBORN

EXTRA LIGHTWEIGHT • FULLY SCALLABE • MODERN

Get Smarty Reborn 


<div class="jarallax h--500 bg-cover overlay-dark overlay-opacity-5 d-flex align-items-center justify-content-center text-white" 
	data-speed="1.4" 
	style="background-image:url('demo.files/video/hd0936.jpg')" 
	data-jarallax-video="mp4:demo.files/video/hd0936.mp4,webm:demo.files/video/hd0936.webm,ogv:demo.files/video/hd0936.ogv">

	<!-- optional line lenses -->
	<div class="position-absolute absolute-full w-100 overflow-hidden">
		<img class="img-fluid" width="2000" height="2000" src="assets/images/masks/shape-line-lense.svg" alt="...">
	</div>

	<div class="text-center pt--180 pb--180">

		<h1 class="m-0 font-weight-light">
			SMARTY REBORN
		</h1>

		<p>
			EXTRA LIGHTWEIGHT &bull; FULLY SCALLABE &bull; MODERN
		</p>

		<p class="mt-5 mb-0">
			<a href="https://wrapbootstrap.com/theme/smarty-website-admin-rtl-WB02DSN1B" class="btn btn-pill btn-warning transition-hover-top">
				Get <b>Smarty Reborn</b>
			</a>
		</p>

	</div>
	
</div>

Youtube Video

...

SMARTY REBORN

EXTRA LIGHTWEIGHT • FULLY SCALLABE • MODERN

Get Smarty Reborn 


<div class="jarallax bg-cover overlay-dark overlay-opacity-5 d-flex align-items-center justify-content-center text-white" 
	data-speed="1.2" 
	style="background-image:url('https://img.youtube.com/vi/ab0TSkLe-E0/maxresdefault.jpg')" 
	data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0">

	<!-- optional line lenses -->
	<div class="position-absolute absolute-full w-100 overflow-hidden">
		<img class="img-fluid" width="2000" height="2000" src="../assets/images/masks/shape-line-lense.svg" alt="...">
	</div>

	<div class="text-center pt--180 pb--180">

		<h1 class="m-0 font-weight-light">
			SMARTY REBORN
		</h1>

		<p>
			EXTRA LIGHTWEIGHT &bull; FULLY SCALLABE &bull; MODERN
		</p>

		<p class="mt-5 mb-0">
			<a href="https://wrapbootstrap.com/theme/smarty-website-admin-rtl-WB02DSN1B" class="btn btn-pill btn-warning transition-hover-top">
				Get <b>Smarty Reborn</b>
			</a>
		</p>

	</div>
	
</div>
Jump To