{"id":5682,"date":"2017-01-31T13:03:16","date_gmt":"2017-01-31T03:03:16","guid":{"rendered":"https:\/\/codemyui.com\/?p=5682"},"modified":"2018-05-16T17:00:37","modified_gmt":"2018-05-16T07:00:37","slug":"folded-paper-text-effect","status":"publish","type":"post","link":"https:\/\/codemyui.com\/folded-paper-text-effect\/","title":{"rendered":"Folded Paper Text Effect"},"content":{"rendered":"<p>This little snippet will allow you to add a <a href=\"https:\/\/codemyui.com\/tag\/3d\/\">3D<\/a> folded paper snake like <a href=\"https:\/\/codemyui.com\/tag\/text-animation\/\">text effect<\/a> to your content. When you <a href=\"https:\/\/codemyui.com\/tag\/hover-animation\/\">hover over the content<\/a> the folds are removed and the text lays flat on the page. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/0fa5f0e4e6cf531f65c6bc258051e6f9\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>3D Paper Snake Text Effect Snippet<\/h2>\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='jymEgr' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen CSS Paper Text by Mattia Astorino (@equinusocio) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This little snippet will allow you to add a 3D folded paper snake like text effect to your content. When you hover over the content the folds are removed and the text lays flat on the page.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/folded-paper-text-effect\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":5707,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[2131,192416248,1512930],"class_list":["post-5682","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-3d","tag-hover-animation","tag-text-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/folded-paper-text-effect.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":5752,"url":"https:\/\/codemyui.com\/text-reveal-animation-css\/","url_meta":{"origin":5682,"position":0},"title":"Text Reveal Animation in CSS","author":"Hima Vincent","date":"February 1, 2017","format":false,"excerpt":"A neat little text reveal animation in pure CSS designed by Mattia Astorino. There is a streak of solid yellow from left to right which reveals the hidden text. If you are having trouble with the pen, try the archived copy on GitHub Text Reveal Animation Snippet","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Text Reveal Animation in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Goal_without_a_plan_is_just_a_wish.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Goal_without_a_plan_is_just_a_wish.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Goal_without_a_plan_is_just_a_wish.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Goal_without_a_plan_is_just_a_wish.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25530,"url":"https:\/\/codemyui.com\/3d-text-animation-on-hover-2\/","url_meta":{"origin":5682,"position":1},"title":"3D Text Animation On Hover","author":"Hima Vincent","date":"June 17, 2021","format":false,"excerpt":"Designed by Dennis Garrn. If you are having trouble with the pen, try the archived copy on GitHub 3D Text Animation On Hover Snippet","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"3D Text AnimationA On Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/03\/3d-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/03\/3d-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/03\/3d-text-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/03\/3d-text-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":22918,"url":"https:\/\/codemyui.com\/3d-card-flip-hovering-text\/","url_meta":{"origin":5682,"position":2},"title":"3D Card Flip With Hovering Text","author":"Hima Vincent","date":"September 20, 2019","format":false,"excerpt":"I am loving this hover effect by Tyrell Rummage, you have a bunch of cards with images in the background and a hovering text that acts as the title for these images. When you hover over them, the image flips to show the content for each card. The way the\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Card Flip With Hovering Text","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/3D-Card-Flip-With-Hovering-Text.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/3D-Card-Flip-With-Hovering-Text.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/3D-Card-Flip-With-Hovering-Text.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/3D-Card-Flip-With-Hovering-Text.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25142,"url":"https:\/\/codemyui.com\/peel-away-sticker-text-effect\/","url_meta":{"origin":5682,"position":3},"title":"Peel Away Sticker Text Effect","author":"Saijo George","date":"November 18, 2017","format":false,"excerpt":"A really cool CSS only text effect designed by Mandy Michael. It feels like the text is peeling away like a sticker. If you are having trouble with the pen, try the archived copy on GitHub Sticker Text Effect Snippet","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Peel Away Sticker Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/peel-away-sticker-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/peel-away-sticker-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/peel-away-sticker-text-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/peel-away-sticker-text-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":12645,"url":"https:\/\/codemyui.com\/button-click-multiple-flip-animation\/","url_meta":{"origin":5682,"position":4},"title":"Button Click Multiple Flip Animation","author":"Hima Vincent","date":"March 11, 2017","format":false,"excerpt":"Here is a fancy button designed by Mattia Astorino, that is sure to turn a few heads. When you click on it the button keeps flipping over and over till you release it. If you are having trouble with the pen, try the archived copy on GitHub Flipping Button Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/button-hover-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/button-hover-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4607,"url":"https:\/\/codemyui.com\/3d-swinging-text-animation\/","url_meta":{"origin":5682,"position":5},"title":"3D Swinging Text Animation","author":"Hima Vincent","date":"February 8, 2017","format":false,"excerpt":"Here we have a text animation designed by John Garcia. In this snippet, we have a 3d text which moves left and right giving a sense of depth as it does that. If you are having trouble with the pen, try the archived copy on GitHub 3D Swinging Text Snippet","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/3d-swinging-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/3d-swinging-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/3d-swinging-text-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/3d-swinging-text-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/5682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=5682"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/5682\/revisions"}],"predecessor-version":[{"id":25948,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/5682\/revisions\/25948"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/5707"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=5682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=5682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=5682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}