I'm looking to use an animated cursor in JS. CSS custom cursors do not animate in most browsers.
I have heard of people (can't recall who) doing this. They hide the regular cursor (by setting a transparent custom cursor), then create an image that follows the cursor in JS.
Anyone have any better ideas to achieve animated cursors? Is there a jquery plugin that will do this for you? I recall reading a blog that talks about this. Anyone heard of people doing this before?
Thanks.
Have you tried using .ani cursors? Also see controlling cursors with css. I guess you could try to hack this together yourself, but I don't see how you're going to hide the original cursor. Do you really need anything other than the widely supported usualy functionality?
li { cursor: text; }
a {cursor: pointer;}
You can use a transparent cursor, but some in some browsers it will show a black square instead of being transparent. Also, I have seen a couple examples that use canvas to add effects to the cursor.
A possible example http://jsfiddle.net/5mN9p/ borrowed from this question Animated image mask following mouse in HTML
All I added was
body{cursor:none;}
or possibly
canvas{cursor:none;}
Which means you can draw anything you want on the canvas at the mouse's coordinates.
Not tried this, but you should be able to create a custom CSS rule (create a class, like .customcursor, set the cursor to url(/path/to/image.png) and then, on a setInterval() cycle between images. Then apply that to your document body.
I haven't a clue how often you can run this, but it should work.
Related
If you take a quick look at the two links below, you'll see most people want to get rid of the outline around the area of a map on an image. I see this occurs on the MAC OS X platform, exclusively.
Removing outline on image map area
How do I get rid of this border outline for my image map areas when clicked (OS X Chrome Only)
However, what I want to do is show the outline in multiple browsers and change it's color and width. I tried but to avail. I created a style for an id. Didn't work. I tried using a class and that didn't work. I set an inline style and that didn't work, either. And I attempted it on both the map and area tags, by the way.
As of now, I use a gif to "border" the area when clicked. But it would make things so much easier if I could take advantage of the built-in shape attribute to highlight the area clicked.
Thank you very much for any help.
This answer looks interesting:
Changing the colour/transparency of a div on rollover or using an imagemap
Links to here: http://davidlynch.org/js/maphilight/docs/demo_simple.html
Older versions of Internet Explorer do not respect CSS for the area outlines. You can solve this by blocking the default handing of the mousedown event. If using jquery, something like
$('area').bind('mousedown',function(e) {
e.preventDefault();
});
would take care of it for all image maps on the page.
Also take a look at my plugin: http://www.outsharked.com/imagemapster which will let you easily handle outline (and other) effects on mouseover and click events.
There are many of us looking for a Javascript/CSS3 solution that can provide a windows7-like UI within a webpage, without using flash.
We need an Opacity mask, rounded borders, and a Blur...
We've got the Opacity and the rounded borders, now we need to be able to apply some Blur effects to a semi-transparent Div.
I tried the BlurFast effect from the Pixastic Library, but it only blurs the actual image, not the background we are seeing trough the image...
Basically, we want a Div to act as a Blur Mask over other contents...
If someone actually succeeded with this, i'll be glad to know its possible :) Thank you
http://t.co/fFLPKnzC
very good article on blur showing the state of the art
sadly "masking" parts of your page, that blur everything behind, is not that easy.
maybe the suggestions in ths blog help you out, as they are very straight forward and from a totally different direction..
therefor to embedd html within svg and use svg-filters on html elements later on
Thought this could be relevant: Aero
Personally, I think the fact that the author states this to be "In other words, one of the most messy and most ineffecient implementations ever"... AND that he can onlt get the effect to work in a single browser... to be extremely telling.
There is no way to do this efficiently or cross-browser at the moment.
The only way you might be able to do it is by using Pixastic to create the blurred image within Canvas, export as dataURI, then use that image as the background for your div. If the div moves, then the positioning of the background-image should move accordingly.
Flip is a great JQuery plugin for flipping blocks, but it doesn't preserve the background while it animates the flip.
For example, I have this pretty background here, before I flip. While flipping, it gets ugly.
Is there a way I can flip this div nicely, keeping the pretty background I have, and maybe even achieve a smoother animation than I can get with Flip?
If I need to dive into this headfirst and code my own function for flipping a div, that's also doable, and I'd really appreciate some pointer there, if that's what I must do.
Thanks so much!
Try the jQuery QuickFlip pulgin, this one seems pretty neat with handling the background.
Try looking into momoflow, its a coverflow type of application that animates the background to different angles.
It's using the canvas tag however, which could be an issue for you if you want IE compatibility. However the technique the dev is using is to chop the the image into several vertical slices and animate their position. You could extend this functionality to introduce a full flip!
A really cool way to do this is use CSS 3 transformations. It's much better than using a script; you should always avoid using scripts where simpler methods can be employed.
How to create such (see image below) effect using pure HTML JS and CSS?
(source: narod.ru)
For a site backgrownd (And I hoe that because of JS CSS and HTML it'll be able to change colors)
Well, this can be done with CSS Gradients.
But, i am not sure if that is supported in all browsers.
For cross-browser support, use this library.
You need a different approach.
Check out this url: http://www.eyecon.ro/colorpicker/.
As you can see when you move slider up and down it changes the background of the picker div.
But if you inspected this DIV with Firebug, you would see it is always using this image: http://www.eyecon.ro/colorpicker/images/colorpicker_overlay.png
..because parent div is using the actual colour:
<div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div>
Try to replace this background value in firebug, set it to green for instance - you will see gradient is still there, but this time gradient is green.
And that's our trick. Create semi-transparent PNG image to use as a background, with the pattern you showed above. Put it on top of the solid-colour background, and when you change background colour it will look like you replaced background image.
So in the theoretical code:
body { background:red; margin:0; padding:0; /* make sure overlay can stretch 100% in all directions*/ }
#background-overlay { background:url(path/to/image.png); }
<body>
<div id="background-overlay">
..content goes here
</div>
</body>
The downside of this approach is that IE6 doesn't support transparency for PNG files. You could either use some sort of png transparency fix or ignore this effect completely for IE6 users. (as we don't care about their feelings anyway, right? ;-))
Still in my humble opinion this is the most proper way to achieve the effect you want, knowing you would want to change background colours later.
I think this may require an image (which could be set through CSS to the background of whatever container you wish to put this in), but I don't think you'll be able to do this with pure scripting.
Technically speaking you can change your background-image using CSS. Getting it to tile properly left to right means creating the image at a width which makes the borders between horizontally repeated (background-repeat: repeat-x) images seamless, so that it will look like each diagonal line picks up on the left side where diagonal on the image to the right leaves off.
I want take a section of a picture, for example the middle of a picure, and repeat only that section in the background of a div. Is this even remotely possible? I suppose I could do this in javascript, but that would be messy.
In theory the answer to my question should be able to take a single pixel from a picture and repeat it in a line, or as a solid background.
Does anyone have any idea how I could do this in CSS?
You might be able to achieve this effect using the CSS3 border-image property.
Unfortunately, I am not aware of a way to do this sort of thing in CSS2. Also, I don't think that you can do this via CSS sprites, because sprites don't stretch parts of your image—they just allow you to show certain parts of the image.
Steve
Contrary to what some here have stated, depending on the image, you CAN do this with CSS/Sprites. But that isn't always going to be the case. It comes down to the image you want to repeat, it's height/width in relation to the sprite it exists on, the direction you want to repeat it, and the size of the container you want it to repeat in.
(source: sampsonresume.com)
This sprite could be repeated on the left 100px for use in a sidebar, while the other portions could serve as buttons and roll-over states in a navigation. with a small change, you could make the repeatable portion horizontal.
If you want a cross-browser solution, then currently you're out of luck, especially if you want a CSS-solution.
The only way to do it with JavaScript would be through the canvas element, but that's not supported by IE.
CSS cannot do this. You can however do it server-side or by using SVG graphics or Flash. Note that doing it with a plugin would not technically be a 'background-image", you'd need to position your content over the top of it.