First off, I am currently using JQuery so JQuery solutions viable.
I want to rotate an image by a dynamic X degrees which is calculated every sec.
Now I had this working perfectly using this JqueryRotate plugin
The image is rotated perfectly every sec. But I am trying something a little more complicated now.
I want to rotate 4 transparent images on top of each other. Currently I have four <img> tags all correctly aligned and looking nice and pretty ^_^ but using the JqueryRotate plugin that I mentioned earlier forces a redrawing of the image to rotate it losing the transparency so only the top most image is displayed which obviously isn't going to work.
So, What is a good library / plugin or way of rotating an Image whilst keeping transparency?*
Must work in Opera, Safari, Chrome, Firefox and IE8+
I am hoping not to have to include another library for this but if need be I will do so to create this effect of rotating the 4 images. Thanks in advance.
Raphael is a great library that works in IE (with VML) and other browsers (with SVG). It can rotate images and deal with transparency.
I don't know of any other way to deal with IE. CSS solutions are quite easy, but they don't work in IE.
Another option is to simulate image rotation with CSS sprites (the example does a simulated 3d rotatoin, but 2d is just as easy).
Well it might work even with jQueryRotate plugin, have you asked author (me) about this ? :P I dont read stackoverflow so often to answer that kind of requests :)
You could look at using Canvas. No native support from IE 8 but there is a plugin: http://ajaxian.com/archives/explorer-canvas-updated-for-ie-8-and-more.
If you were willing to live with the plugin requirement, Canvas should make your job easy.
Your best chance is to use canvas and use the IE canvas hack.
The CSS rotate for IE, like most other hacks for IE, uses the filter property, which will almost certainly interfere with the filter hack that's used for transparent images and the filter hack for changing opacity.
The canvas hack, on the other hand, uses native VML instead, which handles everything you need.
http://code.google.com/p/explorercanvas/
I don't know how performant it is, so your mileage may vary there.
Related
I am having problem while rotating the image in IE 8 , it works perfect in other browsers(Chrome,Mozilla,Firefox).
Is there any other way for this except filter progid:DXImageTransform.Microsoft.Basic Image(rotation) as I am having some problem while using this filter in zooming the image in IE 8.
After a perticular level of zoom ,image resets to its normal rotation(Angle 0) before that zoom level everything goes perfect but once this scenario occurs image resets on every zoom level on rotation of image. I think it may be the filters issue.
if any good article is there for the same then kindly share , this can also be helpful.
The transform property is CSS3 and is not supported in IE8. Your only options are to use the filter property, or draw vector shapes using VML.
IE's old filter styles are notoriously buggy. Thank goodness it's less of an issue now that modern IE versions don't need it any more.
Yes, it's possible to use them to do things like rotation and gradients, etc in older IE versions, but you have to be careful to understand that they are ActiveX controls, and not a native part of the browser.
This means that they have some limitations and quirks, some of which cannot be worked around. In particular, you will have problems if you try to combine them with other browser features that modify the element or the layout around it.
I've never tried using zoom in conjunction with a filter rotation, but it sounds like a classic case of features that may not work well together. If that's the case, you may simply have to accept that it's not going to work in old IE versions.
Perhaps you could find an alternative way to do what you want without using zoom? If it's a text element, maybe doubling the font-size would do the trick? Or if it's an image, maybe increasing the width and height and letting the browser scale the image for you.
If none of that works, the final solution may simply be to provide IE8 users with a slightly less exciting version of your site that doesn't do zooming and rotation quite a much as it does in other browsers.
Is there a way to change colors of an image much like in Flash/ActionScript with using only HTML5/CSS/JavaScript?
Here's an example in Flash: http://www.kirupa.com/developer/actionscript/color.htm
My guess would be that it's only possible with Canvas, as far I know; but I'd like to know if there's another solution out there that also supports IE7 & IE8, without the need to install a google plugin for IE.
It depends on what you're trying to do.
If all you want is to overlay an image with a color, then you could layer a DIV on top which has a partially-transparent PNG of the desired color as its background image. Here's a JS Fiddle demonstrating:
http://jsfiddle.net/btCfK/
I don't have a copy of IE 7 handy to check, but I'm pretty sure that'll work in older IEs (later than 6 anyway).
This example uses a fixed size for both the overlay and the image. With some clever coding you could change that, and make a JavaScript based control for swapping colors in or out.
If you want something more sophisticated than that, it's probably not practical without using a Canvas element, SVG, or one heck of a lot of JavaScript.
I just stumbled upon this question and I thought I'd mention CSS filters.
At this time, only Chrome fully supports them (http://caniuse.com/#feat=css-filters), but things might improve in the future.
I'm trying to come up with a way to mimik something we were previously doing in Adobe Flash using some sort of Bitmap Filter but instead with pure javascript.
Previously we had a set of PNG images w/ transparency around the core image. When an image was clicked, a soft glow (ala border) would be added around the non-transparent portion of the image, slightly consuming some of the transparency but the majority of the outer transparent portion would remain transparent.
W/ javascript I can easily add a border around the entire image when clicked, but that is not what I am aiming for. I only want a border around the non-transparent portion of the image.
I'm unfortunately not familiar enough with image manipulation techniques, so I'm curious if there is a way I could achieve this using the various JS image manipulation libs out there ala BitmapData or Pixastic. Taking a look at both of these I wonder if there is something I could do w/ edge detection, glowing effects, and overlays...
If you're already using Raphael (or are willing to use it), you might consider using Dmitry's blur plugin. Building on this answer, I was able to achieve the glow effect I think you're looking for by adding another image behind the one I'd like "glowed". The background image is blurred, giving a "glow" or "halo" around the crisp image on top.
Sample code:
var img = this.R.image("yourImage.png", 0, 0, 50, 50);
var glow = img.clone().toBack();
glow.blur(5);
The plugin includes the caveat that there's no WebKit support. It seems that there is now some WebKit support as it works in Chrome (I'm running 18.0) but not Safari (I'm running 5.1.5).
I only want a border around the non-transparent portion of the image.
It is impossible to do it with js. Only if a replacement image is already prepared. Canvas is not really a solution (if you need compatibility) and all these 'calculations' will take resources and time.
I'm not sure it's entirely suitable for your situation, but there are tools out there to convert Flash to HTML (e.g. Swiffy). I suspect they can be flaky at times, but it's something to consider :)
I feel that it has come time to convert my flash panoramas to js/html5/css3. I've seen some elegant solutions using separate flat images, but mine are all fisheye...
My intuition tells me that it's doable using -webkit-transform: matrix3d but I'm not quite hitting it.
Any ideas if this can really be done in css3?
Thanksya kindly.
Yes, it can be done, but you better know your mathematics. Note that you are not using CSS3 but rather a proprietary extension, this will only work in webkit browsers. You'll probably be better off using a Canvas element for the job, not only is it supported by more browsers, it also gives you far greater freedom to do whatever transformation you desire.
Edit:
Well then, cut your image into a number of thin vertical slices, each slice should be scaled by approx 1/cos([angle off centre]), and skewed to account for the angle being different at the right and the left side of the slice. This way you should end up with an "inverse fisheye" shape where the top and the bottom of the image is concave, you might want to cut it to a square.
I discovered three.js.
It looks promising.
I have a couple of UI elements such as buttons in my web application. I was going to use CSS3's transitions to animate the transition from one background-image to another. I figured out that it's not possible with the current transitions draft at least. So, I was wondering if it would make sense to use Canvas as the button. I'm sure it can handle events, so, I see no problems here. Are there any?
Other than the fact that it's not supported in IE, no.
canvas is not supported in Internet Explorer. Also, canvas animations render very slowly on PCs with little CPU power.
Unless you are writing something that is for a specific target audience (say internal users with Firefox and dual-core cpu) I think you should avoid using canvas for now...
I came to conclusion: using Canvas for UI elements is not a good idea.
For example, if you create a select-box using Canvas, how is the list going to appear in the top of other HTML elements?
Use raphael.js (MIT license) - it give you canvas-like API using SVG (and VML for IE) and works in all amjor browsers including IE6. And its fast (not too slow even in IE)