GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - googleask/t-scroll: A modern reveal-on-scroll library with useful options and animations. (Animate Elements On Reveal)

BranchesTags
Open more actions menu
 
 

Latest commit

 

History

47 Commits
47 Commits

Folders and files

NameName
Last commit message
Last commit date
.github
.github
 
 
html
html
 
 
public/theme
public/theme
 
 
sass
sass
 
 
theme
theme
 
 
.editorconfig
.editorconfig
 
 
.gitignore
.gitignore
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
_config.yml
_config.yml
 
 
gulpfile.js
gulpfile.js
 
 
package.json
package.json
 
 

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 [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

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)

  • 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.

About

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

t-scroll.com

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.