Owner's avatar

vogelrh/ken-burns-image

A Polymer web component that will fade-in/out, zoom-in/out and pan an image in a manner often referred to as the "Ken Burns Effect"

Overview

Published on webcomponents.org

<ken-burns-image>

A Polymer Web Component that pans and zooms an image in a manner often referred to as the Ken Burns Effect

The component provides a fixed size viewport in which the contained image is animated with scale and translate transforms. Most all aspects of the animation are controlled by custom CSS styling or web component properties.

API Docs Demo

Install the component with bower:

bower install ken-burns-effect --save

Usage

<ken-burns-image
   source="demo/kb_example.jpg"
   viewport-width="450px"
   viewport-height="250px"
   scale-start="0.96"
   scale-end="1.8"
   translate-x-end="-290px"
   translate-y-end="-180"  
></ken-burns-image>

This example will create a viewport 450px by 250px to display the image. It starts the animation with the image not visible and scaled by 0.96. The image fades in then over the length of the animation, will end with a scale factor of 1.8 and shift the image to the left and down by -290px and -180px respectively before fading out at the end of the cycle. See the Syling section for a description of the default values for the other properties that were not explicitly specified in the example.

Styling

The following custom CSS properties are provided for stying and animation control:

Custom property Description Default
--kb-animation-duration Duration of the animation 15s
--kb-animation-count Animation iteration count infinite
--kb-viewport-width Sets the width of the image viewport auto
--kb-viewport-height Sets the height of the image viewport auto
--kb-background-color Sets the background color of the viewport auto
--kb-scale-start Sets the image scale at start of animation 1
--kb-scale-end Sets the image scale at end of animation 1
--kb-translate-x-start Sets the x axis translation at start of animation 0px
--kb-translate-x-end Sets the x axis translation at end of animation 0px
--kb-translate-y-start Sets the y axis translation at start of animation 0px
--kb-translate-y-end Sets the y axis translation at end of animation 0px
--kb-opacity-start Sets image opacity at the start of animation 0
--kb-opacity-end Sets image opacity at the end of animation 0

License

The MIT License (MIT)

Copyright (c) 2016 Robert Vogel

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Download

Download ZIP

Activity

Created 22 days ago

Last updated 16 days ago

Bower Dependencies

polymer ^1.4.0

Made with by a bunch of awesome contributors. Brought to you by Liferay.