Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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.

You can’t perform that action at this time.