From ccd1cc598ce458c4eb69c9722681a0a0589fdd09 Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Sat, 6 Aug 2016 14:59:23 +0100 Subject: [PATCH] adding example page --- example/css/custom.css | 6 +++ example/index.html | 95 ++++++++++++++++++++++++++++++++---------- 2 files changed, 79 insertions(+), 22 deletions(-) create mode 100644 example/css/custom.css diff --git a/example/css/custom.css b/example/css/custom.css new file mode 100644 index 0000000..0e0f354 --- /dev/null +++ b/example/css/custom.css @@ -0,0 +1,6 @@ +.column.custom-column { + float: none; + margin-left: auto; + margin-right: auto; + text-align: center; +} diff --git a/example/index.html b/example/index.html index 97c58d5..0f4c51e 100644 --- a/example/index.html +++ b/example/index.html @@ -8,68 +8,119 @@ + +
+
+
+

Hello World.

+ +

Scrollanim is a CSS3 and JavaScript library to create stunning scroll animations that work everywhere.

+ +

It's open-source (MIT), free and easy to use Oh, and it's 1KB.

+ +

+ Star + Fork +

+ +

Want to see a demo? Ok, keep scrolling.

+
+
+
+ +
-
-

Hello World.

+
+

Easy to use

+ +

Scrollanim has many builtin CSS3 animations to use. All you need to do is to add data-kui-anim attribute to your elements.

+ + 
 
+            <div data-kui-anim="fadeIn">
+  Show this with a fadeIn animation.
+</div>
+
-

This page is a "Hello World" of Kissui with the basic CSS files and fonts. You can simply edit this page to start your awesome work. If you need some help hit up the Kissui documentation.

+

Cool, isn't it?

-
-
-

Hello World.

+
+

Advanced mode

+ +

Also, this is possible to add the animations using the JavaScript API.

+ + 
 
+            kissuiScrollAnim.add(element, {
+  'in': 'fadeIn',
+  'out': 'fadeOut'
+});
+
-

This page is a "Hello World" of Kissui with the basic CSS files and fonts. You can simply edit this page to start your awesome work. If you need some help hit up the Kissui documentation.

+

Scrolanim supports all available positions for an element on the page. Also, you can use a compound event name (e.g. in center middle)

-
-
-

Hello World.

+
+

CSS3 Animations

+ +

Scrolanim has many CSS3 animations to use. No JavaScript animations, better performance.

-

This page is a "Hello World" of Kissui with the basic CSS files and fonts. You can simply edit this page to start your awesome work. If you need some help hit up the Kissui documentation.

+

Works on desktop and portable devices perfectly.

-
-
-

Hello World.

+
+

Infinite animation

-

This page is a "Hello World" of Kissui with the basic CSS files and fonts. You can simply edit this page to start your awesome work. If you need some help hit up the Kissui documentation.

+

Also, animations names accept an optional parameter infinite to repeat the animation forever.

-
-

Hello World.

+
+

Perfect event control

+ +

Scrollanim controls all elements with an extra care. You can attach events to almost all possible positions of an element on the page.

-

This page is a "Hello World" of Kissui with the basic CSS files and fonts. You can simply edit this page to start your awesome work. If you need some help hit up the Kissui documentation.

+

For instance, this element appears with a fadeIn animation but also gets a pulse animations when it's in the middle of the page.

-
-

Hello World.

+
+

Did you enjoy?

-

This page is a "Hello World" of Kissui with the basic CSS files and fonts. You can simply edit this page to start your awesome work. If you need some help hit up the Kissui documentation.

-
+

That's great, we are glad you liked it. The next step is to use the CDN networks or download the project. Meanwhile, you can have a look at the documentation page.

+ + Star + Fork +
+ + + +