{"id":1736,"date":"2013-05-31T11:21:21","date_gmt":"2013-05-31T11:21:21","guid":{"rendered":"http:\/\/3clicks.bringthepixel.com\/?page_id=1736"},"modified":"2013-05-31T11:21:21","modified_gmt":"2013-05-31T11:21:21","slug":"animated-elements","status":"publish","type":"page","link":"https:\/\/blanchon.co.il\/en\/shortcodes\/other\/animated-elements\/","title":{"rendered":"Animated Elements"},"content":{"rendered":"

CSS3 Animations + jQuery Synchronization<\/h2>\n
\n
\n

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.<\/p>\n<\/div>\n

Please Scroll Down a Little Bit<\/h2>\n
|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n<\/pre>\n
Delayed Columns<\/h2>\n
  • \n
    1<\/h3>\n
    Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.<\/p>\n<\/li>\n
  • \n
    2<\/h3>\n
    Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan. <\/p>\n<\/li>\n
  • \n
    3<\/h3>\n
    Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.<\/p>\n<\/li>\n
  • \n
    4<\/h3>\n
    Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.<\/p>\n<\/li><\/ul>\n
    <\/i>Get The Code<\/div>
    \n
    <\/p>\n
    [one_fourth animation="fade_in"]<\/p>\n<h3>1<\/h3>\n
    Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.<\/p>\n
    [\/one_fourth]<\/p>\n
    [one_fourth animation="fade_in"]<\/p>\n<h3>2<\/h3>\n
    Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan. <\/p>\n
    [\/one_fourth]<\/p>\n
    [one_fourth animation="fade_in"]<\/p>\n<h3>3<\/h3>\n
    Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.<\/p>\n
    [\/one_fourth]<\/p>\n
    [one_fourth_last animation="fade_in"]<\/p>\n<h3>4<\/h3>\n
    Aenean neque nulla, tristique in convallis et, lacinia scelerisque purus. Quisque rhoncus, lectus id accumsan.<\/p>\n
    [\/one_fourth_last]<\/p>\n
    <\/div>\n<\/div><\/div><\/div>\n
    |\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n<\/pre>\n
    Delayed Columns With Animations Inside<\/h2>\n
    • \n
      1. Run<\/h3>\n
      50<\/span><\/i>
      <\/div><\/div>\n<\/li>\n
    • \n
      2. First is ready, go<\/h3>\n
      55<\/span><\/i><\/div><\/div><\/div>\n
      65<\/span><\/i><\/div><\/div><\/div>\n
      75<\/span><\/i><\/div><\/div><\/div>\n<\/li>\n
    • \n
      3. Sencond is ready, go<\/h3>\n
      100<\/span><\/i>
      <\/div><\/div>\n<\/li><\/ul>\n
      <\/i>Get The Code<\/div>
      \n
      <\/p>\n
      [one_third animation="fade_in"]<\/p>\n<h3>1. Run<\/h3>\n
      [progress_circle value="50" direction="right" icon="flag-checkered"]<\/p>\n
      [\/one_third]<\/p>\n
      [one_third animation="fade_in"]<\/p>\n<h3>2. First is ready, go<\/h3>\n
      [progress_bar value="55" direction="right" icon="facebook-sign" size="medium"]<\/p>\n
      [progress_bar value="65" direction="right" icon="twitter" size="medium"]<\/p>\n
      [progress_bar value="75" direction="right" icon="html5" size="medium"]<\/p>\n
      [\/one_third]<\/p>\n
      [one_third_last animation="fade_in"]<\/p>\n<h3>3. Sencond is ready, go<\/h3>\n
      [progress_circle value="100" direction="right" icon="thumbs-up"]<\/p>\n
      [\/one_third_last]<\/p>\n
      <\/div>\n<\/div><\/div><\/div>\n
      |\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n|\n<\/pre>\n
      Animated Stats<\/h2>\n
      • \n
        91<\/span>\/100<\/div>
        Google Speed Rank<\/h3>\n<\/div><\/div>\n<\/li>\n
      • \n
        100<\/span>%<\/div>
        Responsive Design<\/div><\/div>\n<\/li>\n
      • \n
        40<\/span>+<\/div>
        Fancy Shortcodes<\/div><\/div>\n<\/li><\/ul>\n
        <\/i>Get The Code<\/div>
        \n
        <\/p>\n
        [one_third animation="fade_in"]<\/p>\n
        [numbers size="medium" start="1" stop="91" suffix="\/100"]Google Speed Rank<\/h3>\n
        [\/numbers]<\/p>\n
        [\/one_third]<\/p>\n
        [one_third animation="fade_in"]<\/p>\n
        [numbers size="medium" start="1" stop="100" suffix="%"]Responsive Design[\/numbers]<\/p>\n
        [\/one_third]<\/p>\n
        [one_third_last animation="fade_in"]<\/p>\n
        [numbers size="medium" start="1" stop="40" suffix="+"]Fancy Shortcodes[\/numbers]<\/p>\n
        [\/one_third_last]<\/p>\n
        <\/div>\n<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
        CSS3 Animations + jQuery Synchronization Please Scroll Down a Little Bit | | | | | | | | | | | | | | | | | | | | Delayed Columns | | | | | | | | | | | | | | | | | | | | Delayed Columns […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":585,"menu_order":505,"comment_status":"closed","ping_status":"closed","template":"g1_template_page_nav_right.php","meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blanchon.co.il\/en\/wp-json\/wp\/v2\/pages\/1736"}],"collection":[{"href":"https:\/\/blanchon.co.il\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blanchon.co.il\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blanchon.co.il\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blanchon.co.il\/en\/wp-json\/wp\/v2\/comments?post=1736"}],"version-history":[{"count":0,"href":"https:\/\/blanchon.co.il\/en\/wp-json\/wp\/v2\/pages\/1736\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/blanchon.co.il\/en\/wp-json\/wp\/v2\/pages\/585"}],"wp:attachment":[{"href":"https:\/\/blanchon.co.il\/en\/wp-json\/wp\/v2\/media?parent=1736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}