In the link below there are some bubbles wich animates from left to right in a loop. If you hover over one of them, it gets larger and stops animating. My problem is that the bubble doesnt stop for very long, I want it to stop permanently, until you click on it
http://jsfiddle.net/jukke/SU4gJ/1/
You are also more than welcome to rewrite parts of the code to make it better/cleaner. I dont really have much experience coding :)
Related
I currently have a really great vanilla JS script in place that smooths out the page scroll when the user is scrolling with the mousewheel. (Original script grabbed from here https://stackoverflow.com/a/47206289/9817996)
After adding a scroll to top link using
Scroll to top for simplicity, I have come across an issue where when this link is clicked, the page scrolls to the top then bounces right back to where it was.
Here is a Codepen showcasing the issue: https://codepen.io/kiaramelissa/pen/zYrYbbj
I have also tried creating a scroll to top button using Javascript but it does the exact same thing. I was wondering if anyone could assist with figuring out what is causing this?
I would ideally like to keep my smooth scroll as vanilla JS and not utilise any bulky plugins. Thanks in advance for any ideas!
This code works only when scrolling with the mouse wheel. But there is a problem with it.
update() function is constantly being called when scrolling down (up works ok). This is because moving is always true (delta always > 0.5).
if (Math.abs(delta) > 0.5)
If you put a console.log there you will see it for yourself.
I can't actually understand why the 0.5 is selected as a value, but if you make it 1 it will work for both scroll up and scroll down.
To further see my point, if you leave it as it is (0.5), and try to just scroll a little bit up after you scroll all the way down, you will see that the button works without bouncing back down.
After you make it 1, smooth scroll continues to work for both directions, and when the button is pressed, it stays up.
BUT the scroll to top (with the button) is not smooth! That is expected because your js code only works for mousewheel event, not with the # you used.
Let me just say that if your intention is to have smooth scroll when you press the button, and don't care about the mousewheel, then you will be better off with something like this:
css scroll-behavior or like this javascript scroll anchor without the need of your existing code.
If you want to keep the smooth scrolling when mousewheel is used, then you should use the javascript method from the above link, along side your existing code.
Also one more thing: If you press the button, before the scroll finishes (while easing out) it will jump to top and then it will bounce back where it was. That's expected, as js scroll code doesn't know anything about the button scroll behavior.
Here is the thing, I have three gifs, each one doing a part of an animation
<img src="images/carEnters.gif" id="enter">
<img src="images/carLeaves.gif" id="exit">
<img src="images/tireTracksDissappear.gif" id="delete">
these gifs are to be shown when the scrollTop reaches a certain value, which is when the div they will be shown in will be in the viewport. However, I only want the animation to happen once, meaning that I don't want it to repeat. Then, If the usar scrolls down, I want the gif where the car leaves to play (also once) and after it is done, I want the last gif to play. I have no idea if this is possible at all, to control the moment they start with the scrollTop and to pause the animation at specific time. I tried using freezeframe but it didn't work for me.
The idea is to create the effect of the car arriving when you scroll into that section, and as you leave, the car also leaves. Any idea or suggestion would be appreciated
UPDATE
I can't make it loop only once because the idea is that if the user scrolls backs up, the car should be able to enter again (or restart the animation, which I don't know if can be done with only one loop gif). The main problem would be... how to detect when the first gif ends and how to activate the second one... how to link them so it looks like a single animation
You could make a gif that doesn't loop, but just plays once: GIMP Tutorial. Any good image package (free or otherwise) should be able to do the same. Maybe you can open the existing gifs and resave them without looping?
hope your all good... Another question :/
Heres the page im working on:
http://beelinetest.site50.net/uw_virtual_tour.html#
Its not a huge problem, but if you press the tabs quickly- two will shoot up- what can i do about this? So it waits for the first tab to complete its movement?
Also, another thing while im here, notice the slight hover over movement ive added to the tabs? When hovered over they move 7px up, then back down when un-hovered. But when clicked the tab moves up and it still thinks my mouse is on hover... Its not until i move the mouse until it moves back down 7px...
Thanks in advance, Tom
Your click handler for each tab should disable the clicks on the other tabs until the "slide in" function is complete. Looking at your code, it might be easier to accomplish if you had a common selector rather than selecting each individual one by id. Perhaps you could add a class to each div you want to use as a tab, then you could operate on them as a group.
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.
Here is my current code, http://jsfiddle.net/HRZ3D/2/ with it I have been unable to do the following,
Make the 10px side of the dock appear upon mouseover to an area 10px wide starting at the side of the window
Make that edge of the dock clickable so as to make the dock's content then appear afterwards, or otherwise disappear if the mouse moves away
Make the docks content then disappear again, once the mouse has re-clicked the dock's edge.
If I can get all this to work, I hope to be able to animate it in a way that the dock looks to actually slide out of the side of the screen. I don't know why my current code is incapable of at least doing the first three things in that sequence and would greatly appreciate help with this.
I updated the CSS and modified the jQuery.
See: http://jsfiddle.net/Kai/LrsGc/
Hopefully that gets you close enough to where you need to be. :)