Periodicjs.component.collection_list-view-scroll N

component.collection_list-view-scroll

An on scroll effect template that animates the sides of sections once they are in the viewport

Example

Check out example/index.html, the example javascript for the example page is resources/js/example_src.js and in the head section of the example. Full non-js graceful fallback.

Live Demo - http://typesettin.github.io/component.collection_list-view-scroll

Installation

$ npm install periodicjs.component.collection_list-view-scroll

The scroll component is a browserify/commonjs javascript module.

Usage

JavaScript

var ListViewScrollObject = require('periodicjs.component.collection_list-view-scroll'),
	listViewScroller1;
//initialize linotype component after the dom has loaded
window.addEventListener('load',function(){
	listViewScroller1 = new ListViewScrollObject({
		idSelector: 'list-view-scroll'
	});
	//expose your nav component to the window global namespace
	window.listViewScroller1 = listViewScroller1;
});

HTML

<html>
	<head>
  	<title>Your Page</title>
  	<link rel="stylesheet" type="text/css" href="[path/to]/component.collection_list-view-scroll.css">
  	<script src='[path/to/browserify/bundle].js'></script>
	</head>
	<body>
    <div id="list-view-scroll" class="list-view-scroll">
    	<section class="list-view-scroll-section">
      	<article class="list-view-scroll-side-item list-view-scroll-side-left">
      	<h1>Page One </h1>
		    <p>the basic structure, require a linotype class (for css) and sections for each fullpage section</p>
				</article>
        <figure class="list-view-scroll-side-item list-view-scroll-side-right">
          <img src="http://dummyimage.com/600x400/000/fff">
        </figure>
		  </section>
		  <section class="list-view-scroll-section">
        <figure class="list-view-scroll-side-item list-view-scroll-side-left">
          <img src="http://dummyimage.com/600x400/000/fff">
        </figure>
      	<article class="list-view-scroll-side-item list-view-scroll-side-right">
		    <h1>Page Two </h1>
		    <p>Any html content can go here</p>
				</article>
		  </section>
    	<section class="list-view-scroll-section">
      	<article class="list-view-scroll-side-item list-view-scroll-side-left">
      	<h1>Page One </h1>
		    <p>the basic structure, require a linotype class (for css) and sections for each fullpage section</p>
				</article>
        <figure class="list-view-scroll-side-item list-view-scroll-side-right">
          <img src="http://dummyimage.com/600x400/000/fff">
        </figure>
		  </section>
		  <section class="list-view-scroll-section">
        <figure class="list-view-scroll-side-item list-view-scroll-side-left">
          <img src="http://dummyimage.com/600x400/000/fff">
        </figure>
      	<article class="list-view-scroll-side-item list-view-scroll-side-right">
		    <h1>Page Two </h1>
		    <p>Any html content can go here</p>
				</article>
		  </section>
	</body>
</html>

##API

###FULL API DOCUMENTATION

##Development Make sure you have grunt installed

$ npm install -g grunt-cli

Then run grunt watch

$ grunt watch

##Notes

The Navigation Module uses Node's event Emitter for event handling.
The less file is located in resources/stylesheets

Periodic Decoupled Framework ui ux dom

classie util-extend

@infinitebrahmanuniverse/nolb-peri @everything-registry/sub-chunk-2426

1.0.0

10 years ago