{"id":410,"date":"2017-09-01T16:24:29","date_gmt":"2017-09-01T20:24:29","guid":{"rendered":"http:\/\/amytraining.imarketbeta.com\/blog\/?p=410"},"modified":"2017-09-01T17:04:52","modified_gmt":"2017-09-01T21:04:52","slug":"ken-burns-background-effect","status":"publish","type":"post","link":"https:\/\/amytraining.imarketbeta.com\/blog\/images\/ken-burns-background-effect\/","title":{"rendered":"Ken Burns Background Effect"},"content":{"rendered":"<p><strong>Summary<\/strong>: Because who doesn&#8217;t love that gentle zoom of a static image<strong>?<\/strong><\/p>\n<p><strong>Strategy:<\/strong>\u00a0At first glance, the most obvious way to build this section is by putting the background image directly on the container. However, we want to animate the size\/location of the background image while keeping it at a minimum of 100% height and 100% width of the container (at all browser sizes, as well). To account for these variables, the background image is put in a pseudo element. The pseudo element has all the necessary background styles we need, particularly <em>background-size: cover. <\/em>Now we can vary the height and width of the pseudo element itself, but we can also keep it always at least 100% (relative to the parent).<\/p>\n<p><strong>Notes<\/strong>:<\/p>\n<ul>\n<li>Be sure to put overflow:hidden on the parent container.<\/li>\n<li>Rather than animating the widths and heights, try transform: scale combined with transform-origin, to have more control over the zooming direction.<\/li>\n<li>The iteration count was set to infinite for the sake of the demo. This should be avoided on live sites.<\/li>\n<\/ul>\n<p><strong>Live Site Demos<\/strong>: <a href=\"http:\/\/onecallplumbing.imarketbeta.com\/\">One Call Plumbing<\/a><\/p>\n<p><script async src=\"\/\/jsfiddle.net\/mxxm9Lno\/3\/embed\/html,css,result\/\"><\/script><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Summary: Because who doesn&#8217;t love that gentle zoom of a static image? Strategy:\u00a0At first glance, the most obvious way to build this section is by putting the background image directly on the container. However, we want to animate the size\/location of the background image while keeping it at a minimum of 100% height and 100% [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[87],"tags":[108,107,109],"_links":{"self":[{"href":"https:\/\/amytraining.imarketbeta.com\/blog\/wp-json\/wp\/v2\/posts\/410"}],"collection":[{"href":"https:\/\/amytraining.imarketbeta.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/amytraining.imarketbeta.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/amytraining.imarketbeta.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amytraining.imarketbeta.com\/blog\/wp-json\/wp\/v2\/comments?post=410"}],"version-history":[{"count":6,"href":"https:\/\/amytraining.imarketbeta.com\/blog\/wp-json\/wp\/v2\/posts\/410\/revisions"}],"predecessor-version":[{"id":412,"href":"https:\/\/amytraining.imarketbeta.com\/blog\/wp-json\/wp\/v2\/posts\/410\/revisions\/412"}],"wp:attachment":[{"href":"https:\/\/amytraining.imarketbeta.com\/blog\/wp-json\/wp\/v2\/media?parent=410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amytraining.imarketbeta.com\/blog\/wp-json\/wp\/v2\/categories?post=410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amytraining.imarketbeta.com\/blog\/wp-json\/wp\/v2\/tags?post=410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}