I recently tried the Ken Burns effect with this little jQuery plugin: CrossSlide.
The problem with that plugin is that when the motion is too slow it looks really bad. This is due to the fact that the image can only move 1 pixel at the time...
I tried to do my own slideshow and I have the exact same problem. I then thought that this is normal... since we can only move an image pixel by pixel.
But I just found this slider: Estro
Estro looks perfect to me. I wonder why it looks so smooth and how can I make mine look that good.
How can my Ken Burns effect be as good as Estro's one.
Without diving into the code for each one, if I were creating this I would use jQuery's animate() function. Using this function you can fine tune your slideshow by determining the distance and speed of the images' movement. For example this would move your image 50px to the up and to the left in 2 seconds:
$(".slideshow_image").animate({
'left': '-=50px',
'top': '-=50px',
'opacity': 0
}, 2000);
JS Code which uses HTML5 Canvas :
http://www.willmcgugan.com/blog/tech/2011/2/26/ken-burns-effect-with-javascript-and-canvas/
I know it's a relatively old post, but I thought I'd reflect on it as I'm looking for the same answer..
Thanks for the Estro slider link, it's very smooth indeed, and I think I just found out how they do it: on top of the image tag they create an HTML5 canvas that lets you do basic 2D transformations - like dynamic resizing.
This way you don't need to worry about the fact that you can only handle full pixels. Also it might work without a canvas, but not using '-=50'-type animations, but scaling.
Have a look at KenBurner as an example.
I hope it helps some of you out there..
Related
I recently came across a slider on this website - https://antoni.de/. I really like the transition effect but I can't for the life of me figure out how it's done. I get how the slider works but its the actual transition that is baffling me. I have no idea what this effect is called and I am not sure if it is done by CSS or JS? Would love to be able to imitate the same sort of transition effect. Does anyone know how this done and can point me in the right direction to building something similar?
This is an image of the transition effect:
Its made with canvas HTML5, you can see this in source code.
I actually messaged the developer to find out how he made this. It is made using webGL!
Before you tune out and label this as a dreadful question, please listen, I am aware that there are many jQuery plugins that flip images / content. My problem however involves something a little more difficult.
My problem is that a client wants their logo to constantly flip at a slow rate (this is not much of a problem) but when the logo is flipped halfway, instead of the image having 0 width they want the logo to appear a little "3D" so that when you are viewing it head on, it actually has a width.
I've googled around a bit but really can't seem to find a plug-in that achieves this, is it even possible?
If you're having trouble visualising what I mean when I say flip, see this demo
In the end we gave up on a JavaScript solution (it was going to be near impossible to have a reasonable cross browser solution)
So we ended up using jquery reel to accomplish this (why we didn't think of sprites earlier I'll never know!)
I have found some 3D Flipping image examples, so please try for it.
http://jquery.vostrel.cz/reel
http://www.360-javascriptviewer.com/learning-centre/code-examples/multiple-360-images-page.html
http://blog.stableflow.com/jquery-plugins/360-degrees-product-view/
if you wan to create codebins for it then click on link http://codebins.com/
As much as I've searched for information about this all over the internet, I can't find anything about it, so I've come here for help.
What's been bugging me: That no matter which method I use -- a jQuery .animate, or a css3 transition, [my] animations don't appear to be perfectly smooth. I didn't understand why they appear this way at first, and it's so subtle I ended up having to do some video capping to prove it. But it's definitely there -- the animations are juttery. Sometimes a frame happens too fast, and sometimes too slow.
Flip it back and forth six or seven times, and you'll hopefully see what I'm talking about.
I can understand this with jQuery -- JS execution isn't perfect. A quick profiling shows that indeed, when using jQuery anim, some frames get triggered too soon and some frames are late. But with CSS3?
What do people do to solve this problem?
I am moving the container using the margin-left CSS property and .animate of jQuery and is pretty smooth. Use the arrow keys to use it (left and right)
The current version of that project its now full of images, text, iframes and is still smooth.
Set this JS before your code:
jQuery.fx.interval = 100;
Webpage is - http://schnell.dreamhosters.com/spriteanimate.html
Just go to the page and 'View Source' and you'll see all the code.
Right now it's pretty simple. Right arrow key makes X go right, left arrow key makes him go left. He does a running animation in the proper direction and the actual image element moves in the same direction.
The major issue I have with this right now is optimization. If you play around with it a little you'll notice that the running animation isn't always smooth and for the first few seconds it feels very laggy, like it's still loading something. The animation for going left is particularly guilty of this. Another problem is with the .animate() from jQuery. It does a sort of stop-and-go motion and you can tell. The movement of the image element is jerky and not very smooth.
The .animate() from jQuery can be tweaked with easing and such, but I'm not entirely sure if that's the answer and that still leaves me with the occasional running lag or something. So does anyone have any suggestions?
Use image preloading for the sprite images, or better still, use one image as a sprite, and instead of swapping the image file, shift the position of the image file. You need to set the image as a background image and shift the background position to achieve this.
Also, use linear easing, otherwise it will default to swing, which enters and exits slowly.
Have you considered using CSS3 transitions rather than standard jQuery animations. In doing so you'll have dramatically better performance but lose some cross browser compatibility. Here's an example which only works in Chrome but shows the power
http://girliemac.com/sandbox/matrix.html
and more about CSS3 animations
http://css3.bradshawenterprises.com/
I'm trying to emulate the "heart" transition shown at:
http://www.templatemonster.com/flash-templates/31595.html?scr_type=1&hide_flash=0&tab=32
in HTML5 / JS, but I don't really know where to start. Any tips? JQuery-based stuff is fine by me.
Canvas clip mask is a good starting point
https://developer.mozilla.org/samples/canvas-tutorial/6_2_canvas_clipping.html
http://www.fabulant.com/downloadcenter/imgtransheart/imgtransheart.html
Script is v. easy to follow and modify. You can use your own heart images (the covering images are loaded in the js). Only trick is making sure the transparent aperture is smoothly scaled for each image.