jQuery.PageScroll3D - plugin for jQuery
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
README.markdown
_config.yml
jquery.mousewheel.min.js
jquery.pageScroll3d.css
jquery.pageScroll3d.js
jquery.pageScroll3d.min.css
jquery.pageScroll3d.min.js

README.markdown

Page Scroll 3D

Example

Just add a link to the css file in your <head>:

<!-- Add the jquery.pageScroll3d.min.css -->
<link rel="stylesheet" href="styles/jquery.pageScroll3d.min.css">

Then add:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script defer src="js/jquery.mousewheel.min.js"></script>
<script defer src="js/jquery.pageScroll3d.min.js"></script>

Make sure that the jquery library and the mousewell plugin are added, otherwise the plugin will not work!

You still need to call $(element).scroll3D(); to initialize plugin on the element.

<main class="main-content">
	<section>
		<h1>Spring</h1>
	</section>
	<section>
		<h1>Summer</h1>
	</section>
	<section>
		<h1>Autumn</h1>
	</section>
	<section>
		<h1>Winter</h1>
	</section>
</main>

<script>
	$(document).ready(function() {
		$('.main-content').scroll3D();
	});
</script>

Information from the h1 tag automatically becomes the button name in the menu.

Copyright (c) 2017 Leon.