JSPM

Package Exports

t-scroll

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (t-scroll) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

enter image description here

Quick start t-scroll

Clone the repo: git clone git@github.com:crazychicken/t-scroll.git
Install with npm: npm install --save-dev t-scroll
Install with npm: npm install --save-dev crazychicken/t-scroll
Or download the latest release

Demo

http://t-scroll.com/demo.html

Demo Options

http://t-scroll.com/t-animate-options.html

Documentation

http://t-scroll.com/documents.html

How to use

First, include CSS files into your HTML head:

<link type="text/css" rel="stylesheet" href="./public/theme/css/t-scroll.min.css">

Include file t-scroll.min.js into the footer.

<script type="text/javascript" src="./public/theme/js/t-scroll.min.js"></script>

Set HTML

<div class="zoomIn">"..."</div>
<div class="zoomIn">"..."</div>

If you need setTimeout, you need insert the container attribute data-t-show="..."

<div class="zoomIn" data-t-show="1">"..."</div>
<div class="zoomIn" data-t-show="2">"..."</div>

Or you want to data-t-show run see first screen. You have to add .t-animated

<div class="box-center">
    <div class="zoomIn t-animated" data-t-show="1"> ... </div>
    <div class="zoomIn t-animated" data-t-show="2"> ... </div>
</div>

Call the function

<script type="text/javascript">
    Tu.tScroll({
      't-element': '.zoomIn'
    })
</script>

Options t-animate

bounceIn
bounceOut
bounceUp
bounceDown
bounceLeft
bounceRight
fadeIn
fadeUp
fadeDown
fadeLeft
fadeRight
fadeUpBig
fadeDownBig
fadeLeftBig
fadeRightBig
flip
flipX
flipY
lightSpeedUp
lightSpeedRight
lightSpeedDown
lightSpeedLeft
rollUp
rollRight
rollDown
rollLeft
rotate
rotateUpLeft
rotateUpRight
rotateDownLeft
rotateDownRight
slideUp
slideDown
slideLeft
slideRight
zoomIn
zoomInUp
zoomInLeft
zoomInDown
zoomInRight
zoomOut
zoomOutUp
zoomOutLeft
zoomOutDown
zoomOutRight

Tree

public/
  └── theme/
      └── css/
      |   └── t-scroll.min.css
      └── js/
            └── t-scroll.min.js
sass/
  ├── // All Folders Sass Files
  └── t-scroll.min.scss // @import 'path sass file your project';

Template full feature list

Semantically Correct / Valid HTML Code
HTML5, CSS3
Javascript / JS6
Full project and seed project (build with: Gulp, Sass, Javascript, Npm, Babel)
Cross browser compatible ( Internet Explorer 10+, Firefox, Safari, Opera, Chrome etc. )
W3C Valid source code, properly formatted and commented
Animations CSS3

Creators

Tuds - Crazychicken (CLGT Groups)

website: http://t-scroll.com/
Github: https://github.com/crazychicken/t-scroll
Facebook: https://www.facebook.com/tudscss/
Youtube: https://www.youtube.com/channel/UCDACe-7BFGDucQoxTDfPotw
Twtter: https://twitter.com/mtu_truong

t-scroll