crazychicken/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 [email protected]: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

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.

t-scroll's Issues

Speed of animation

Hi,

is it possible to set the speed of the animation?
I want to animate two elements with a different speed.

Thanks for your help,
Peter.

The site 503 Service Temporarily Unavailable

Hey, it looks like a cool plugin.
I want to try it, but the site t-scroll.com is unavailable.
Can you please fix it. Thanks!

Invisible when page loads

Hi,
Blocks do not appear without moving scroll when page is loaded?

Uncompatible with IE

The animation is not working in IE when scrolled down. The element has style: opacity : 0.

W3C Validate

Does not pass validation on
https://validator.w3.org/
Attribute t_show not allowed. If t_show replace on data-t_show, this will solve the problem with validation.

Wrong t_elemet in Docs

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

I believe the copy is wrong for t_elemet. Should it be t_element instead?

Scroll only when the whole element show which affect mobile

The scroll effect only happens when the whole div or element show, which sometime would affect long element, but which is pretty bad for mobile as the effect might come in only too late.

Is there a way to trigger the effect as soon as the element is in the view instead of when the whole element is in the view?