Scroll Content Presenter

It is an extension that allows you to create an unique and beautiful style of navigation , showing the contents of your site through animations and colors to engage your visitors. Scroll Content Presenter builds the navigation menu for you based on the structure of your HTML. Scroll down for quick start...

Description説明

You will have many ways to present your content

Steps

Files needed

Include the following scripts and style sheet in the head tags of your document

1. Installation組込

These files are necesary

Include blocks of content. Each interaction is composed by a block with the following structure:

2. Add blocks of content

You can copy and paste the block and modify it whith your CONTENT, TITLE and DESCRIPTION

nav-control part

Here you can specify the content of navigation menu

h2 especify the title of menu item

p especify the content

data-background especify the background color of navigation bar

3. Customize navigation menuカスタマイズ

Changes color as you go

In the area of the orange circle will show CONTENT, in the area of the blue circle will show TITLE and DESCRIPTION

Result結果

Note the use of classes "presenter" and "nav-control"

Animations

You can specify the animation by adding the following attributes

data-appear especify the type of animation

data-easing especify the easing of animation

data-direction especify the direction of animation

4. Choose animationsアニメーション

CSS3 animations only works in modern browsers!

Calling Scroll Content Presenter

Call SCP in the head tag section

5. Call Scroll Content Presenter呼込み

To call Scroll Content Presenter use the follwing lines

Options

Yo can especify scroll speed, background animation, offset, easing and container class

containerClass especify the class of each block of content

navigation navigation type, can be vertical or horizontal

speed scroll speed

easing scroll easing

offSetLeft horizontal offset

offSetTop vertical offset

animateBg background animation

Optionsオプション

If you select horizontal navigation is important that the content of your document has a horizontal structure

data-appear

data-appear can have the animations:

blind, bounce, clip, drop, fade, puff, pulsate, scale, size, slide, move, color, shake, visible and also for modern browsers:

rotate, perspective, css3 flash, css3 tada, css3 swing, css3 wobble, css3 flip, css3 flipInX, css3 flipInY, css3 fadeInUp, css3 fadeInDown, css3 fadeInLeft, css3 fadeInRight, css3 fadeInUpBig, css3 fadeInDownBig, css3 fadeInLeftBig, css3 fadeInRightBig, css3 rotateIn, css3 rotateInUpLeft, css3 rotateInDownLeft, css3 rotateInUpRight, css3 rotateInDownRight, css3 rollIn, css3 lightSpeedIn, css3 wiggle.

*CSS3 animations dont require data-direction, data-easing attributes

data-direction

up, down, right, left, horizontal, vertical

data-easing

easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce.

Reference参考

Posible values