#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2008
    Posts
    7
    Rep Power
    0

    How to build this in CSS?


    Hi everyone,

    I'm hoping you guys can help me out. I've been looking around at a couple websites and this stood out to me:

    Nintendo's WiiU website (/wiiu/features/) *sorry cant post links yet*

    At the bottom there's a section called "Different Ways to Play" which looks like a basic scrolling horizontal photo gallery but with transitioning. I was wondering how I would go about creating something similar to this? Seems like Javascript would have to be implemented, correct?
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Welcome to DevShed Forums, Kaidao.

    Yes, you need JavaScript to do that. (CSS3 Animations may be able to do it at some point, but cross-browser support isn't good enough at this point and I'd say that since it's user-interactive it should be done with JS anyway.)

    That kind of thing is often called a "slideshow" or "carousel".
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2008
    Posts
    7
    Rep Power
    0
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, Kaidao.

    Yes, you need JavaScript to do that. (CSS3 Animations may be able to do it at some point, but cross-browser support isn't good enough at this point and I'd say that since it's user-interactive it should be done with JS anyway.)

    That kind of thing is often called a "slideshow" or "carousel".
    Thanks for your speedy response! Are there any recommended tutorials for creating something like that?
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    If you use jQuery, there are lots of plugins to do that. Here's tutorial for how to do this with one.

    Here's the best one I've found that doesn't use jQuery: http://symmetrycode.com/super-easy-j...ider-tutorial/

    Here are two others that doesn't use jQuery that aren't completely awful:
    http://www.code-sucks.com/code/javas...slide_show.php
    http://www.webmonkey.com/2010/02/mak...ipt_slideshow/
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Santa Clara, CA
    Posts
    5
    Rep Power
    0
    Just to get a sense of things I found this list of Jquery effect methods useful. (can't post links yet sorry) http://ww w.w3schools.com/jquery/jquery_ref_effects.asp found it at @veriously
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Originally Posted by AK223
    Just to get a sense of things I found this list of Jquery effect methods useful. (can't post links yet sorry) http://ww w.w3schools.com/jquery/jquery_ref_effects.asp found it at @veriously
    Welcome to DevShed Forums, AK223.

    Please do not post links to that site here. There are better resources elsewhere. I recommend you read this: W3Fools: A W3Schools Intervention

    Why go to W3Schools for this anyway, when jQuery has great documentation? http://api.jquery.com/category/effects/
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo