Viewing Ken Burns Effect Coding Issue

Ken Burns Effect Coding Issue



User: Roddy 8 years ago
You would do as I did in the demo I posted above using the Slippry slider. Use the image twice to keep it repeating.

Paste this into an HTML Snippet...

<a href="http://flickr.com/billowycoat"><canvas id="kenburns" width="640" height="480"></canvas></a>

... and this into the Footer Code box in the Page inspector...

<script type="text/java script" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/java script" src="kenburns.js"></script>
<script type="text/java script">
$(function(){
$('#kenburns').kenburns({
images:['http://farm5.static.flickr.com/4148/4967746406_427d761e2e_b.jpg', 'http://farm5.static.flickr.com/4148/4967746406_427d761e2e_b.jpg'],
frames_per_second: 30,
display_time: 7000,
fade_time: 1000,
zoom: 2,
background_color:'#ffffff',
post_render_callback:function($canvas, context) {
context.save();
context.fillStyle = '#000';
context.font = 'bold 20px sans-serif';
var width = $canvas.width();
var height = $canvas.height();
var text = "";
var metric = context.measureText(text);
context.fillStyle = '#fff';
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 4;
context.shadowColor = 'rgba(0, 0, 0, 0.8)';
context.fillText(text, width - metric.width - 8, height - 8);
context.restore();
}
});
});
</script>

Note how the same image is referenced twice in the JS.

The effect in the demo is kind of overdone. I would probably reduce the zoom level to 1.5 or lower.

-------------------------------
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,

I copied and pasted in your code as directed, but I don't get anything to show up in the app or in a browser after publishing.

I also tried sourcing local images on my assets list—still nothing.

Suggestions?


LC
User: Jumbo T. 8 years ago
Sometimes copy/paste is not enough.

Add the kenburns.js file to Assets and use this :

<script type="text/java script" src="{!-ASSETSPATH-!}External%20Files/kenburns.js"></script>

Last edit 8 years ago
User: Les C. 8 years ago
--Jumbo

Thank for the code.

I sourced the kenburns.js file and added it to my assets.

I tried adding your code to the header then footer—still nothing. Thoughts?


LC
User: Roddy 8 years ago
You don't just paste Jumbo's line of code - you need to create it yourself so that EverWeb knows to add the asset to the appropriate folder.
Paste this into the code box...

<script type="text/java script" src=""></script>

Control (right) click the ken burns.js file in Assets and select to copy the relative path to your clipboard.
Now paste it into the line of code between the pair of double quotes.

If it still won't work, publish a test page to the server and post the URL here.

-------------------------------
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

Thanks for the reply. Do I place the new code in the snippet, header or footer?

Also, the earlier code we discussed works fine in Safari, Opera and Chrome—but there is no movement in Firefox. Any ideas why?

Here is the code:

[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]


LC
User: Les C. 8 years ago
   

Last edit 8 years ago
User: Roddy 8 years ago
java script can be placed in the Head Code box, the HTML Snippet or the Footer Code box. Which you use depends on what works and how fast you want your web page to load. There are no hard and fast rules for this - just common sense and bitter experience! See THIS PAGE for more info.

As for your CSS, check your code for errors. There are a number places where you have used a zero instead of a lowercase o.

Also, the moz keyframes has one vendor prefix as "-moz-" and the other as "-o-"

-------------------------------
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
   

Last edit 8 years ago
User: Roddy 8 years ago
Why are you asking the same question again?

-------------------------------
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

Thanks for the feedback. The code errors you pointed out got Firefox working!

Getting to the Ken Burns page next. (By the way, the link you provided isn't working).


LC
User: Les C. 8 years ago
--Roddy

Still no luck with the Ken Burns (nothing shows on the page).

Here is what I have:


Snippet

<a href="{!–ASSETSPATH–!}Images/Westside%20Color@2x.png"><canvas id="kenburns" width="2350" height="350"></canvas></a>



Header

<script type="text/java script" src="{!–ASSETSPATH–!}External%20Files/kenburns.js"></script>



Footer

[code]<script type="text/java script" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/java script" src="kenburns.js"></script>
<script type="text/java script">
$(function(){
$('#kenburns').kenburns({
images:['{!-ASSETSPATH-!}Images/Westside%20Color@2x.png', '{!-ASSETSPATH-!}Images/Westside%20Color@2x.png'],
frames_per_second: 24,
display_time: 7000,
fade_time: 1000,
zoom: 2,
background_color:'#ffffff',
post_render_callback:function($canvas, context) {
context.save();
context.fillStyle = '#000';
context.font = 'bold 20px sans-serif';
var width = $canvas.width();
var height = $canvas.height();
var text = "";
var metric = context.measureText(text);
context.fillStyle = '#fff';
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 4;
context.shadowColor = 'rgba(0, 0, 0, 0.8)';
context.fillText(text, width - metric.width - 8, height - 8);
context.restore();
}
});
});
</script>[/code]

Last edit 8 years ago
User: Jumbo T. 8 years ago
Remove the link to the kenburns.js file in the Header.

The link is already in the Footer.

Learn to recognize it.
User: Les C. 8 years ago
--Jumbo

I removed the ken burns.js link and tried. Then the whole header.

Still nothing... thoughts?


LC
User: Roddy 8 years ago
Did you remove the spaces between all instances of "java" and "script"?
Did you copy the relative file path of the JS file and paste it into the link?

You should also remove the space in the image file name - Westside%20Color@2x.png - or replace it with a hyphen...

westside-color@2x.png

It would be a lot easier to find the errors if you would publish a test page and post the URL.

-------------------------------
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.


Post Reply
You must login or signup to post.