Viewing Ken Burns Effect Coding Issue

Ken Burns Effect Coding Issue



User: Les C. 8 years ago
Below is the code I am using. It works fine in an online editor—but not in Everweb.

Thoughts?

HTML Snippet
[code]<div class="image">
<img src="http://static.squarespace.com/static/4fb50a18e4b0f2fffeb51dda/4fb50a19e4b0f2fffeb51ddf/50255b3184ae111bdb329ce6/1344625457128/sqspc2-1.jpg?format=1500w" />
</div>[/code]

CSS
[code].image {
width:100%;
height:350px;
margin:0 auto;
overflow:hidden;
position: relative;
}
.image img {
animation:move 30s ease infinite; /* Change this to alternate to stop the loop. */
-ms-animation:move 30s ease infinite;
-webkit-animation:move 30s ease infinite;
-0-animation:move 30s ease infinite;
-moz-animation:move 30s ease infinite;
position: fixed;
left:-150px;
top:-150px;
}

@-webkit-keyframes move {
from {
transform: scale(0.9);
-ms-transform: scale(0.9); /* IE 9 */
-webkit-transform: scale(0.9); /* Safari and Chrome */
-o-transform: scale(0.9); /* Opera */
-moz-transform: scale(0.9); /* Firefox */
}
to {
transform: scale(1.0);
-ms-transform: scale(1.0); /* IE 9 */
-webkit-transform: scale(1.0); /* Safari and Chrome */
-o-transform: scale(1.0); /* Opera */
-moz-transform: scale(1.0); /* Firefox */
}
}[/code]

Last edit 8 years ago
User: Jumbo T. 8 years ago
Did you enclose the CSS with :

<style>
</style>

Preview the page and it shows Ken Burns.
User: Roddy 8 years ago
Quote:
Preview the page and it shows Ken Burns.

That would depend on which browser you preview it in.

@ Les C: Its not a good idea to copy code from someone who doesn't actually know much about it. The keyframes animation syntax is just nonsense.

Try this instead....

<style type="text/css">
.image {
width:100%;
height:350px;
margin:0 auto;
overflow:hidden;
position: relative;
}
.image img {
animation:move 30s ease infinite;
-ms-animation:move 30s ease infinite;
-webkit-animation:move 30s ease infinite;
-0-animation:move 30s ease infinite;
-moz-animation:move 30s ease infinite;
position: fixed;
left:-150px;
top:-150px;
}
@-webkit-keyframes move {
from {-webkit-transform: scale(0.9)}
to {-webkit-transform: scale(1.0)}
}
@keyframes move {
from {transform: scale(0.9)}
to {transform: scale(1.0)}
}
@-moz-keyframes move {
from {-moz-transform: scale(0.9)}
to {-moz-transform: scale(1.0)}
}
@-0-keyframes move {
from {-o-transform: scale(0.9)}
to {-o-transform: scale(1.0)}
}
</style>

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 8 years ago
--Jumbo, Roddy,

Thanks for your comments. We got things moving :)

I still have two issues:

1. The image expands out in all directions changing size—but I want it to grow within a set shape/border 350px high and page wide.

See: [url=http://codepen.io/mj/pen/rIBpt//[/url]

2. The displayed image is not the size I want (It's way too large). On my original non-animated page I inserted a shape and filled it with the image (then 'stretched' it and 'fixed' it into place). Should I just make the image the dimensions and size I need?

Also, should I apply sizes and positioning criteria in EverWeb, CSS, or both?


Many thanks.

LC

Last edit 8 years ago
User: Les C. 8 years ago
As a second option, I would like the Ken Burns effect to increase 10% vertically and go through the entire width of the image left to right (original image is 4254px wide and 1489px high. My page layout has a content width of 1000).


Thanks.

LC
User: Les C. 8 years ago
Also, how do I supply both a regular and retina image?


LC
User: Les C. 8 years ago
Below is my updated work-in-progress. There are two remaining issues:

1. I would like to know if there is a way to add a pan across my image?
2. The animation is working in Firefox, but it is much slower than in Safari.

Any ideas on improving the code would also be appreciated.


HTML Snippet:

[code] <div class="image">
<img src="{!-ASSETSPATH-!}Images/Image@2x.png" height="350" width="2350" />
</div>
[/code]


CSS

[code]<style type="text/css">
.image {
overflow:hidden;
margin: 0 auto;
position: relative;
height: 350px;
}
@mixin pixelated {
-ms-interpolation-mode: nearest-neighbor; // IE 7+ (non-standard property)
image-rendering: -webkit-optimize-contrast; // Safari 6, UC Browser 9.9
image-rendering: -webkit-crisp-edges; // Safari 7+
image-rendering: -moz-crisp-edges; // Firefox 3.6+
image-rendering: -o-crisp-edges; // Opera 12
image-rendering: pixelated; // Chrome 41+ and Opera 26+
}
.image img {
animation:move 12s ease;
-ms-animation:move 12s ease;
-webkit-animation:move 12s ease;
-0-animation:move 12s ease;
-moz-animation:move 12s ease;


animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-0-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;

position: relative;
left:-500px;
}
@-webkit-keyframes move {
from {-webkit-transform: scale(1.0)}
to {-webkit-transform: scale(1.05)}
}
@keyframes move {
from {transform: scale(1.0)}
to {transform: scale(1.05)}
}
@-moz-keyframes move {
from {-moz-transform: scale(1.0)}
to {-o-transform: scale(1.05)}
}
@-0-keyframes move {
from {-o-transform: scale(1.0)}
to {-o-transform: scale(1.05)}
}
</style> [/code]

Last edit 8 years ago
User: Roddy 8 years ago
The Ken Burns effect is usually added to slides rather than single images. I think to pan across an image you may have to use java script. Here's an example using "canvas" and JS.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 8 years ago
--Roddy,

Could you please repost the link—it's not working. Thanks.


LC
User: Jumbo T. 8 years ago
The problem is this forum that adds a space ( %20 ) between java and script

In the URL remove %20
User: Roddy 8 years ago
Here's the link...

http://www.willmcgugan.com/blog/tech/2011/2/26/ken-burns-effect-with-java script-and-canvas/

I was looking around for something different to include in the new Flex Responsive System widgets and came across Slippry. The DEMO should be self explanatory.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
✔ Best Answer  
User: Jumbo T. 8 years ago
Looks like the resident expert does't understand the problem either :

Lets' see if the short URL works :

http://bit.ly/1KsPsl5
User: Les C. 8 years ago
I presume I need to do three things to make this work in EverWeb:

1. Enter an image location into an HTML snippet.

2. Specify image names into the posted CSS code and add style markers before and after the code.

3. Enter the revised CSS code into the header section of EverWeb.

What I am unsure of is where the image names are required in the CSS code. Are they posted in the brackets here:

var images = [];


Thanks,

LC
User: Roddy 8 years ago
I thought you just wanted the effect on a singel image?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 8 years ago
--Roddy,

Yes, a single image.


LC


Post Reply
You must login or signup to post.