{"id":128,"date":"2015-10-19T07:12:00","date_gmt":"2015-10-19T07:12:00","guid":{"rendered":"http:\/\/codemyui.com\/animated-header-background\/"},"modified":"2018-05-17T12:52:17","modified_gmt":"2018-05-17T02:52:17","slug":"animated-header-background","status":"publish","type":"post","link":"https:\/\/codemyui.com\/animated-header-background\/","title":{"rendered":"Animated Header Background"},"content":{"rendered":"<p>Checkout this colorful animated header designed by\u00a0<a href=\"https:\/\/twitter.com\/tmrDevelops\" target=\"_blank\" rel=\"noopener\">Tiffany Rayside<\/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\/c0baa9c24bafd8d67395\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='510' data-theme-id='0' data-slug-hash='OyRVPb' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen CHROMAtrix by Tiffany Rayside (@tmrDevelops) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Checkout this colorful animated header designed by\u00a0Tiffany Rayside.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/animated-header-background\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":719,"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":[],"class_list":["post-128","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/animated-header-background.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":12895,"url":"https:\/\/codemyui.com\/image-glitching-effect\/","url_meta":{"origin":128,"position":0},"title":"Image Glitching Effect","author":"Hima Vincent","date":"March 19, 2017","format":false,"excerpt":"Here is a cool image glitching effect designed by Tiffany Rayside, it glitches on hover and at a random interval. Will work for a spooky \/ Halloween themed website. If you are having trouble with the pen, try the archived copy on GitHub Image Glitch on Hover Snippet","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"Image Gliching Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/gliching-image-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\/03\/gliching-image-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/gliching-image-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/gliching-image-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":141,"url":"https:\/\/codemyui.com\/pure-css-responsive-image-caption-hover-effect\/","url_meta":{"origin":128,"position":1},"title":"Pure CSS Responsive Image Caption Hover Effect","author":"Hima Vincent","date":"October 8, 2015","format":false,"excerpt":"Check out this awesome responsive image caption on hover with social icons and view more options using pure CSS.Designed by Tiffany Rayside. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Pure CSS Responsive Image Caption Hover Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-responsive-image-caption-hover-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-responsive-image-caption-hover-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-responsive-image-caption-hover-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-responsive-image-caption-hover-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24888,"url":"https:\/\/codemyui.com\/hand-drawn-border-buttons-css\/","url_meta":{"origin":128,"position":2},"title":"Hand-Drawn Border Buttons in CSS","author":"Hima Vincent","date":"October 31, 2017","format":false,"excerpt":"Here are some great button designs that makes the buttons looks like hand-drawn buttons, it was designed by Tiffany Rayside. There are six styles to choose from Lined, Dotted and Dashed in thick and thin styles. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Hand-Drawn Border Buttons in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/hand-drawn-border-buttons-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/hand-drawn-border-buttons-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/hand-drawn-border-buttons-in-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/hand-drawn-border-buttons-in-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28812,"url":"https:\/\/codemyui.com\/horror-move-style-blurry-text-coming-into-focus-text-animation\/","url_meta":{"origin":128,"position":3},"title":"Horror Move Style Blurry Text Coming into Focus Text Animation","author":"Saijo George","date":"November 7, 2019","format":false,"excerpt":"Here is a fancy text animation effect using lettering.js, the text loads as a blurry mess which is really hard to read and them in comes into focus revealing the text and then fades away to load the next line. This can work well for Halloween or horror-themed sites. If\u2026","rel":"","context":"In \"blur effect\"","block_context":{"text":"blur effect","link":"https:\/\/codemyui.com\/tag\/blur-effect\/"},"img":{"alt_text":"Horror Move Style Blurry Text Coming into Focus Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Horror-Move-Style-Blurry-Text-Coming-into-Focus-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\/2019\/11\/Horror-Move-Style-Blurry-Text-Coming-into-Focus-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Horror-Move-Style-Blurry-Text-Coming-into-Focus-Text-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Horror-Move-Style-Blurry-Text-Coming-into-Focus-Text-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29700,"url":"https:\/\/codemyui.com\/scroll-up-to-reveal-header-and-scroll-down-to-hide\/","url_meta":{"origin":128,"position":4},"title":"Scroll up to Reveal Header and Scroll Down to Hide","author":"Saijo George","date":"April 21, 2020","format":false,"excerpt":"Code by: Ingvi from Codepen If you are having trouble with the pen, try the archived copy on GitHub Hide and Show Header Snippet","rel":"","context":"In \"header\"","block_context":{"text":"header","link":"https:\/\/codemyui.com\/tag\/header\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Scroll-up-to-Reveal-Header-and-Scroll-Down-to-Hide.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Scroll-up-to-Reveal-Header-and-Scroll-Down-to-Hide.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Scroll-up-to-Reveal-Header-and-Scroll-Down-to-Hide.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Scroll-up-to-Reveal-Header-and-Scroll-Down-to-Hide.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":224,"url":"https:\/\/codemyui.com\/material-nav-header-with-aligned-dropdowns\/","url_meta":{"origin":128,"position":5},"title":"Material Nav Header with Aligned Dropdowns","author":"Hima Vincent","date":"July 15, 2015","format":false,"excerpt":"A simple material design inspired navigation menu with aligned dropdown. Designed by Cole Waldrip.\u00a0 If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"Material Nav Header with Aligned Dropdowns","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/material-nav-header-with-aligned-dropdowns.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/material-nav-header-with-aligned-dropdowns.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/material-nav-header-with-aligned-dropdowns.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/material-nav-header-with-aligned-dropdowns.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\/128","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=128"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/128\/revisions"}],"predecessor-version":[{"id":26234,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/128\/revisions\/26234"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/719"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}