I am trying to make an animation using javascript.
Basically, there will be a window on a wall, and when the mouse hovers over, the window will open up, and an image will show.
I know this is really specific, but can someone good at javascript help me with it?
My thought on it is to create a gif that does the opening animation, and use javascript to control the timing.
What do you think?
Make a div and position it absolute so that this div will represent your window. Then make a function that represent an animation. Each time when it is called the function should make a tiny change to position and size of "window". Call this function at regular intervals with setTimeout and you will achieve animation. If mouse goes out you have to start rollback animation. Read a little bit more about JS times and u will write it.
Also as advice always white times like this:
setTimeout(func() {
....
}, 1000);
In this case func() will be called after 1000ms. So you can add this timer at the end of your function. Make your function to be called from func() and you will have the loop.
Hope this help you
I do not know if this will help but I created a website with a similar function for opening doors with the mouse hover. The website is http://www.bandofamericasfew.com/ Go view the source and see if it helps. If you have any questions then let me know.
Related
I would like to get the effect of a zooming image when someone opens a new page. So each page should have it's own image that zooms in every time the page is opened. I have an example in this website: http://www.fashionclub70.be/ (Click the "light version").
If a user clicks on a menuitem the corresponding page is opened and the image zooms in. on this website it is done with Flash, but I would like to use only Javascript for this. I don't really have a working knowledge of Flash. Do you have some pointers for me so I can successfully implement this?
Thanks
Maarten
I guess the easiest solution would be to use something like this : http://sliderjs.org/. Basically, you would put an empty place holder and load your image to some invisible div element.
Then, kick off a transition effect with a callback bound to your image's onload event.
You could use a canvas and put a picture on it. Evertything you would need for this can be found here:
http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
Edit: If you want to use CSS3 you could use
#pix{width:200px;height:300px;transition: all 2s;}
#pic:hover{transform:scale(4) translate(100px,100px)}
This would make the div tagged with this id move to the right and become 4 times as large during a period of 2 seconds.
The :hover part is just an event that would make the transition tick. Guess you want to use :active instead.
Hi to everyone this is my first ask on stackoverflow
I've created a simple code to manage a menu. Here is the code.
http://jsfiddle.net/corvallo/97x89/5/
If I click on "gestione news" all the menu elements will slide left with different delay
and an image (that on jsfiddle u can't see) with the text "Articoli" will appear.
So i click on the image and the text "articoli" will fadeOut and the menu elements will reappear with delay in the same position as before.
So the problem is that if I try for 4-5 times the first animation(that is the sliding left of the menu elements) will slowdown, and if I try again animation will be slower and slower.
I don't that the problem is in the delay() functions but in the $.each(), maybe I'm wrong.
Can someone help me with this.
Thank you in advance.
The animations seem to somewhat be still running for a while after they have apparently done their job. Use the following to see when they stop in Firebug or Chrome:
$(this).animate({"marginLeft":"0px"},"slow", function(){console.log("anim stopped");});
I am not sure why they are still running, but you can stop them before running new animations like this:
$(this).stop().animate({"marginLeft":"0px"},"slow");
This seems to fix the slowdown issues that you are experiencing.
Put your menu in a div. Instead of doing a foreach on each element, animate the main div.
Delay should not be causing your issue as all that does is wait to begin the animation timing, but having that many animations going at once is starting several internal timers instead of just one, which could lead to hiccups.
Please look at this page:
http://www.nike.com/nikeos/p/nikegolf/en_US/
In the slide number 2, there is a midpanel that does a growing effect onmouse over.Some panels step aside at the same time or simply grows over another. As you can see, the background changes, the box grows as well as its content. I think that is flash, but, is there a way to obtian the same results using jquery? I have certain jquery experience but i dont wich function would be usefull to combine to get those results
Thanks
I would say it is flash but if you want to do some thing like it try
http://api.jquery.com/animate/
I did a flash like effect for a customer using .animate() it can look very good using images for each part.
you should use the animate() function.
firstly, i would make sure the elements like those menu elements are all set to be variable width/height. then, make an onmouseover event handler which is tied to your animate function which will increase or decrease the size of the element that is being moused over. since all the elements are variable width/height, they will adjust based on the amount of space available to them. you probably will want to have a short animation time.
research animate and if you have any more questions post here.
Not easily, because the image itself is being animated. This is not just html object manipulation.
I've got a problem which you can look at here http://jsfiddle.net/dng2P/4/
If you click the detail button it shows you information and then if you click the "Points Statement" button it slides a layer down.
My problem is that I'm trying to make the main booking details div the same height as the points div if it's bigger and then when you click close put the main booking details height back to what it was originally.
It's half working as the main booking details div becomes the same height as the points div but just doesn't go back to what it was originally
Can anyone help?
Thanks
Jamie
How's this?
http://jsfiddle.net/dng2P/8/
All you did wrong was failing to keep the original height around properly. You only declared bookingdetailheight as a local variable which means it got re-declared for every toggle, and removed after every toggle was complete. I tied the original height to the DOM element with using .data(), it simplifies things when you might have people opening two of those toggles simultaneously.
I got on a roll though, so tidied up a bit and made the outer animate along with the inner. Oh and please look up the proper traversal methods in jQuery, parent().parent().parent().find() is asking for trouble. I think there's some left in parts I didn't look at.
I had a quick look at the jsfiddle code. I think the value that you take into the bookingdetailHeight should be declared outside the scope of the .points toggle function. that may help a little. just gonna try that :)
[edit] - didn't solve it -sorry :(
I have my object tracking the mouse using the onmousemove event. But I would like to make it smooth. I'm sure this can't be difficult in jQuery but I'm not finding any really good resources.
One idea I had was to simply use the animate function and calculating the offsets that I want to move to. Then if the mouse moves again before the animation is complete, I would use the stop function to stop the animation. I would recalculate my destination and away I go again. This seems a little hack-ish and I also imagine that it will be a little jerky. I'm sure there has to be a better way. Any Ideas?
EDIT
Sorry I didn't make my problem very clear. I have the object tracking the mouse in real time, so that it moves exactly the same as my mouse. The problem is that I want it to be smooth and lag behind with acceleration effects like Andy Lin mentioned below. I'm just a little lost how to actually implement this.
I am afraid, that there is no better way, than animate. If you add a smoothing function, then you would simply do the same thing that animate does. Be sure, not to queue your animations or they will look weird. I got nice results with this:
var obj = $('<div style="width:50px;height:50px;background:red;position:absolute"></div>');
obj.appendTo(document.body);
$(document).bind('mousemove',function(ev){
obj.animate({top:ev.pageY,left:ev.pageX},{queue:false,duration:200,easing:'linear'})});
when you are using onmousemove, you do not need to have the object change its behavior with every invocation.
e.g. you can add a timer to say that within period of time, the object will not response to mousemove and will follow its original path, and upon timeout or mouse move stop, move according to the destination.
also, you can simulate an acceleration and slow down effect with animation settings.