{"id":76,"date":"2019-09-23T07:36:06","date_gmt":"2019-09-22T21:36:06","guid":{"rendered":"http:\/\/codemyui.com\/card-menu-animation\/"},"modified":"2019-09-23T22:05:38","modified_gmt":"2019-09-23T12:05:38","slug":"card-menu-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/card-menu-animation\/","title":{"rendered":"Card Menu Animation"},"content":{"rendered":"<p>Use this code snippet to add fullscreen tab animation to your website. Designed by <a href=\"https:\/\/twitter.com\/bennettfeely\" target=\"_blank\" rel=\"noopener noreferrer\">Bennett Feely<\/a>.<\/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\/9e1811560c166f9c4edf\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='523' data-theme-id='0' data-slug-hash='bEGxzq' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Cards Menu Concept by Bennett Feely (@bennettfeely) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Use this code snippet to add fullscreen tab animation to your website. Designed by Bennett Feely.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/card-menu-animation\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":28249,"comment_status":"open","ping_status":"open","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":[239174062,1520705],"class_list":["post-76","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-accordion-tabs","tag-navigation-menu","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Card-Menu-Animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":6533,"url":"https:\/\/codemyui.com\/concentric-circles-navigation-menu\/","url_meta":{"origin":76,"position":0},"title":"Concentric Circles Navigation Menu","author":"Hima Vincent","date":"February 26, 2017","format":false,"excerpt":"This is an experimental navigation menu by Bennett Feely. When you click on the menu button on the top right it expands into a series of concentric circles to display the navigation menu, you can click on it again to collapse the menu. If you are having trouble with the\u2026","rel":"","context":"In \"circle\"","block_context":{"text":"circle","link":"https:\/\/codemyui.com\/tag\/circle\/"},"img":{"alt_text":"Concentric Circles Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/concentric-circles-navigation-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/concentric-circles-navigation-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/concentric-circles-navigation-menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/concentric-circles-navigation-menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24694,"url":"https:\/\/codemyui.com\/gift-ribbon-css-text-effect\/","url_meta":{"origin":76,"position":1},"title":"Gift Ribbon CSS Only Text Effect","author":"Hima Vincent","date":"August 29, 2017","format":false,"excerpt":"You will love this gift ribbon like text effect using only CSS, it was designed by Bennett Feely. If you are having trouble with the pen, try the archived copy on GitHub Ribbon CSS Text Snippet","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Gift Ribbon CSS Only Text Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/gift-ribbon-css-only-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/gift-ribbon-css-only-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/gift-ribbon-css-only-text-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/gift-ribbon-css-only-text-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":166,"url":"https:\/\/codemyui.com\/better-screen-rotation\/","url_meta":{"origin":76,"position":2},"title":"Better Screen Rotation","author":"Hima Vincent","date":"September 21, 2015","format":false,"excerpt":"This code snippet helps you to achieve a better screen orientation while rotating the phone. Designed by Bennett Feely. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"image effects\"","block_context":{"text":"image effects","link":"https:\/\/codemyui.com\/tag\/image-effects\/"},"img":{"alt_text":"Better Screen Rotation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/better-screen-rotation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/better-screen-rotation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/better-screen-rotation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/better-screen-rotation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29154,"url":"https:\/\/codemyui.com\/randomly-zoom-in-parts-of-a-text-in-a-paragraph\/","url_meta":{"origin":76,"position":3},"title":"Randomly Zoom In Parts of a Text in a Paragraph","author":"Saijo George","date":"January 8, 2020","format":false,"excerpt":"This is a nice little text effect snippet by Bennett Feely where you have a paragraph and parts of that zoom in giving a sense of depth to the page. It's great when you want some nice 3D effect to your website. Good decisions come from experience. Experience comes from\u2026","rel":"","context":"In \"text animation\"","block_context":{"text":"text animation","link":"https:\/\/codemyui.com\/tag\/text-animation\/"},"img":{"alt_text":"Randomly Zoom In Parts of a Text in a Paragraph","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Randomly-Zoom-In-Parts-of-a-Text-in-a-Paragraph.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Randomly-Zoom-In-Parts-of-a-Text-in-a-Paragraph.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Randomly-Zoom-In-Parts-of-a-Text-in-a-Paragraph.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Randomly-Zoom-In-Parts-of-a-Text-in-a-Paragraph.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25333,"url":"https:\/\/codemyui.com\/bouncy-link-hover-follow-effect\/","url_meta":{"origin":76,"position":4},"title":"Bouncy Link Hover Follow Effect","author":"Saijo George","date":"January 8, 2018","format":false,"excerpt":"In this link hover effect, the transition follows your mouse and has a nice little bouncy effect when it jumps from one links to another. Designed by Bennett Feely. If you are having trouble with the pen, try the archived copy on GitHub Bouncy Link Snippet","rel":"","context":"In \"link\"","block_context":{"text":"link","link":"https:\/\/codemyui.com\/tag\/link\/"},"img":{"alt_text":"Bouncy Link Hover Follow Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/bouncy-link-hover-follow-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/bouncy-link-hover-follow-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/bouncy-link-hover-follow-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/bouncy-link-hover-follow-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":7582,"url":"https:\/\/codemyui.com\/laser-text-animation-css\/","url_meta":{"origin":76,"position":5},"title":"Laser Text Animation in CSS and Javascript","author":"Hima Vincent","date":"November 27, 2019","format":false,"excerpt":"JS Laser Text Engraving In this text animation by Martin Pitt, we have a really smooth text laser engraving effect using splitting.js If you are having trouble with the pen, try the archived copy on GitHub We judge ourselves by our intentions and\u00a0others by their\u00a0behaviourPablo Picasso Laser Engraving Text Animation\u2026","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"We judge ourselves by our intentions and\u00a0others by their\u00a0behaviour","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.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\/76","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=76"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/76\/revisions"}],"predecessor-version":[{"id":28251,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/76\/revisions\/28251"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/28249"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}