Shortcodes – CSS Animations

Shortcodes – CSS Animations

50+ [highlight color=”gray”]useful[/highlight] shortcodes make editing content a snap. Select from simple HTML formatting (like highlights, dropcaps, spacings etc.) to complete content plugs (sliders, maps, tabs etc.) To make things easier, we have an advance inbuilt ‘Shortcode Generator’ so you don’t have to go around hunting for Shortcode syntax (or worse, memorizing each and every option of your favorite shortcode).

[break]

Screenshots


[break]
[one_third][animate style=”left-in”]image-04[/animate][/one_third][one_third]

Animate Images

[smartbreak style=”accent2″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus vulputate sagittis. Sed lorem elit, porttitor nec viverra ac, tempor eget est. Maecenas odio magna, varius vestibulum congue in, tristique a enim. Etiam id tortor in magna pulvinar fermentum. Praesent aliquam, diam vitae vulputate vestibulum, ante tortor vestibulum velit, et molestie augue turpis at erat. Nunc mollis sem elit. Sed malesuada congue erat, pulvinar auctor nisi interdum sit amet. Vivamus eget tincidunt odio.[/one_third][one_third_last][animate style=”right-in”]image-05[/animate][/one_third_last]

[one_fourth][animate style=”top-in”]image-06[/animate][/one_fourth][one_fourth][animate style=”bottom-in”]image-07[/animate][/one_fourth][one_fourth][animate style=”top-in”]image-08[/animate][/one_fourth][one_fourth_last][animate style=”bottom-in”]image-09[/animate][/one_fourth_last]

[break]

Fade In Images (Optional Scaling)

[animate style=”fade-in-scale” align=”left”]image-10[/animate] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum nulla sapien, lobortis eleifend libero cursus pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam blandit dui in auctor tincidunt. Sed non consectetur elit. Phasellus in eros ac tortor euismod condimentum. Etiam euismod tincidunt nulla vel fringilla. Sed sed placerat nisl. Nullam porttitor, turpis in hendrerit interdum, erat felis sollicitudin massa, et interdum sem lacus eu leo. Pellentesque sed dapibus dui. Quisque pretium nibh nec arcu elementum ullamcorper. Nullam ultrices cursus tellus, ut mollis justo vulputate ac. Nulla at convallis erat. In sed ligula vel eros fringilla hendrerit sagittis a tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec venenatis, libero in mattis gravida, arcu purus tincidunt nibh, a sollicitudin erat libero a odio. [animate style=”fade-in” align=”right”]image-11[/animate] Curabitur id vehicula magna. Aenean eu tortor ut arcu ultricies dapibus. Pellentesque in elementum justo. Nullam feugiat imperdiet odio, ut condimentum nulla sagittis vel. Cras vitae quam quis lectus placerat auctor. Maecenas convallis turpis vel dolor ullamcorper volutpat. Quisque tincidunt ultricies rhoncus. Duis sit amet nulla a eros euismod faucibus quis sed magna. Praesent quis velit est. Mauris massa nulla, placerat vel quam vel, tincidunt viverra nibh. Cras vestibulum, felis eu porta tempor, justo nulla iaculis odio, malesuada aliquam urna tellus ut mauris. Donec auctor, tortor mattis laoreet imperdiet, enim lorem adipiscing orci, id mollis neque velit sed augue. Etiam mi dui, tristique ut venenatis at, lobortis vel eros. Fusce et tortor at mi dignissim luctus. Sed aliquet mollis aliquet. Nam ultricies lobortis gravida. Pellentesque ullamcorper ut est ac pulvinar. Cras interdum rhoncus fringilla. Duis eget quam quis mi suscipit bibendum. In aliquam arcu eu orci iaculis tincidunt. Etiam adipiscing sem erat, eget vestibulum urna facilisis nec. In hac habitasse platea dictumst.[clear]

[break]

Animate Text Blocks, Buttons, and More…

[animate style=”right-in” align=”right”][frame_right style=”highlight”]

Some cause happiness wherever they go;
others, whenever they go.Oscar Wilde

[/frame_right][/animate] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan, justo vitae auctor malesuada, diam sapien consequat purus, sit amet gravida lacus massa non neque. Proin elit enim, feugiat nec dignissim sit amet, faucibus non elit. Aliquam erat volutpat. Pellentesque sodales nec tellus sed lobortis. Nam vel nisi eget felis porttitor egestas id ac mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam massa sem, semper quis erat quis, ornare pulvinar magna. Duis mattis in velit quis molestie. Etiam leo nisl, mattis et consequat vitae, facilisis id nunc. In adipiscing posuere sapien, et malesuada nunc venenatis id. Sed luctus malesuada enim, eu pharetra tortor. Nam interdum posuere nibh non venenatis. Pellentesque scelerisque egestas arcu bibendum feugiat. Fusce bibendum tellus ante.[animate style=”left-in” align=”left”][frame_left style=”highlight”]

Black holes are where God
divided by zero.Steven Wright

[/frame_left][/animate]Integer mattis dapibus nisi nec luctus. Sed suscipit libero ut justo molestie, vel dignissim metus suscipit. Phasellus bibendum metus vel orci tristique hendrerit. Curabitur ligula nulla, condimentum quis nulla eu, posuere condimentum massa. Aliquam erat volutpat. Pellentesque ultrices eros et egestas molestie. Nunc at hendrerit nibh. Ut rhoncus leo at placerat semper. Proin est lorem, dapibus in dictum sit amet, iaculis sit amet sapien.

Nunc pulvinar, augue vitae pharetra interdum, odio eros dictum quam, a fermentum metus ligula in est. Cras quis sem varius, scelerisque risus in, scelerisque ipsum. Quisque in cursus dolor. Sed ut volutpat nisi. Pellentesque feugiat luctus metus ac lacinia. Mauris at vulputate enim. Fusce ac sollicitudin mauris. Proin rutrum eu nisl lacinia vestibulum. Sed et augue at ligula gravida pretium in sit amet augue. Quisque mattis ullamcorper lectus.
[one_fourth][animate style=”fade-in-scale” class=”fleft”][dropcap style=”accent1″]1[/dropcap][/animate] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis mi at felis vulputate at[/one_fourth] [one_fourth][animate style=”fade-in-scale” class=”fleft”][dropcap style=”accent2″]2[/dropcap][/animate] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis mi at felis vulputate at[/one_fourth] [one_fourth][animate style=”fade-in-scale” class=”fleft”][dropcap style=”accent1″]3[/dropcap][/animate] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis mi at felis vulputate at[/one_fourth] [one_fourth_last][animate style=”fade-in-scale” class=”fleft”][dropcap style=”accent2″]4[/dropcap][/animate] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis mi at felis vulputate at[/dropcap][/one_fourth_last]

[one_half]Donec feugiat ante sed odio suscipit, vel rhoncus sapien volutpat. Duis dapibus, mi at pellentesque pulvinar, nibh odio scelerisque turpis, quis fermentum metus nunc quis nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam vel feugiat sem. Donec dignissim diam ut enim tristique, ac congue nulla laoreet. Proin eget consequat mauris. Integer interdum nulla sit amet sem imperdiet blandit. Donec rhoncus auctor sapien ut cursus.

[animate style=”top-in” class=”blockdisplay”][button href=”#” align=”center” color=”black” size=”large”]Click Here[/button][/animate]

[/one_half][one_half_last]Nunc molestie felis et dapibus lacinia. Ut pharetra ut enim sed adipiscing. Vivamus tristique nibh eget lectus auctor pulvinar. Nam dolor tellus, faucibus at pretium volutpat, lacinia eget est. Nulla facilisi. Nullam ac facilisis odio, at ornare mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed cursus placerat dui, non lobortis sapien hendrerit nec. Quisque varius volutpat faucibus. Nam pharetra sit amet sapien ut tristique. Duis laoreet commodo orci in.

[animate style=”bottom-in” class=”blockdisplay”][button href=”#” align=”center” color=”pink” size=”large”]To Know More[/button][/animate]

[/one_half_last]

Deja un comentario