How is this image effect done?

Discussion in 'HTML & Website Design' started by ajkendall, Mar 2, 2008.

0
  1. #1
    Hi guys,

    Not made a topic in here for a while but i'll try and keep this short and sweet.

    How is this image effect done on the following web page: http://www.casinochoice.co.uk/reviews/intercasino

    When the page first loads the ratings bars grow into position - and the bar is only a background image - how is this achieved?

    The bars i am referring to are the ratings o the left such as Graphics, Playability etc.

    Any advice greatly appreciated

    Cheers

    :)
     
    ajkendall, Mar 2, 2008 IP
  2. vpguy

    vpguy Guest

    Messages:
    275
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Do a View Source and the relevant part is near the bottom:

    
document.getElementById('graphicsrating').style.width = "0%";
document.getElementById('playabilityrating').style.width = "0%";
document.getElementById('gamevarietyrating').style.width = "0%";
document.getElementById('promotionsrating').style.width = "0%";
document.getElementById('overallrating').style.width = "0%";
document.getElementById('paymentoptionsrating').style.width = "0%";

window.onload = function() {
ratingBarTransition('graphicsrating',90);
setTimeout("ratingBarTransition('playabilityrating',90);",50);
setTimeout("ratingBarTransition('gamevarietyrating',100);",100);
setTimeout("ratingBarTransition('promotionsrating',100);",150);
setTimeout("ratingBarTransition('paymentoptionsrating',90);",200);
setTimeout("ratingBarTransition('overallrating',94);",800);
}
    Code (markup):
    The function in question is ratingBarTransition() which is located in one of the included script files (not sure which one because I didn't load them). Check each of those for the appropriate code.
     
    vpguy, Mar 2, 2008 IP
  3. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #3
    A guess would be the width is resized. Here's a function from the JS:
    function ratingBarTransition(id,num) {
    bar = document.getElementById(id);
    baranim = new Tween(bar.style,'width',Tween.strongEaseInOut,0,num,1,'%');
    baranim.start();
    }

    Pulled from http://www.casinochoice.co.uk/js/general.js
    And there is a Tween.js as well. Odds are mootools could do this.

    Well with what vpguy posted, you almost have a solution :)
     
    shallowink, Mar 2, 2008 IP
  4. ajkendall

    ajkendall Active Member

    Messages:
    345
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #4
    thanks for the quick responses, shame my javascript isn't up to scratch and i only know the basics or i could create something similar

    i'll see wha mootolls has to offer :)
     
    ajkendall, Mar 2, 2008 IP