Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/crazychicken/t-scroll

A modern reveal-on-scroll library with useful options and animations. (Animate Elements On Reveal)
https://github.com/crazychicken/t-scroll

animated animation bounce clgt css fade flip html javascript lightspeed recommended roll rotate scroll-down slide t-scroll target tuds zoom

Last synced: 6 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/crazychicken/t-scroll
Owner: crazychicken
License: mit
Created: 2017-05-08T03:37:10.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2018-07-13T05:00:17.000Z (over 6 years ago)
Last Synced: 2025-01-10T07:12:28.385Z (11 days ago)
Topics: animated, animation, bounce, clgt, css, fade, flip, html, javascript, lightspeed, recommended, roll, rotate, scroll-down, slide, t-scroll, target, tuds, zoom
Language: HTML
Homepage: http://t-scroll.com
Size: 1020 KB
Stars: 639
Watchers: 27
Forks: 53
Open Issues: 1
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

![enter image description here](http://t-scroll.com/theme/images/about.png)

[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Backers on Open Collective](https://opencollective.com/t-scroll/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/t-scroll/sponsors/badge.svg)](#sponsors)

## 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](https://github.com/crazychicken/t-scroll/archive/master.zip)

## 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:
```html

```

* Include file `t-scroll.min.js` into the footer.
```html

```

* Set HTML
```html

"..."

```

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

"..."

```

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

...

```

## Call the function

```html

Tu.tScroll({
't-element': '.zoomIn'
})

```

## 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]](https://github.com/crazychicken/t-scroll/blob/master/CONTRIBUTING.md).

## Backers

Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/t-scroll#backer)]

## Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/t-scroll#sponsor)]

[downloads-image]: https://img.shields.io/npm/dm/t-scroll.svg
[npm-url]: https://www.npmjs.com/package/t-scroll
[npm-image]: https://img.shields.io/npm/v/t-scroll.svg