{"id":17510,"date":"2017-05-31T09:47:07","date_gmt":"2017-05-30T23:47:07","guid":{"rendered":"https:\/\/codemyui.com\/?p=17510"},"modified":"2018-05-16T16:43:27","modified_gmt":"2018-05-16T06:43:27","slug":"split-word-roll-effect-hover","status":"publish","type":"post","link":"https:\/\/codemyui.com\/split-word-roll-effect-hover\/","title":{"rendered":"Split Word Roll Up &amp; Down Effect on Hover"},"content":{"rendered":"<p>This is a cool effect that can be applied to <a href=\"https:\/\/codemyui.com\/tag\/link\/\">links<\/a> and in this snippet, it&#8217;s shown as a <a href=\"https:\/\/codemyui.com\/tag\/navigation-menu\/\">navigation menu<\/a>. The menu items are two words and each word is in a  different colour, on <a href=\"https:\/\/codemyui.com\/tag\/hover-animation\/\">hover<\/a> the words move in different direction. It was designed by <a href=\"https:\/\/jasonhee.com\/\" target=\"_blank\" rel=\"noopener\">Jason Hee<\/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\/cdd6d67acad64dde82f8a22909a43686\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Word Roll Up &amp; Down Snippet<\/h2>\n<p class='codepen'  data-height='456' data-theme-id='0' data-slug-hash='zodWjz' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Menu hover effect by Jason Hee (@jasonheecs) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This is a cool effect that can be applied to links and in this snippet, it&#8217;s shown as a navigation menu. The menu items are two words and each word is in a different colour, on hover the words move in different direction. It was designed by Jason Hee<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/split-word-roll-effect-hover\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":17513,"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":true,"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":[192416248,2717,1520705,30305495],"class_list":["post-17510","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-hover-animation","tag-link","tag-navigation-menu","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/split-word-roll-up-down-effect-on-hover.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":26669,"url":"https:\/\/codemyui.com\/hamburger-menu-icon-to-menu-transformation-on-hover\/","url_meta":{"origin":17510,"position":0},"title":"Hamburger Menu Icon to MENU Transformation on Hover","author":"Saijo George","date":"July 14, 2018","format":false,"excerpt":"With this CSS only snippet designed by IlyasR, when you hover over the hamburger menu icon \u039e it changes to the word M\u039eNU. If you are having trouble with the pen, try the archived copy on GitHub \u039e to MENU Snippet","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Hamburger Menu Icon to MENU Transformation on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hamburger-Menu-Icon-to-MENU-Transformation-on-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hamburger-Menu-Icon-to-MENU-Transformation-on-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hamburger-Menu-Icon-to-MENU-Transformation-on-Hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hamburger-Menu-Icon-to-MENU-Transformation-on-Hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":19812,"url":"https:\/\/codemyui.com\/hand-drawn-pencil-circle-hover\/","url_meta":{"origin":17510,"position":1},"title":"Hand Drawn Pencil Circle on Hover","author":"Hima Vincent","date":"June 29, 2017","format":false,"excerpt":"This navigation menu was designed by Mariusz Dabrowski, when you hover over any of the menu links it will be highlighted by a hand drawn circle. If you are having trouble with the pen, try the archived copy on GitHub Hand Drawn Circle Snippet","rel":"","context":"In \"hand drawn\"","block_context":{"text":"hand drawn","link":"https:\/\/codemyui.com\/tag\/hand-drawn\/"},"img":{"alt_text":"Hand Drawn Pencil Circle On Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Hand-Drawn-Pencil-Circle-On-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Hand-Drawn-Pencil-Circle-On-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Hand-Drawn-Pencil-Circle-On-Hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Hand-Drawn-Pencil-Circle-On-Hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25630,"url":"https:\/\/codemyui.com\/css-only-hover-show-hide-navigation-menu\/","url_meta":{"origin":17510,"position":2},"title":"CSS Only Hover Show\/Hide Navigation Menu","author":"Saijo George","date":"April 23, 2018","format":false,"excerpt":"Need a simple navigation menu on the left-hand side that is collapsed by default and is expanded when you hover over it? Look no further this CSS only navigation menu will help you easily achieve it. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"CSS Only Hover Show-Hide Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/CSS-Only-Hover-Show-Hide-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\/2018\/04\/CSS-Only-Hover-Show-Hide-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/CSS-Only-Hover-Show-Hide-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/CSS-Only-Hover-Show-Hide-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":13043,"url":"https:\/\/codemyui.com\/hover-click-slideout-sidebar-navigation\/","url_meta":{"origin":17510,"position":3},"title":"Hover Click Slideout Sidebar Navigation","author":"Hima Vincent","date":"March 21, 2017","format":false,"excerpt":"This hover or click slideout sidebar navigation was designed by Nick Ciliak. When you hover or click on the hamburger menu in the top left the modal sidebar navigation slides out. If you are having trouble with the pen, try the archived copy on GitHub Slideout Sidebar Snippet","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/sidebar-navigation.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\/sidebar-navigation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/sidebar-navigation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/sidebar-navigation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30215,"url":"https:\/\/codemyui.com\/displace-link-hover-animation-using-splittingjs\/","url_meta":{"origin":17510,"position":4},"title":"Displace Link Hover Animation Using SplittingJS","author":"Hima Vincent","date":"May 18, 2021","format":false,"excerpt":"Code by: Sikriti Dakua If you are having trouble with the pen, try the archived copy on\u00a0GitHub. Displace Nav Menu Hover Snippet","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"Link Hover Animation Using Split JS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Link-Hover-Animation-Using-Split-JS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Link-Hover-Animation-Using-Split-JS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Link-Hover-Animation-Using-Split-JS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Link-Hover-Animation-Using-Split-JS.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17494,"url":"https:\/\/codemyui.com\/circular-navigation-menu\/","url_meta":{"origin":17510,"position":5},"title":"Circular Navigation Menu","author":"Hima Vincent","date":"May 31, 2017","format":false,"excerpt":"A striking navigation menu that has the links in a circular fashion. On hover, the background colour changes as well. It was designed by Rachel Smith If you are having trouble with the pen, try the archived copy on GitHub Circular Navigation Menu Snippet","rel":"","context":"In \"full screen\"","block_context":{"text":"full screen","link":"https:\/\/codemyui.com\/tag\/full-screen\/"},"img":{"alt_text":"Circular Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/circular-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\/05\/circular-navigation-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/circular-navigation-menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/circular-navigation-menu.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\/17510","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=17510"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/17510\/revisions"}],"predecessor-version":[{"id":25798,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/17510\/revisions\/25798"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/17513"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=17510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=17510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=17510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}