Hong Kong City Skyline
Scroll Animation
github
▲
Fade
Fade Up

<div data-sad="fade-up"><div>

Fade Down

<div data-sad="fade-down"><div>

Fade Left

<div data-sad="fade-left"><div>

Fade Right

<div data-sad="fade-right"><div>

Fade Up Left

<div data-sad="fade-up-left"><div>

Fade Up Right

<div data-sad="fade-up-right"><div>

Fade Down Left

<div data-sad="fade-down-left"><div>

Fade Down Right

<div data-sad="fade-down-left"><div>

Transition Duration

Fast

<div data-sad="fade-down" data-duration="fast"></div>

Normal

<div data-sad="fade-down" data-duration="normal"></div>

Slow

<div data-sad="fade-down" data-duration="slow"></div>

Flip
Flip Up

<div data-sad="flip-up"></div>

Flip Down

<div data-sad="flip-down"></div>

Flip Left

<div data-sad="flip-left"></div>

Flip Right

<div data-sad="flip-right"></div>

Zoom
Zoom In

<div data-sad="zoom-in"></div>

Zoom In Up

<div data-sad="zoom-in-up"></div>

Zoom In Down

<div data-sad="zoom-in-down"></div>

Zoom In Left

<div data-sad="zoom-in-left"></div>

Zoom In Right

<div data-sad="zoom-in-right"></div>

Zoom Out

<div data-sad="zoom-out"></div>

Zoom Out Up

<div data-sad="zoom-out-up"></div>

Zoom Out Down

<div data-sad="zoom-out-down"></div>

Zoom Out Left

<div data-sad="zoom-out-left"></div>

Zoom Out Right

<div data-sad="zoom-out-right"></div>

Fill Mode
Forwards

<div data-sad="fade-in" data-fill-mode="forwards"></div>

Clip (experimental)
Clip Circle

<div data-sad="clip-circle"></div>

Clip Rectangle

<div data-sad="clip-rect"></div>

CDN
CSS Stylesheet
copied!
Script
copied!