I would like to create a spinning menu akin to the one done in flash here. Are there any relevant links you know about to help with this endeavor?
Thank you kindly.
You can do it with a series of images and just swap them. Without getting into complexities of cross-browser canvas/svg that's probably the easiest way to do it.
You could use the <canvas> tag.
You could make a circular image map with the mouseovers, and then use css rotates with animation on the angle in something like jQuery so that the currently selected item is at the top. However, this would be limited in the amount of browsers that support it (mozilla and webkit). I think there is a similar thing in IE, but requires an ActiveX overlay
Related
Hi I have to animate using Javascript or somme kind of library (or CSS, whatever works best).
I am more of a PHP coder and I am not a Javascript expert. I am not exactly sure how to explain what I need so I am going to try explain it visually by adding a (badly drawn) picture:
I need help in how I can proceed with this, whether you can tell me what terms I can search for on Google, links to articles, anything will be appreciated.
Here a global list of what you can use to animate something (all of these combined with a scroll listener in your case)
Anime.js if you don't care about IE<11
Canvas also can be good option and has wide browser support
Keyframes used with classlist api to fire animation when it needed
Sometimes you can just change src of image to gif (without endless animation in your case)
I recommend you to just using GIF here if you can.
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.
When i was surfing on the internet, i saw this : http://www.enter-the-void.co.uk/#/menu
Have you got an idea about make this with jquery / html5 ?
Thank you in advance.
EDIT :
Finally i think the best way is use this method :
Create a container div with height 100% and width of 1200px per example
Create and fix on this container many little div
With jQuery get mouse position and move the container div at right or left
When the container moving add "perspective" style with CSS 3D transform on little divs
What do you think ?
Obviously, there are several creative way to get at this. BUT, as of right now, no browser supports 3d rendering natively. However, webkit, opera, and mozilla do support 2d rendering
What this means is that through javascript and css solely you can create the appearance of 3d. But beyond what has been already mentioned (WebGL, three.js library, canvas tricks), no browser supports 3d rendering.
Read my year old blog post about this: Simple '3D' Rendering With CSS3 and Javascript
Off the top of my head, Three.js could help you with that. Its a javascript library for rendering 3D objects. The objects themselves wouldn't be too hard I guess; a bunch of flat surfaces with custom textures. The camera might be harder to accomplish though.
You Can Use Webgl or canvas for Make This Effect
Like rory mccrossan said in the comment.
check for jquery parallax, thats exactly what happens on the into the void site.
put your divs on differnt parallax layers and see the magic happen ;-)
http://stephband.info/jparallax/
https://github.com/IanLunn/jQuery-Parallax
http://www.sequencejs.com/themes/sliding-horizontal-parallax/
Forgive me if this is not the best forum to ask this question in. I'm not sure where to start, so maybe someone here can direct me.
Using html and jquery/javascript, I want an animation of one item flipping over another item. Almost as if someone is taking a page out from a file and replacing it on top of another page in the file.
Please see attached picture for referance.
If (and only if) you need some custom animations, check out this sweet jQuery plugin: http://weepy.github.com/jquery.path/
It should get you going in the right direction. Your general approach:
Create a path that swings Box2 into position in step 4.
Change z-index of Box2 to be on top of Box1.
Animate Box2 back along the same path in the opposite direction.
Addition: here's a good ReadMe for creating your path: https://github.com/weepy/jquery.path/blob/master/README.markdown
Addtion #2: It was asked how to do rotation, so I dug up a couple plugins to do that:
http://plugins.jquery.com/project/AnimateRotation
http://plugins.jquery.com/project/jQueryRotate
If anyone has experience with either of these (I don't) leave a comment below for the OP!
Rotation
http://code.google.com/p/jqueryrotate/
http://code.google.com/p/jqueryrotate/wiki/Examples
This plugin is for images specifically while in CSS3 compatible browser other elements will work in older browsers and IE: don't expect other elements to work.
Example:
$myContainer = $('selector');
$myContainer.rotate({animateTo:45}).animate({'left':100,'top':-100}, function(){
$myContainer.css('z-index', 2).rotate({animateTo:0}).animate({'left':0,'top':0});
});
Maybe try to combine it with http://weepy.github.com/jquery.path/ (credit to Adam Terlson for posting it) for smooth path animation. Looks like a great plugin.
In my experience rotating in IE is always glitchy.
I adopted couple scripts a while back into something that worked best for me: http://pastebin.com/kDK9mu9W however I did this for a project of mine and never test it outside and it does not have animation - you would need to use a interval.
IE7, IE8 & CSS3 compatible browser support for all elements. Images are wrapped in divs to prevent filter conflicts.
Is this a question? You certainly could use jquery to do this and there are already some plugins that offer something similar. See the shuffle type animation of jCycle
http://jquery.malsup.com/cycle/
I'm sure you could take a look at the code there to get some pointers on how to proceed.
There's an excellent tutorial here that explains the basics of sprite animation with jQuery. It's not a solution for your specific question, but it offers a quick introduction to the concepts you'll need.
Have two divs with appropriate Z-scores. Animate div to slide top right, as soon as div is completely free, switch z-score and reverse animation.
I know it is possible to use jQuery to do something like:
$('body').css('cursor','wait');
What I want to know is: is it possible to change the cursor to a custom loading animation, such as a simple 'spinner' gif?
Many thanks in advance.
You are just manipulating CSS on the fly here. See the spec — URIs are acceptable. Browser support is variable. I haven't tried it in years, but last time I did Internet Explorer required the cursors to be in .cur format.
That said, while it is possible, there are a good set of standard cursors that users recognise. It is rare that you will have thing usefully represented by a cursor that isn't covered by the standard list, and when that list does cover things it should be used so users don't have to learn a new icon.
yes, have a look at this page
custom cursor
or this
custom cursor - 2 (easier to understand/customize i guess)
(but using non-default cursors is probably not a great idea)