{"id":2397,"date":"2018-03-26T17:46:21","date_gmt":"2018-03-26T17:46:21","guid":{"rendered":"http:\/\/thingography.com\/?p=2397"},"modified":"2018-11-06T15:29:36","modified_gmt":"2018-11-06T15:29:36","slug":"css-transition-2","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-transition-2\/","title":{"rendered":"CSS Page-2 Transition Animation"},"content":{"rendered":"<style>\n#ani {\n\tmargin: 0 auto;\n\twidth: 100%;\n\theight: auto;\n\tposition: relative;\n\tpadding-bottom: 2em;\n\ttop: 0;\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"text\">\n<p class=\"scene\"> Page Two &#8211; Losira Out <\/p>\n<p><\/p>\n<p>\n\t\t\t\t\tThe Losira page transition also has an &#8220;onClick&#8221; audio as an added effect to go along with the page theme.  The so called &#8220;Losira&#8221; effect was born from the Star Trek episode &#8220;That Which Survives&#8221; and is similar to the manner in which Kalandan commander transitioned out of the scene. This page style was included to show how transitions can add to a webpage&#8217;s theme or character. <\/p>\n<div class=\"demo2\"> First choose the movement direction of the ad&#8230;<br \/>\n\t<a id=\"currentd\" class=\"butt5\" href=\"#\"> Losira Out <\/a><a class=\"butt5\" href=\"index-3.htm\"> Scale Out <\/a><a class=\"butt5\" href=\"index-5.htm\"> Rotate Out<\/a>\n<\/div>\n<div class=\"demo\"> then view a few pages of that ad style. <br \/>\n\t\t<button class=\"butt1\" >Page 1<\/button><button id=\"currentp\" class=\"butt2\">Page 2<\/button>\n\t<\/div>\n<p>\n\t\tContinued on page one&#8230;.\n\t<\/p>\n<\/div>\n<\/div>\n<p> <!--  Ani-box  --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Page Two &#8211; Losira Out The Losira page transition also has an &#8220;onClick&#8221; audio as an added effect to go along with the page theme. The so called &#8220;Losira&#8221; effect was born from the Star Trek episode &#8220;That Which Survives&#8221;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-transition-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[234],"tags":[6,4,5,230,231],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2397"}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=2397"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2397\/revisions"}],"predecessor-version":[{"id":2420,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2397\/revisions\/2420"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}