I need to zoom an image to the mouse cursor using JavaScript. The problem is, all info I found on how to do this is using CSS3 transforms, etc. It needs to be cross-browser compatible and as far as I know, IE 7 (I think even up to 9) isn't compatible with CSS3.
Is there any way I can do this with jQuery or pure JavaScript? Right now, I made it zoom with the mousewheel, but that's the easy part.
http://www.tripwiremagazine.com/2010/02/15-jquery-plugins-to-create-stunning-image-zoom-effects.html
Probably want the 3rd one down.
The JQuery Kabbar image zoomer is crossbrowser compatible:
http://www.ideabonus.com/Kabbar/index.html
Related
Having a blurred image is one of the main aesthetic features on my website. So far I am using CSS3 filter blur() to create the blur, but I know this is not supported in neither Firefox nor Internet Explorer. I was wondering is there an alternative, maybe JavaScript/jQuery, which will help me create the blurred effect I am looking for?
There are plenty of JS libraries that blur images.
BlurJS
VagueJS
StackBlur Algorhythm
Anyway, if you're using a static blurred image (i.e., no need to unblur/blur it again), I'd say you should go with a normal bitmap image. That might help to avoid unnecessary CPU load on the browser and compatibility issues.
See if blur.js, a jQuery plugin, does the trick for you. Essentially, what it does is move your image to a <canvas>, and does the blurring effects there. See a more comprehensive article on the topic: Effects for the Web!.
I need to replicate this effect - http://4091.co.uk/test/mask-test.swf - using jquery/css.
I tried using this wonderful plugin - http://almogbaku.github.io/imageMask - but it needs to work in IE8 and maybe IE7 and so it was scrapped due to its use of the canvas element.
I have white divs currently, set at angles, animating in and out but it's incredibly time consuming - is there a plugin which creates this kind of effect or is there a method that would work in the IEs?
Here: http://modernizr.com/
Modernizr makes it work for every browser that doesn't support HTML5 or CSS3.
I want to use transition effect on hover for IE 8 like in this example:
http://jsfiddle.net/evcL2/10/
According to this site (is working only on ie) that is possible (use trasntion option and fade effect) but I am not able to use it. Can someone help me a little bit with that script, for me is simportant to have that transition on hover only for background color.
Thank you.
IE8 doesn't support CSS3 transitions. You'll have to fake it using JavaScript tweens, or settle for IE9 support. IE8 users don't deserve nice looking websites anyway :-)
But if you're in the awkward position of being tasked with creating IE compatible stuff, take a look at this MSDN introduction to Filters and Transitions. It appears that even the IE specific transition filters require JavaScript to work, so you might as well go with the proper JavaScript solution of using jQuery.animate. With a small plugin it can animate colors. Here's an example on JSFiddle.
For some reason the website you suggested doesn't render properly in my browser. However, I think you may be attacking the problem wrongly. I would use jQuery's $.animate() function for this, as it is very cross browser and can animate gradual changes in many css properties.
I was wondering if there was any jQuery library that will allow us to change the perspective of an image.
I know that modern browsers already support vendor specific rotate() in CSS but it doesn't quite give the desired result. Most of them just vary the width of the image but doesn't shrink the height of one side and increase the height of one side to produce the effect that you are viewing the image from another angle.
Any more details that you may need, please tell me. Thanks!
EDIT
I already tried transforms but they don't increase the height of the side that is moving towards you and decrease the one that is moving away from you. And I don't do full rotations, i just tilt the image a few degrees so the change in height has to really be there
Have a look at script3D.js
http://minimal.be/lab/Sprite3D/
could be usefull for 3D css animations.
CSS3 has 2D-transforms and 3D-transforms. While the first is well supported (by all browsers, not by all used versions [1]) the second is currently only supported by mozilla and webkit [2]. Both features mostly need vendor-prefixes.
And of course you can animate them with jQuery, if you want to.
I'd like to create a dropdown menu with rounded corners without using images. I tried combining the suckerfish menu plugin with a number of the JQuery rounded corners plugins, which mostly worked fine in Firefox, but looked terrible in IE.
Does anybody have an easy combination of plug-ins that will work with both IE and Firefox?
Did you already try DD Roundies? I've had pretty good cross-browser success with this code, it also fixes background image transparent pngs, the only code library I've found that actually did this on all browsers.
Try using CSS3 border-radius and if really necessary, CSS3Pie for IE<9 compatibility.