We Keep Coding

CSS / JS slider transition effect

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!

How to make images larger in Materialize framework Parallax

I'm new to frameworks (used a tiny bit of bootstrap before) and have begun building a site with the materialize framework.
As you can see on that link, there is a Parallax framework, which I would like to use. The trouble is, when I swap my images in, it's cutting off more than I would like. Does anybody know how to solve this?
When I use google dev tools, there is a translate3D attribute, for which I can edit the Y value which does the trick. I guess this is in the materialize.js file line 1154:
$img.css('transform', "translate3D(-50%," + parallax + "px, 0)");
but I can't figure out where the parallax variable is being set.

Try and change the size of the image in <img height="" width="">
. It won't cut that much. Or if you want to increase the size of the parallax image container just use
.parallax-container{
height:
}
PS:
Always use high-res pictures when using parallax.

Flipping an image with jQuery

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/

How to properly make a Ken Burns effect using JQuery

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

How do I make this Javascript/jQuery animation better?

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/