Galeria obrazków w HTML5

26 sierpnia, 2012 w kategoriach: Web developing, HTML, xHTML, Zaawansowane opcje

14,742 0
Dane:
  • Czas pracy: 10min
  • Poziom: Podstawowy
Opis:

Dzisiaj chciałbym przedstawić jak w prosty sposób zrobić pokaz slajdów w HTML5 z wykorzystaniem "Pixastic – JavaScript Image Processing Library", którą można ściągnąć ze strony autora tutoriala, link podam niżej. Tutorial powstał dzięki stronie http://script-tutorials.com

Pokaż/Ukryj wszystko

W tutorialu pokazane jest jak za pomocą kilku kroków zrobić łatwą galerię w HTML5 z wykorzystaniem JavaScript. Demo możemy zobaczyć tutaj, a wszystkie gotowe pliki ściągnąć ze strony tutoriala.


Wydawnictwo Strefa Kursów

Najpierw przygotujmy sobie plik index.html dla naszego pokazu slajdów, chyba nie trzeba tego tłumaczyć.

<!DOCTYPE html>
    <html lang="en" >
        <head>
            <meta charset="utf-8" />
            <title>CSS3 Image Hover Effects | Script Tutorials</title>
            <link href="css/layout.css" rel="stylesheet" type="text/css" />
            <link href="css/gall.css" rel="stylesheet" type="text/css" />
        </head>
        <body>
            <header>
                <h2>CSS3 Image Hover Effects</h2>
                <a href="http://www.script-tutorials.com/css3-image-hover-effects/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
            </header>

            <!-- panel with buttons -->
            <div class="photos">
                <div>
                    <img src="images/pic1.jpg" />
                    <div></div>
                </div>
                <div>
                    <img src="images/pic2.jpg" />
                    <div></div>
                </div>
                <div>
                    <img src="images/pic3.jpg" />
                    <div></div>
                </div>
                <div>
                    <img src="images/pic4.jpg" />
                    <div></div>
                </div>
                <div>
                    <img src="images/pic5.jpg" />
                    <div></div>
                </div>
                <div>
                    <img src="images/pic6.jpg" />
                    <div></div>
                </div>
                <div>
                    <img src="images/pic7.jpg" />
                    <div></div>
                </div>
                <div>
                    <img src="images/pic8.jpg" />
                    <div></div>
                </div>
                <div class="pair">
                    <img src="images/pic9.jpg" />
                    <div></div>
                    <div></div>
                </div>
            </div>
        </body>
    </html>

Teraz przejdźmy do kodu CSS

  .photos {
        width: 945px;
        height: 400px;
        margin: 100px auto;
        position:relative;
    }
    .photos > div {
        background-color: rgba(128, 128, 128, 0.5);
        border: 2px solid #444;
        float: left;
        height: 100px;
        margin: 5px;
        overflow: hidden;
        position: relative;
        width: 300px;
        z-index: 1;

        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;

        -webkit-transform:scale(1.0);
        -moz-transform:scale(1.0);
        -ms-transform:scale(1.0);
        -o-transform:scale(1.0);
        transform:scale(1.0);

        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        -ms-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
        transition-duration: 0.5s;
    }
    .photos > div img{
        width: 100%;
    }
    .photos > div:hover{
        z-index: 10;

        -webkit-transform:scale(2.0);
        -moz-transform:scale(2.0);
        -ms-transform:scale(2.0);
        -o-transform:scale(2.0);
        transform:scale(2.0);
    }
    .photos > div div {
        background: url(../images/hover.gif) repeat scroll 0 0 transparent;
        cursor: pointer;
        height: 100%;
        left: 0;
        opacity: 0.5;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 15;

        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        -ms-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
        transition-duration: 0.5s;  }
    .photos > div:nth-child(1):hover div {
        height: 0%;
    }

    .photos > div:nth-child(2):hover div {
        height: 0%;
        margin-top: 100px;
    }
    .photos > div:nth-child(3):hover div {
        width: 0%;
    }
    .photos > div:nth-child(4):hover div {
        margin-left: 300px;
        width: 0%;
    }
    .photos > div:nth-child(5):hover div {
        height: 0%;
        margin-left: 150px;
        margin-top: 50px;
        width: 0%;
    }
    .photos > div:nth-child(6):hover div {
        margin-left: 150px;
        width: 0%;
    }
    .photos > div:nth-child(7):hover div {
        height: 0%;
        margin-left: 150px;
        margin-top: 50px;
        width: 0%;

        -webkit-transform: rotateX(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
    .photos > div:nth-child(8):hover div {
        height: 0%;
        margin-left: 150px;
        margin-top: 50px;
        width: 0%;

        -webkit-transform: rotateZ(600deg);
        -moz-transform: rotateZ(600deg);
        -ms-transform: rotateZ(600deg);
        -o-transform: rotateZ(600deg);
        transform: rotateZ(600deg);
    }
    .photos > div.pair div {
        width: 50%;
    }
    .photos > div.pair div:nth-child(odd) {
        margin-left: 150px;
    }
    .photos > div.pair:hover div {
        width: 0%;
    }
    .photos > div.pair:hover div:nth-child(odd) {
        margin-left: 300px;
    }

Dziękujemy stronie http://www.script-tutorials.com za udostępnienie tego tutoriala.

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dodaj komentarz