SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Banner-like animations with HTML, CSS and Javascript

    Hi,

    I have seen that a lot of the animation that used to be done with flash can now be done with HTML5, CSS3 and Javascript. I have used some of the new CSS3 features, such is transformations, transitions, etc. but nothing fancy just simple stuff. I have been trying to find tutorials on how to create simple banners with HTML, CSS and Javascript but I havenít found any. What I'm looking for is something that shows how to create simple banners that slides objects in and out from different angles, something like Apple had for a while on their website, where some images came from one side and went out from another side. Again I just need to create something simple just to get the concept, I have never used Javascrtipt/JQuery other than for simple fade-ins and animate buttons, but nothing big.

    Does anybody know where can I find tutorials on how to create simple banner-like animations using html, css and possibly Javascript?

    I just need to know how the images are used and how everything is put together.

    Thanks a lot
    Thank you very much!!!

  2. #2
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much!!!

  3. #3
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like this site has what I needed, awesome!

    http://tympanus.net/codrops/2012/03/...s3-and-jquery/
    Thank you very much!!!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Those look pretty good. Other options might be things like Nivo Slider, Wow Slider and bxSlider.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you ralph for your reply, I have tried Nivo Slider in the past and it is so nice but what I was looking for at this time was a tutorial on how to do animations with CSS and Javascript.

    The main reason for my question is because I don’t have a clear understanding on how animations are created, I’m actually more concerned about the process not how to code them. In other words I don’t know understand where and how the images are place in the page without affecting the page layout.

    This is how I understand it, which could possibly work…

    1- Create a div container.
    2- Give it a width and a height so you have that container as you canvas.
    3- Place the different elements that are going to be used in the animation. Now, this is the tricky part and the part I don’t fully understand. Do you place your images, divs etc. inside the container hide them and then show or move them as needed OR do you fix or absolute position them outside the container and again, hide them and show them as needed?

    This is for animations that show, move and hide different elements inside the container not a slide show (like a banner).

    Thanks a lot
    Thank you very much!!!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by fs_tigre View Post
    This is how I understand it, which could possibly work…
    If you are going to use the parallax slider you linked to, just have a look at their code (inspect element). Yes, there is an outer div, and inner divs that contain text, images etc. With CSS you prevent them all showing at once, and with JS/CSS3 you animate them.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for the clarification.
    Thank you very much!!!


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
  •