Fliying ribbon

by mmarcon

HTML

<div id="sky">
    <div id="banner">
        <div id="banner-container">
            <p>"I will not go" said the stranger</p>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Candal);

#sky {
    position: relative;
    padding: 50px 0;
    overflow: hidden;
    background-image: url(http://dl.dropbox.com/u/234787/ifiddle/sky.jpg);
    bacground-position: center center;
    background-repeat: repeat-x;
    max-width: 960px;
    margin: 20px auto;
    box-shadow: 0 0 20px #666;
}

#banner {
    background-color: #4682b4;
    width: 1600px;
    padding: 20px;
    position: relative;
    left: 200px;
    z-index: 1500;
}

#banner:before {
    content: " ";
    width: 132px;
    height: 6px;
    background-color: #333;
    position: absolute;
    top: 50%;
    z-index: 3000;
    left: -200px;
    margin-top: -3px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

#banner:after {
    content: " ";
    width: 256px;
    height: 134px;
    position: absolute;
    top: 50%;
    left: -350px;
    z-index: 3001;
    margin-top: -92px;
    background-image: url(http://dl.dropbox.com/u/234787/ifiddle/helicopter.png);
}

#banner-container:before {
    content: " ";
    width: 0px;
    height: 0px;
    border-width: 81px;
    border-style: solid;
    position: absolute;
    top: 0;
    left: -162px;
    border-color: transparent #4682b4 transparent transparent;
    z-index: 2000;
}

#banner-container:after {
    content: " ";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: -70px;
    background-color: #fff;
    border-radius: 10px;
    z-index: 2001;
    margin-top: -5px;
}

#banner p {
    font-family: 'Candal', arial, sans-serif;
    font-size: 72px;
    height: 100px;
    line-height: 100px;
    padding: 10px;
    text-transform: uppercase;
    color: #2F2F4F;
    text-shadow: -1px -1px 0 #000;
    background-color: #4682b4;
    text-align: center;
}

#banner-container {
    border: 1px dashed #fff;
}

JavaScript

$(function() {
    $('#banner').animate({
        left: '-1800px'
    }, 10000, null, function() {
        var $target = $(this);
        var loop = function() {
            $target.css ('left', '2200px');
            $target.animate ({
                left: '-1800px'
            }, 10000, null, loop);
        };
        loop();
    });
});