Date range picker tDatePicker

Documents

Getting Started

Include CSS

First, include CSS files into your HTML head:

<link type="text/css" rel="stylesheet" href="./public/theme/css/t-scroll.min.css">

Include Javascript

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>
<div class="zoomIn" data-t-show="3">"..."</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-element

  • Type: string

Define elements for the start of an animation. See demo

t-animate

Add the class [options] to the element or [options] to the script if you want to animate. See demo

data-t-show

  • Type: Number
  • Default: 1

setTimeout or sort elements for the start of an animation from small to large numbers. See demo

t-position

  • Type: Number top bottom
  • Default: 0

The t-position specifies a position element for the start of an animation. See demo

t-delay

  • Type: Number
  • Default: 0

The t-delay property specifies a delay for the start of an animation. See demo

t-duration

  • Type: Number
  • Default: 0

The t-duration property defines how many seconds or milliseconds an animation takes to complete one cycle. See demo

t-infinite

  • Type: string
  • Default: infinite

The t-infinite specifies that the animation should be played infinite times. See demo

t-function

  • Type: string
  • Default: earn
  • linear ease ease-in ease-out ease-in-out step-start step-end initial inherit

The t-function specifies the speed curve of an animation. See demo