css3だけでコンテンツスライダー

by kachibito

HTML

<div class="container">
    <div id="slider">
        <div id="mask">
            <ul> 
                <li>
                    <a href="#" title="View my second image link"><img src="http://kachibito.net/wp-content/uploads/2011/11/im000.jpg" /></a>
                    <span>
                        <h2>Image Caption</h2>
                        <p>Lorem ipsum dolor...</p>
                    </span>
                </li>
                <li>
                    <iframe src="http://ja.wikipedia.org/wiki/%E6%9D%B1%E4%BA%AC" width="600" height="200" frameborder="0" scrolling="no"></iframe>
                    <span>
                        <h2>Iframe Caption</h2>
                    </span>
                </li>
                <li>            
                    Carrot cake sugar plum donut bonbon wafer cheesecake chocolate bar I love brownie. Gummi bears cheesecake tootsie roll brownie. Caramels sweet roll halvah cotton candy cookie oat cake chocolate. Cookie jelly beans apple pie candy canes I love dessert I love.
Powder applicake candy I love gingerbread fruitcake icing chocolate cake. I love I love danish. Pastry applicake liquorice chocolate bar marshmallow biscuit chocolate cake.
I love tiramisu pastry danish powder. Apple pie pastry cheesecake pastry jelly. I love donut I love apple pie. Lemon drops chocolate jujubes pie marshmallow marzipan applicake macaroon.
Jujubes I love cheesecake. Apple pie biscuit bonbon marzipan muffin croissant lollipop. Fruitcake gingerbread toffee jujubes sugar plum croissant jelly bonbon. Jelly-o sweet gummies sweet tootsie roll chocolate candy jelly-o faworki.
Halvah tart marzipan. Sweet roll jelly-o powder muffin wafer cotton candy. Danish I love cupcake gummi bears.
                </li>
            </ul>
        </div>
        <div id="progress">
        </div>
        <div id="overlay">
        </div>
        <div id="pause">
        </div>
    </div>
</div>

CSS

#slider { /* Styles the <div> that contains everything slider related */
    width:600px;
    height:200px;
    position:relative;
    margin:40px auto 0;
    background-color:#362c30;
    border:10px solid #362c30;
    transform:rotate(0deg); /* Default rotation that the #slider <div> will come back to after the "shakey bounce" effect. For more information on transforms, check out: http://www.w3schools.com/css3/css3_2dtransforms.asp */
    -ms-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -moz-transition:all 150ms ease-in;  /* Allows all property values to animate on hover. For information on transitions, check out: http://w3schools.com/css3/css3_transitions.asp */
    -webkit-transition:all 150ms ease-in;
    -o-transition:all 150ms ease-in;
}
#slider:hover { /* Since we added the transistion property to #slider <div>, the previous properties will now animate to these new properties on hover */
    background-color:#fff;
    border:10px solid #fff;
    -webkit-animation:rotatey 400ms ease-out; /* Once we hover on #slider <div>, the "shakey bounce" animation will play (animating #slider <div>). For more information on animations, check out: http://www.w3schools.com/css3/css3_animations.asp */
    -moz-animation:rotatey 400ms ease-out;
}
#slider:hover #pause { /* When we hover over #slider <div>, our #pause <div> will become visible - which will display the pause icon */
    opacity:1;
}
#slider:hover #progress { /* When we hover over #slider <div>, the background color of our #progress <div> will become transparent. This will give the effect of the progress bar fading away on hover */
    background-color:rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay { /* When we hover over the unordered list <ul> inside of #slider <div> (the slides), all of our slide related animations will pause */
    -moz-animation-play-state:paused;
   ...