Click here to Skip to main content
Click here to Skip to main content

Strips: A cool animated way to load image on a webpage

By , 22 Aug 2013
Rate this:
Please Sign up or sign in to vote.
Animation demo:

A GIF showing the final image loading animation

While browsing the net, one day I stumbled upon a page that loaded its header image in very cool animated stripes (as shown in the demo GIF). The website was using Flash to draw this animation. Although this was a nice animation it was using a lot of browser resources (in terms of memory and CPU use).

So I decided to make a much lighter JavaScript function that will achieve the same effect using CSS3 transitions. Here is the basic code that I came up with in the next hour of my free time.

I hope that others will improve upon it to add more animation choices.

Key points:

  • CSS3 Transitions are used for the animation
  • In old browsers that don’t support CSS3 transitions, the image is loaded without the animation

An example:

imageStripsMaker({
    img: {
        url: "a.jpg",
        width: 426, /* IN PIXELS*/
        height: 320 /* IN PIXELS*/
    },
    strips: 10, /* THE NUMBER OF STRIPS. PREFEREBLY USE A NUMBER THAT IS A FACTOR OF THE IMAGE HEIGHT */
    delay: 0.1, /* DELAY BETWEEN START OF ANIMATION FOR EACH STRIP (IN SECONDS) */
    time: 1, /* THE TIME IN WHICH TO FINISH THE ANIMATION OF EACH STRIP (IN SECONDS) */
    direction : "left", /* DIRECTION OF WHERE THE IMAGE STRIP SHOULD COME FROM */
    /* DIRECTION CAN BE: "left", "right", "mixed" or "random" */
    addIn: document.getElementById("myDiv") /* THE HTML ELEMENT NODE IN WHICH THE IMAGE SHOULD BE LOADED */
});

The function takes data and creates multiple span elements (depending on the number of strips). Then it adds the image as a background for these spans with different background-position values such that they are just out of view. It adds the relevant CSS transition styles. Then it triggers the background-position change to make the image portions visible.

Hope you have fun with it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Anshu Krishna
Technical Lead
India India
Languages that I work in: Python, JavaScript, C++, C, HTML, CSS, C#, PHP, SQL
Follow on   Google+

Comments and Discussions

 
GeneralMy vote of 4 PinmemberMember 1000423124-Aug-13 6:31 
GeneralRe: My vote of 4 PinprofessionalAnshu Krishna25-Aug-13 21:21 
GeneralSimple solution, simple algorithm, but great result! PinmemberPham Dinh Truong8-Aug-13 21:50 
GeneralRe: Simple solution, simple algorithm, but great result! PinprofessionalAnshu Krishna10-Aug-13 7:51 
GeneralMy vote of 5 Pinmemberamity200124-Jul-13 0:13 
GeneralRe: My vote of 5 PinprofessionalAnshu Krishna10-Aug-13 7:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140421.2 | Last Updated 22 Aug 2013
Article Copyright 2013 by Anshu Krishna
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid