A modern reveal-on-scroll library with useful options and animations. (Animate Elements On Reveal)
git clone [email protected]:crazychicken/t-scroll.git
npm install --save-dev t-scroll
npm install --save-dev crazychicken/t-scroll
http://t-scroll.com/t-animate-options.html
http://t-scroll.com/documents.html
<link type="text/css" rel="stylesheet" href="./public/theme/css/t-scroll.min.css">
t-scroll.min.js
into the footer.<script type="text/javascript" src="./public/theme/js/t-scroll.min.js"></script>
<div class="zoomIn">"..."</div>
<div class="zoomIn">"..."</div>
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>
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>
<script type="text/javascript">
Tu.tScroll({
't-element': '.zoomIn'
})
</script>
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';
This project exists thanks to all the people who contribute. [Contribute].
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
Code and documentation copyright 2017, MIT license.