- This topic is empty.
July 24, 2011 at 12:25 pm #33620
Hi well I’m quite proficient in css but I’m new to the whole css3 animations stuff and basically I want to make a ball that bounces onto the screen and keeps growing in size as it bounces till it comes to rest.
the graphic basically shows how its going to go. I am basically going to have an image of a ball that is doing this and am going to have the image itself rotating as well. the thing I’m having a problem with is how to create the arc like motion of the ball between bounces. in just using transitions the movement of the ball is linear and so i can’t get my head around how to do this. I would like to do it using only css if possible, but if not then I guess I shall have to resort to using js with it as well. Anyway I was hoping one of you guys have already done something similar and so have an idea of how I could create this effect. Hope to hear from you guys soon!July 24, 2011 at 12:28 pm #83880BillyParticipant
Have you watched the screencast Chris has done about CSS3 animations?July 24, 2011 at 1:02 pm #83886
yes actually i have, but after you mentioned it I did re-watch the video. I guess I could create the arcing motion by specifying the position on different key frames but seeing as there are going to be 3.5 arcs, that would be looking at a lot of key frames which in other words means a lot of code. I shall keep thinking about it and see what i can put together with that method, but in the mean time, if anyone comes up with a solution that requires less code do let me know!July 24, 2011 at 1:38 pm #83890chrisburtonParticipant
I came across a website that has the animation you’re asking but I can’t remember what it was.July 24, 2011 at 2:59 pm #83897
aww lol i found one where he simply bounces the ball from side to side, bu not in an arc. if you do remember the website, let me know. I shall hunt for it!July 24, 2011 at 3:26 pm #83899
aww lol i found one where he simply bounces the ball from side to side, bu not in an arc. if you do remember the website, let me know. I shall hunt for it!
ok well here’s what i came up with:
bouncing ball but linear motion
got the arc and everything but its going to take me some time to gain an uderstanding of how the code works, so if I figure it out, you shall see my example soon!
this is probably the one you saw @ChristopherBurton but its only webkitJuly 27, 2011 at 10:11 am #84054
Ok so I have it ‘kind of’ working.
My problem with doing it in java script is that the function I want is a sin curve with decreasing amplitude and wavelength that produces 3 bounces for the ball before it winds up at (0px, 0px).
At the same time, since the size of the ball is constantly increasing, this means that I can’t have the same x co-ordinates for the floor on every bounce because the ball is bigger with each bounce. ugh.
Anyway, I hope someone takes a look at it and lets me know how I can create the same effect but with less code. If you decide to say use JS I would need some sort of example of how to go about it.
I did also look into using canvas as an option, but having the image replaced and redrawn each time while having it rotate and also figuring out the co-ordinates might make me weep, so I gave up on that idea. Sometimes its harsh when you have an idea in your head but don’t have the programming skill to pull it off. I know the same thing could be done in flash and would take me hardly any time, but the purpose of this exercise was to create it using css animations. @sl1dr or @ChristopherBurton I hope you guys take a peek!July 27, 2011 at 9:33 pm #84086
After much stuffing around: http://jsfiddle.net/sl1dr/W5cyE/
hey sl1dr, the ball wouldn’t move in your fiddle, anyway, thanks for the attempt, i noticed that you used pure css for the background pattern. Tre cool! Also, I definitely agree about the js being smoother, but to that end I need to figure out how to adjust the formula to deal with the ball’s increasing size. still, trying to accomplish the motion using js shall is my ongoing attempt as i believe I have taken it as far as I can go using only cssJuly 27, 2011 at 10:49 pm #84089
@furrball1383 Webkit only (chrome or safari). You can add moz prefixes if you like.July 28, 2011 at 5:47 am #84112
It works very well once I switched webkit out with moz, the only thing is making it browser compatible would atleast double the code which is why i’m still going to try and carry it out with js. Awesome stuff and thanks for taking a dabble at it sl1dr. Just one question, how did you get the ball in code, is there a program that converts pictures to code?July 28, 2011 at 9:34 am #84132
Yes there is. Chris has a post about it on here: https://css-tricks.com/5970-data-uris/
- The forum ‘CSS’ is closed to new topics and replies.