{"id":6161,"date":"2017-02-26T22:08:25","date_gmt":"2017-02-26T12:08:25","guid":{"rendered":"https:\/\/codemyui.com\/?p=6161"},"modified":"2018-05-16T16:59:42","modified_gmt":"2018-05-16T06:59:42","slug":"ken-burns-responsive-banner","status":"publish","type":"post","link":"https:\/\/codemyui.com\/ken-burns-responsive-banner\/","title":{"rendered":"Ken Burns Responsive Banner"},"content":{"rendered":"<p>This snippet for a responsive <a href=\"https:\/\/codemyui.com\/tag\/image-effects\/\">image banner<\/a> with the <a href=\"https:\/\/codemyui.com\/tag\/ken-burns\/\">Ken burns effect<\/a> was designed by designed by <a href=\"https:\/\/twitter.com\/hkfoster\" target=\"_blank\" rel=\"noopener\">Kyle Foster<\/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\/ebe17385216f6f9dca80008ee5101d1a\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Responsive Banner Snippet<\/h2>\n<p class='codepen'  data-height='668' data-theme-id='0' data-slug-hash='kechC' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Ken Burns Banner by Kyle Foster (@hkfoster) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This snippet for a responsive image banner with the Ken burns effect was designed by designed by Kyle Foster.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/ken-burns-responsive-banner\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":11871,"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":[3867,1745484,105368],"class_list":["post-6161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-article","tag-image-effects","tag-ken-burns-effect","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/responsivebanner.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":5444,"url":"https:\/\/codemyui.com\/top-left-bottom-right-ken-burns\/","url_meta":{"origin":6161,"position":0},"title":"Top Left to Bottom Right Ken Burns","author":"Hima Vincent","date":"January 30, 2017","format":false,"excerpt":"If you want to add the Ken Burns effect to an image then snippet will help you do that. You will see that the view pans from the top left to the bottom right and then back, it was designed by Michael McMillan. If you are having trouble with the\u2026","rel":"","context":"In \"image effects\"","block_context":{"text":"image effects","link":"https:\/\/codemyui.com\/tag\/image-effects\/"},"img":{"alt_text":"Top Left to Bottom Right Ken Burns","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/top-left-to-bottom-right-ken-burns.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/top-left-to-bottom-right-ken-burns.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/top-left-to-bottom-right-ken-burns.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/top-left-to-bottom-right-ken-burns.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":5405,"url":"https:\/\/codemyui.com\/css-ken-burns-effect\/","url_meta":{"origin":6161,"position":1},"title":"CSS Only Ken Burns Effect","author":"Hima Vincent","date":"January 30, 2017","format":false,"excerpt":"The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery, popularised by American documentarian Ken Burns. We have seen this effect in web design for a while now and with this snippet, by Hugo B\u00f6rjesson we see this effect created with\u2026","rel":"","context":"In \"image effects\"","block_context":{"text":"image effects","link":"https:\/\/codemyui.com\/tag\/image-effects\/"},"img":{"alt_text":"CSS Only Ken Burns Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/css-only-ken-burns-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\/01\/css-only-ken-burns-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/css-only-ken-burns-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/css-only-ken-burns-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25247,"url":"https:\/\/codemyui.com\/pure-css-ken-burns-effect\/","url_meta":{"origin":6161,"position":2},"title":"Pure CSS Ken Burns Effect","author":"Saijo George","date":"December 14, 2017","format":false,"excerpt":"A nice little CSS only Ken Burns effect for image sliders designed by Dima. When the image loads it rotates anti-clockwise while zooming out giving the image a really fancy image effect. If you are having trouble with the pen, try the archived copy on GitHub Pure CSS Ken Burns\u2026","rel":"","context":"In \"image effects\"","block_context":{"text":"image effects","link":"https:\/\/codemyui.com\/tag\/image-effects\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-ken-burns-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\/11\/pure-css-ken-burns-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-ken-burns-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-ken-burns-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29007,"url":"https:\/\/codemyui.com\/banner-ad-with-animated-clippath-slides\/","url_meta":{"origin":6161,"position":3},"title":"Banner Ad with Animated Clippath Slides","author":"Saijo George","date":"November 27, 2019","format":false,"excerpt":"Here are multiple banner ad designs by Codepen user halvves. In here we have 2 variations for 300x250, 728x90, 160x600 and 320x50 ads where you have some nice slide transitions between images and text copy to deliver a powerful message. 300x250 Banner Variation A Snippet If you are having trouble\u2026","rel":"","context":"In \"ad template\"","block_context":{"text":"ad template","link":"https:\/\/codemyui.com\/tag\/ad-template\/"},"img":{"alt_text":"Banner Ad with Animated Clippath Slides","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Banner-Ad-with-Animated-Clippath-Slides.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\/Banner-Ad-with-Animated-Clippath-Slides.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Banner-Ad-with-Animated-Clippath-Slides.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Banner-Ad-with-Animated-Clippath-Slides.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":20146,"url":"https:\/\/codemyui.com\/looking-dirty-window-image-effect\/","url_meta":{"origin":6161,"position":4},"title":"Looking Through a Dirty Window Image Effect","author":"Hima Vincent","date":"September 19, 2019","format":false,"excerpt":"This Ken Burns image effect of looking through a dirty glass was inspired by the opening credits of The Walking Dead. Thanks to this CSS snippet designed by Chris Smith you can recreate that effect on your website. If you are having trouble with the pen, try the archived copy\u2026","rel":"","context":"In \"deconstruction\"","block_context":{"text":"deconstruction","link":"https:\/\/codemyui.com\/tag\/deconstruction\/"},"img":{"alt_text":"Looking Through a Dirty Window Image Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/looking-through-a-dirty-window-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\/07\/looking-through-a-dirty-window-image-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/looking-through-a-dirty-window-image-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/looking-through-a-dirty-window-image-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24628,"url":"https:\/\/codemyui.com\/image-grid-kenburns-description-hover\/","url_meta":{"origin":6161,"position":5},"title":"Image Grid with KenBurns and Description on Hover","author":"Hima Vincent","date":"September 23, 2019","format":false,"excerpt":"This Pure CSS image gallery was designed by Giana, it offers direction aware hover effect by bringing up the description associated with each image and a ken burns effect for the background image. If you are having trouble with the pen, try the archived copy on GitHub Image Grid Snippet","rel":"","context":"In \"direction aware\"","block_context":{"text":"direction aware","link":"https:\/\/codemyui.com\/tag\/direction-aware\/"},"img":{"alt_text":"Image Grid with KenBurns and Description on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-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\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.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\/6161","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=6161"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/6161\/revisions"}],"predecessor-version":[{"id":25916,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/6161\/revisions\/25916"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/11871"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=6161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=6161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=6161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}