Skip to main content

CSS3 Animations + jQuery Synchronization

[lead]

The 3Clicks Theme use CSS3 animations to provide fast and smooth user experience. Additionally we use jQuery for correct synchronisation. So add an animated shortcode and don’t worry about timing, delays and all animation aspects.

[/lead]

Please Scroll Down a Little Bit

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|

Delayed Columns

1

Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.

2

Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.

3

Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.

4

Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.

Get The Code

[get_the_code]

1

Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.

2

Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.

3

Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.

4

Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.

[/get_the_code] 
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|

Delayed Columns With Animations Inside

1. Run

[progress_circle value=»50″ direction=»right» icon=»flag-checkered»]

2. First is ready, go

[progress_bar value=»55″ direction=»right» icon=»facebook-sign» size=»medium»] [progress_bar value=»65″ direction=»right» icon=»twitter» size=»medium»] [progress_bar value=»75″ direction=»right» icon=»html5″ size=»medium»]

3. Sencond is ready, go

[progress_circle value=»100″ direction=»right» icon=»thumbs-up»]

Get The Code

[get_the_code]

1. Run

[progress_circle value=»50″ direction=»right» icon=»flag-checkered»]

2. First is ready, go

[progress_bar value=»55″ direction=»right» icon=»facebook-sign» size=»medium»] [progress_bar value=»65″ direction=»right» icon=»twitter» size=»medium»] [progress_bar value=»75″ direction=»right» icon=»html5″ size=»medium»]

3. Sencond is ready, go

[progress_circle value=»100″ direction=»right» icon=»thumbs-up»]
[/get_the_code] 
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|

Animated Stats

[numbers size=»medium» start=»1″ stop=»91″ suffix=»/100″]Google Speed Rank [/numbers]
[numbers size=»medium» start=»1″ stop=»100″ suffix=»{78c6cdde556296486c9cd04d4b6b281d15392037e7d8be045144feb29a900581}»]Responsive Design[/numbers]
[numbers size=»medium» start=»1″ stop=»40″ suffix=»+»]Fancy Shortcodes[/numbers]

Get The Code

[get_the_code]
[numbers size=»medium» start=»1″ stop=»91″ suffix=»/100″]Google Speed Rank [/numbers]
[numbers size=»medium» start=»1″ stop=»100″ suffix=»{78c6cdde556296486c9cd04d4b6b281d15392037e7d8be045144feb29a900581}»]Responsive Design[/numbers]
[numbers size=»medium» start=»1″ stop=»40″ suffix=»+»]Fancy Shortcodes[/numbers]
[/get_the_code]