Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css bouncing ball help needed

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #33620
    furrball1383
    Member

    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.

    http://i54.tinypic.com/1zvww1j.png

    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!

    #83880
    Billy
    Participant

    Have you watched the screencast Chris has done about CSS3 animations?

    #83886
    furrball1383
    Member

    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!

    #83890
    chrisburton
    Participant

    I came across a website that has the animation you’re asking but I can’t remember what it was.

    #83897
    furrball1383
    Member

    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!

    #83899
    furrball1383
    Member

    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:

    1, http://www.the-art-of-web.com/css/bouncing-ball-animation/
    bouncing ball but linear motion

    2, http://www.kaizou.org/2011/06/pure-css-bouncing-balls/comment-page-1/#comment-3467
    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!

    3, http://johntidey.tumblr.com/demos/dribbbleball
    this is probably the one you saw @ChristopherBurton but its only webkit

    #84054
    furrball1383
    Member

    Ok so I have it ‘kind of’ working.
    My main problem being that I am quite terrible at creating my own JS which would have saved me tons of time. With javascript I could have pretty much specified a formula to create the co-ordinates that the ball needed to be at every step of the way, but instead I chose to sit and do it step by step in key frames. Not the smoothest animation out there, but I’m at my wits end. and so here is the example

    http://jsfiddle.net/4qUc2/

    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!

    #84086

    After much stuffing around: http://jsfiddle.net/sl1dr/W5cyE/

    It would be much smoother with javascript.

    #84088
    furrball1383
    Member

    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 css

    #84089

    @furrball1383 Webkit only (chrome or safari). You can add moz prefixes if you like.

    #84112
    furrball1383
    Member

    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?

    #84132

    Yes there is. Chris has a post about it on here: https://css-tricks.com/5970-data-uris/

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.