SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Animation without Flash

    Hi all,

    For a client I need to make an "animation". But the site needs to work for mobile users as well, so I can't use Flash. What I want: a technical product with different components (they are numbered). When visitors hover one of the components a tooltip should pop up with a definition/explanation of the component. Can I do this with CSS and can someone point me to some kind of tutorial?

    I was thinking of absolutely positioning the numbers, and combine that with a hover effect. Don't know if this works well with the responsive site though.

    Any advice?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Jammmy View Post
    When visitors hover one of the components a tooltip should pop up with a definition/explanation of the component.
    You can certainly do that with CSS, but the first thing to consider is that hover doesn't work on mobile, so it might be better to with tooltips based on clicks, which pretty much requires JavaScript. Do you have an image of what you want?

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for your input. What javascript do you suggest? I'm pretty good with css but not with Javascript
    This is the image:
    ecrane.png

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lots of good jquery examples out there you can look at.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Jammmy View Post
    Hi, thanks for your input. What javascript do you suggest? I'm pretty good with css but not with Javascript
    I'm not totally sure what you are after, but this might help:

    http://pop.seaofclouds.com/

    There might be other options, like tab buttons that reveal more text etc. Really depends on what you want to see on the page.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that looks like something I can use!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Great. Give it a try and let us know how you go.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •