{"id":993,"date":"2014-11-14T03:12:39","date_gmt":"2014-11-14T03:12:39","guid":{"rendered":"http:\/\/stopdesign.cn\/demo\/?page_id=993"},"modified":"2016-03-13T16:33:00","modified_gmt":"2016-03-13T16:33:00","slug":"page-transition","status":"publish","type":"page","link":"https:\/\/stopdesign.cn\/demo\/page-transition\/","title":{"rendered":"Page Transition"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row css=&#8221;.vc_custom_1457886665618{padding-bottom: 20px !important;}&#8221;][vc_column]<div class=\"cq-fullscreen-intro \" data-backgroundtype=\"image\" data-image=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/11\/8bc72ed71.jpg\" data-textcolor=\"\" data-textsize=\"\" data-textfamily=\"\" data-backgroundcolor=\"\" data-textposition=\"\" data-textclickable=\"\" data-imagerepeat=\"\" data-containerheight=\"\" data-scrollto=\"\" data-scrolloffset=\"\" data-scrollspeed=\"\"><span class=\"cq-intro-text\"><span class=\"intro-text\">Select a page out animation below<\/span><i class=\"fa fa-chevron-down\"><\/i><\/span><\/div>[vc_row_inner css=&#8221;.vc_custom_1457886740430{padding-top: 40px !important;}&#8221;][vc_column_inner][vc_column_text]The page in animation is random in this demo, you can reload the page to see a different page animation.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_text_separator title=&#8221;Select a page out animation:&#8221;][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"fade-out-up-sm\">Fade out up small<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"fade-out-up\">Fade out up<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"fade-out-up-lg\">Fade out up large<\/a>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"fade-out-right-sm\">Fade out right small<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"fade-out-right\">Fade out right<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"fade-out-right-lg\">Fade out right large<\/a>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"fade-out-down-sm\">Fade out down small<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"fade-out-down\">Fade out down<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"fade-out-down-lg\">Fade out down large<\/a>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"fade-out-left-sm\">Fade out left small<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"fade-out-left\">Fade out left<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"fade-out-left-lg\">Fade out left large<\/a>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"zoom-out-sm\">Zoom out small<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"zoom-out\">Zoom out<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"zoom-out-lg\">Zoom out large<\/a>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"rotate-out-sm\">Rotate out small<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"rotate-out\">Rotate out<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"rotate-out-lg\">Rotate out large<\/a>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"flip-out-x-fr\">Flip X far<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"flip-out-x\">Flip X<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"flip-out-x-nr\">Flip X near<\/a>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"flip-out-y-fr\">Flip Y far<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"flip-out-y\">Flip Y<\/a>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]<a class=\"vc_btn vc_btn_blue vc_btn-blue vc_btn_sm vc_btn-sm vc_btn_rounded\" href=\".\" data-animsition-out=\"flip-out-y-nr\">Flip Y near<\/a>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<div class=\"cq-animsition\" data-animationmode=\"normal\" data-pagein=\"fade-in-down\" data-pageout=\"fade-out-up\" data-overlayin=\"overlay-slide-in-top\" data-overlayout=\"overlay-slide-out-top\" data-pageinspeed=\"1500\" data-pageoutspeed=\"800\" data-linkelement=\"\" data-overlaycolor=\"\" data-sitewrapper=\"\"><\/div>[\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1457886683962{padding-top: 20px !important;}&#8221;][vc_column][vc_row_inner][vc_column_inner width=&#8221;1\/2&#8243;][vc_button2 title=&#8221;Overlay Transition Demo&#8221; style=&#8221;3d&#8221; color=&#8221;vista_blue&#8221; link=&#8221;url:http%3A%2F%2Fstopdesign.cn%2Fdemo%2Fpage-transition-overlay%2F|title:Page%20Transition%20%E2%80%93%20Overlay|&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243;][vc_button2 title=&#8221;Zoom Transition Demo&#8221; style=&#8221;3d&#8221; color=&#8221;vista_blue&#8221; link=&#8221;url:http%3A%2F%2Fstopdesign.cn%2Fdemo%2Fpage-transition%2Fpage-transition-zoom%2F|title:Page%20Transition%20%E2%80%93%20Zoom|&#8221;][\/vc_column_inner][\/vc_row_inner][vc_row_inner css=&#8221;.vc_custom_1457886754772{padding-top: 40px !important;}&#8221;][vc_column_inner][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[\/vc_column_text][vc_empty_space][\/vc_column_inner][\/vc_row_inner]<a href=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/11\/8bc72ed71.jpg\" class=\"fluidbox-image\" data-margin=\"0 12px 0 0px\" data-float=\"left\"><img src=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/11\/8bc72ed71-320x213.jpg\" width=\"320\" style=\"float:left;margin:0 12px 0 0px\" alt=\"\" \/><\/a>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1457886777943{padding-top: 32px !important;}&#8221;][vc_column][vc_row_inner][vc_column_inner][\/vc_column_inner][\/vc_row_inner][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>[vc_row css=&#8221;.vc_custom_1457886665618{padding-bottom: 20px !important;}&#8221;][vc_column][vc_row_inner css=&#8221;.vc_custom_1457886740430{padding-top: 40px !important;}&#8221;][vc_column_inner][vc_column_text]The page in animation is random in this demo, you can reload the page to see a different page animation.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_text_separator title=&#8221;Select a page out animation:&#8221;][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]Fade out up small[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]Fade out up[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]Fade out up large[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]Fade out right small[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]Fade out right[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]Fade out right large[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_column_text]Fade out [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/993"}],"collection":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/comments?post=993"}],"version-history":[{"count":28,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/993\/revisions"}],"predecessor-version":[{"id":2356,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/993\/revisions\/2356"}],"wp:attachment":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/media?parent=993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}