{"id":13617,"date":"2017-03-23T08:47:41","date_gmt":"2017-03-22T22:47:41","guid":{"rendered":"https:\/\/codemyui.com\/?p=13617"},"modified":"2018-05-16T16:58:35","modified_gmt":"2018-05-16T06:58:35","slug":"hero-section-splash-page-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/hero-section-splash-page-animation\/","title":{"rendered":"Hero Section Splash Page Animation"},"content":{"rendered":"<p>This is a beautiful splash page animation that will look great in the <a href=\"https:\/\/codemyui.com\/tag\/hero-section\/\">hero section<\/a> of your next web design project.It was designed by Timothy Giblin.<\/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\/6e80c230746e223d230f286a782a1153\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Splash Page Animation Snippet<\/h2>\n<p class='codepen'  data-height='481' data-theme-id='0' data-slug-hash='JKJjQo' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Splash page by Timothy Giblin (@tim_giblin) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This is a beautiful splash page animation that will look great in the hero section of your next web design project.It was designed by Timothy Giblin.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/hero-section-splash-page-animation\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":13625,"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":[38934147,5780130,171190],"class_list":["post-13617","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-hero-section","tag-hidden-content","tag-square","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/splash-page.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":3310,"url":"https:\/\/codemyui.com\/configurable-rain-effect-css\/","url_meta":{"origin":13617,"position":0},"title":"Configurable Rain Effect in CSS","author":"Hima Vincent","date":"October 31, 2016","format":false,"excerpt":"This is a CSS rain effect with multiple configuration options. You can choose to have a single drop or multiple drops coming in. You can also add and remove the splash effect when raindrop hit the ground and you can add backdrop as well. This snippet was designed by Aaron\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Configurable Rain Effect in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/configurable-rain-effect-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\/2016\/10\/configurable-rain-effect-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/configurable-rain-effect-in-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/configurable-rain-effect-in-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4011,"url":"https:\/\/codemyui.com\/fullscreen-hero-section-parallax-slider\/","url_meta":{"origin":13617,"position":1},"title":"Fullscreen Hero Section Parallax Slider","author":"Hima Vincent","date":"September 24, 2019","format":false,"excerpt":"Here you have a full width and full high image with a header style text on top of it. When you scroll down you will see that the image and text has a parallax effect and it will load up the next image and text. This will work great for\u2026","rel":"","context":"In \"full screen\"","block_context":{"text":"full screen","link":"https:\/\/codemyui.com\/tag\/full-screen\/"},"img":{"alt_text":"Fullscreen Hero Section Parallax Slider","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Fullscreen-Hero-Section-Parallax-Slider.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\/Fullscreen-Hero-Section-Parallax-Slider.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Fullscreen-Hero-Section-Parallax-Slider.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Fullscreen-Hero-Section-Parallax-Slider.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":5016,"url":"https:\/\/codemyui.com\/accordion-tab-navigation-menu-hero-section-slider\/","url_meta":{"origin":13617,"position":2},"title":"Accordion Tab Navigation Menu and Hero Section Slider","author":"Hima Vincent","date":"September 23, 2019","format":false,"excerpt":"This is a neat navigation menu that looks like an accordion tabs and has a slider like animation for the tabs, it will look great for the hero section of a web page. It was designed by Ettrics. You have multiple tabs that acts like the menu for a section\u2026","rel":"","context":"In \"accordion tabs\"","block_context":{"text":"accordion tabs","link":"https:\/\/codemyui.com\/tag\/accordion-tabs\/"},"img":{"alt_text":"Accordion Tab Navigation Menu and Hero Section Slider","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Accordion-Tab-Navigation-Menu-and-Hero-Section-Slider.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\/Accordion-Tab-Navigation-Menu-and-Hero-Section-Slider.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Accordion-Tab-Navigation-Menu-and-Hero-Section-Slider.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Accordion-Tab-Navigation-Menu-and-Hero-Section-Slider.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":13835,"url":"https:\/\/codemyui.com\/flickering-neon-text-animation\/","url_meta":{"origin":13617,"position":3},"title":"Flickering Neon Text Animation","author":"Hima Vincent","date":"March 22, 2017","format":false,"excerpt":"If you are running a landing page for a games or pub site you might love this neon text with flickering text effect. This effect was designed by Jase. This is another hero section text animation like adding long shadow, gradient, outline that you can use on your websites. If\u2026","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"Neon Text with Flickering Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/neon-text-with-flickering-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/neon-text-with-flickering-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/neon-text-with-flickering-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/neon-text-with-flickering-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":3300,"url":"https:\/\/codemyui.com\/magic-mouse-scroll-icon\/","url_meta":{"origin":13617,"position":4},"title":"Magic Mouse Scroll Down Icon","author":"Hima Vincent","date":"October 26, 2016","format":false,"excerpt":"This is a scroll down animation that you can use in your web page where you want to provide a visual cue to users that there is more content when you scroll down. In this code snippet, you can see a mouse with a touch interaction where you touch and\u2026","rel":"","context":"In \"hero section\"","block_context":{"text":"hero section","link":"https:\/\/codemyui.com\/tag\/hero-section\/"},"img":{"alt_text":"Magic Mouse Scroll Down Icon","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/pure-css-site-scroll-micro-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\/10\/pure-css-site-scroll-micro-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/pure-css-site-scroll-micro-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/pure-css-site-scroll-micro-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25620,"url":"https:\/\/codemyui.com\/spilled-paint-animation-on-click\/","url_meta":{"origin":13617,"position":5},"title":"Spilled Paint Animation on Click","author":"Saijo George","date":"April 20, 2018","format":false,"excerpt":"With this snippet, we can see paint dripping from the top of the screen on mouse click. It was designed by Darryl Huffman and will look great in the hero section of any website. If you are having trouble with the pen, try the archived copy on GitHub Spilled Paint\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Spilled Paint Animation on Click","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Spilled-Paint-Animation-on-Click.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\/Spilled-Paint-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Spilled-Paint-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Spilled-Paint-Animation-on-Click.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\/13617","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=13617"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/13617\/revisions"}],"predecessor-version":[{"id":25876,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/13617\/revisions\/25876"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/13625"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=13617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=13617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=13617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}