How to create the animated website without flash?

Discussion in 'HTML & Website Design' started by insomnia bear, Nov 18, 2011.

  1. #1
    Recently, I come across some websites that have the animated image without using the Flash. I wonder how they archive that kind of effect. I will list out some of the example website:

    1. http://2create.bg/
    2. http://kyan.com/

    I think this kind of effect is amazing. I wish I could do that as well. I just don't know what direction to head to for learning that kind of technique. Please help me out. Thank.
     
    Solved! View solution.
    insomnia bear, Nov 18, 2011 IP
  2. #2
    it is done using jQuery
     
    Jeehan, Nov 18, 2011 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,840
    Likes Received:
    4,542
    Best Answers:
    123
    Trophy Points:
    665
    #3
    And clever use of css

    HTML5 gives some animation too
     
    sarahk, Nov 19, 2011 IP
  4. insomnia bear

    insomnia bear Peon

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    CSS? CSS has ability in animating? I never learn about HTML5 and JQuery. Both of them are new to me. However, I can see their potential in the future of the web development.
     
    insomnia bear, Nov 19, 2011 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,840
    Likes Received:
    4,542
    Best Answers:
    123
    Trophy Points:
    665
    #5
    @insomnia - Look at :hover and what it lets you do.
     
    sarahk, Nov 19, 2011 IP
  6. flashblue

    flashblue Active Member

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #6
    You can use jQuery, HTML5.
     
    flashblue, Nov 24, 2011 IP
  7. ShinoRex

    ShinoRex Well-Known Member

    Messages:
    227
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    148
    #7
    CSS-5 has lot of mechanisms for animation. We can develop any type of animations using CSS-5. J QUERY too can use for animations.
     
    ShinoRex, Nov 27, 2011 IP
  8. xira

    xira Active Member

    Messages:
    315
    Likes Received:
    8
    Best Answers:
    4
    Trophy Points:
    68
    #8
    Just be careful with CSS animations because not all browsers are created equal. IE generally doesn't support much of anything, and there some animations in CSS3.0 that are either supported differently or hit/miss with FF and Chrome.
     
    xira, Nov 27, 2011 IP
  9. ShinoRex

    ShinoRex Well-Known Member

    Messages:
    227
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    148
    #9
    Yaaa..... Xira u r right... But Jquery too having same probm na...
     
    ShinoRex, Nov 27, 2011 IP
  10. juzarraga

    juzarraga Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    You can attain a lot of flash-like animation through the use of Jquery, but be careful and test regularly, JQuery may act funny on different browsers. HTML5 also has a suite of great animation techniques as well. CSS3 would probably be my third choice - I'm a big FF user and CSS3 animation is always kind of iffy.

    A lot of people say that HTML5 will be the "flash killer"... I think Flash is still too advanced and robust to have simple animations knock them out of the running.
     
    juzarraga, Nov 28, 2011 IP
  11. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #11
    Uh. The purpose of jQuery is to be cross-browser compatible.
    Oh? Name one.
    Is that why Adobe dumped Flash on mobile and is now concentrating on developing html/css/javascript tools?
     
    drhowarddrfine, Nov 28, 2011 IP
  12. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #12
    Yeah. Just wait till CSS-5 comes out in 40 years so we can all use it.
     
    drhowarddrfine, Nov 28, 2011 IP
  13. jcmos

    jcmos Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    html 5, canvas tag
     
    jcmos, Nov 28, 2011 IP
  14. insomnia bear

    insomnia bear Peon

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Well, thank for all the suggestions and ideas. I never expect so much feedback. However, it has started to confuse me. I never try JQuery and HTML 5. Among CSS3, JQuery and HTML 5, what do you recommend for a beginner to build a animated website? (to archieve the animation done on http://kyan.com/) Please recommend only one technique, learning three languages at the same time is really too much for me.
     
    insomnia bear, Nov 28, 2011 IP
  15. leanocodes

    leanocodes Member

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #15
    CSS and Jquery is the key! :)
     
    leanocodes, Nov 28, 2011 IP
  16. singhrahul1449

    singhrahul1449 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    it can also be done thru gif images..if you dont want too much animation
     
    singhrahul1449, Dec 1, 2011 IP