CruiseLiugit/t-scroll

A modern reveal-on-scroll library with useful options and animations. (Animate Elements On Reveal)

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/
  |   ├── style.css
  |   └── t-scroll.min.css
  └── js/
        └── t-scroll.min.css
sass/
  ├── // All Folders Sass Files
  ├── style.scss
  └── t-scroll.min.scss

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

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Copyright and license

Code and documentation copyright 2017, MIT license.