crazychicken / T Scroll
Licence: mit
A modern reveal-on-scroll library with useful options and animations. (Animate Elements On Reveal)
Stars: ✭ 642
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to T Scroll
Zoom
Javascript library to do pinch zoom that preserves scale and rotation correctly.
Stars: ✭ 130 (-79.75%)
Mutual labels: zoom, rotate
Extended image
A powerful official extension library of image, which support placeholder(loading)/ failed state, cache network, zoom pan image, photo view, slide out page, editor(crop,rotate,flip), paint custom etc.
Stars: ✭ 1,021 (+59.03%)
Mutual labels: zoom, rotate
React Zmage
一个基于 React 的可缩放图片控件 | A scalable image wrapper power by react
Stars: ✭ 713 (+11.06%)
Mutual labels: slide, zoom
Photo view
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.
Stars: ✭ 1,280 (+99.38%)
Mutual labels: zoom, rotate
Flutter advanced networkimage
flutter advanced network image provider
Stars: ✭ 282 (-56.07%)
Mutual labels: zoom, rotate
React Native Modal
An enhanced, animated, customizable Modal for React Native.
Stars: ✭ 4,671 (+627.57%)
Mutual labels: animated
Buttonprogressbar Ios
A small and flexible (well documented) UIButton subclass with animated loading progress, and completion animation.
Stars: ✭ 479 (-25.39%)
Mutual labels: animated
Bigslide.js
⚠️**DEPRECATED**⚠️ A tiny slide panel navigation jQuery plugin with big dreams
Stars: ✭ 415 (-35.36%)
Mutual labels: slide
Hooper
🎠 A customizable accessible carousel slider optimized for Vue
Stars: ✭ 561 (-12.62%)
Mutual labels: slide
Ttsegmentedcontrol
An elegant, animated and customizable segmented control for iOS created by Tapptitude
Stars: ✭ 471 (-26.64%)
Mutual labels: animated
Pympress
Pympress is a simple yet powerful PDF reader designed for dual-screen presentations
Stars: ✭ 450 (-29.91%)
Mutual labels: slide
Talkie
Simple slide presentation library. Responsive scaling & markdown ready.
Stars: ✭ 500 (-22.12%)
Mutual labels: slide
React Native Svg Animated Linear Gradient
A wrap SVG component for animated linear gradient
Stars: ✭ 418 (-34.89%)
Mutual labels: animated
Pagepiling.js
pagePiling plugin by Alvaro Trigo. Create a scrolling pile of sections. http://alvarotrigo.com/pagePiling/
Stars: ✭ 3,993 (+521.96%)
Mutual labels: slide
Yeetgif
gif effects CLI. single binary, no dependencies. linux, osx, windows. #1 workplace productivity booster. #yeetgif #eggplant #golang
Stars: ✭ 467 (-27.26%)
Mutual labels: zoom
Ng Pageslide
AngularJS sliding panel for serving additional content from off the page
Stars: ✭ 464 (-27.73%)
Mutual labels: slide
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
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.jsinto 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 attributedata-t-show="..."
<div class="zoomIn" data-t-show="1">"..."</div>
<div class="zoomIn" data-t-show="2">"..."</div>
- Or you want to
data-t-showrun 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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].