periodicjs.component.collection_list-view-scroll

v1.0.0

Published

2 years ago

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

Downloads

0High
0Medium
0Low

yawetse

Periodic Decoupled Framework ui ux dom

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

component.collection_list-view-scroll

component.collection_list-view-scroll

Example

Installation

Usage