I'm currently trying to figure out how to animate the sprite properly without the help of extra libraries other than jQuery. This is the live demo of what I have right now.
Controls: A for left, D for right, Space for jump, left mouse click to fire.
Here's the problem: if I press the left and right keys really fast, the animation gets screwed up, try it yourself since It's kind of hard to describe the mess...
My code is very scrappy right now because I'm playing around with many methods, so please bear with me for now. Here's the JavaScript code. If you want to see the html and css, they are in the same directory.
$('#obj') is the object of the sprite.
I am too lazy to look at the links for your code. If you say it is acting crazy, sounds like you are not cancelling the animations before applying the next one. Call stop() before running the next animation.
$("#obj").stop().animate(...)
Related
I'm trying to make an image carousel from Scratch in ReactJS.
This is what I have so far:
https://codesandbox.io/embed/optimistic-elbakyan-4vzer?fontsize=14&hidenavigation=1&theme=dark
Drag with your mouse to change the image. Try it and you'll see that at some speeds it feels a little, stuttering? I don't really know how to explain it, and english isn't my first language.
Any suggestions to make it run smoother? I'm experimenting, so maybe my approach isn't the best. I'm all ears.
It seems to work fine on my end, the only thing is sometimes when dragging your mouse will still be dragging even when you aren't holding left click sometimes (probably when you mouse leaves the page then you let go)
I'm sure this exists but I don't know how it is called, so I don't succeed at finding it on the internet.
I'm trying to do an image presenter which can loop with a rotate effect, very similar to what you can find in video games such as the good old tomb raider 2 menu for example:
When you press left or right arrow, you can navigate between the items.
See that in action here: https://youtu.be/1T7ueLPuq94?t=197 (the player navigate to the left, he could have switched to more items, it rotates and loopes).
I would like to achieve that with this rotation effect and the loop with css3 and javascript. Can anybody help me with that?
I put part of my code in a pen https://codepen.io/Flaburgan/pen/jOOrEdx but I need help about the way to handle it. Should I start with nothing in my DOM and create elements with JS? Should I have all the nodes in my DOM as I know them from the beginning and they are not going to change? But then how do I loop back to the first elem?
I found this page http://www.wanderworld.io/ when you scrolling its start animation on scrolling and scenes are changing. how to create something like this? Please help me, any example on jsffidle or codepen?
To point you in the right direction, this is called parallax scrolling and can be accomplished using CSS, but is most commonly done in Javascript / jQuery.
This library is great for parallax animation and would probably accomplish most, if not all, of what the example site does: http://prinzhorn.github.io/skrollr/
Basically the idea is to have a page scroll listener that tracks the window.scroll position. At certain ranges, elements move in and out of the screen. The concept behind it is relatively simple, but it can be difficult to implement and can be as complicated as you choose to make it.
I'm a total amateur at jQuery, HTML, css and everything and I'd be really grateful if anyone with some more knowledge could help me. This is a site I'm in the middle of making for my girlfriend: www.sharyncunneen.com.
If you click around on the buttons there you'll notice I've done some animated page transitions involving the opacity, size and position of the buttons. The problem is when I click the browser back button: if I click it at a reasonably slow pace the transitions still work fine but if I click several times fast in a row it's like the jQuery/javascript doesn't get time to catch up or something. I don't really know.
Do you need to see files or code? I won't include anything else yet. I think it's better to let you tell me what information would help you because I'm not sure about the best way to proceed on this forum and I'd like to learn from experienced users.
I don't see any transition at all o0
Anyway, you can use the jquery queue function.
Start a queue when starting the animation et clear it when your transition is finished. You can also limit the number of queued events to avoid the website getting crazy with speedy click.
As I was looking through Killers Music html5 site, I wanted to do what they did with main navigation where when mouse is over to left or right, it will scroll infinite.
I have when through their javascript file, also inspected elements and one thing was for sure, they update left css property to scroll the background images.
I am not quite sure how to do that smoothly. I know I can use setTimeout to update the left but not sure what value I have to calculate to apply.
I am going to need someone's help or if there is any tutorial for it, it would be wonderful.
Please help.
It uses the jQuery easing plugin.
Some demo are available here: http://jqueryui.com/demos/effect/easing.html