Skip to content

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

License

Notifications You must be signed in to change notification settings

crazychicken/t-scroll

Repository files navigation

enter image description here

NPM version Downloads Backers on Open Collective Sponsors on Open Collective

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)

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.