суббота, 23 августа 2014 г.

[вёрстка] Делаем для сайта слайдер на CSS. Часть 4. Красивый слайдер с прокруткой.

В предыдущей статье мы остановились на том что сделали симпатичный слайдер с прокруткой. В этой статье я покажу доработанный вариант этого слайдера, имеющий большее разнообразие эффектов анимации.

Каждый кадр слайдера я разделил на два слоя. Нижний слой содержит изображение и анимируется одновременно прокруткой и затуханием.

Верхний слой содержит текстовую подпись кадра. При смене кадра он анимируется плавными затуханием и проявлением.

Я вынес стрелки навигации за пределы кадра, чтобы они не мешали просмотру содержимого кадра. При переходе на первый и последний кадр стрелки «назад» и «вперёд» не исчезают мгновенно, а также затухают плавно.

Этот слайдер имеет ограничение: фон страницы сайта должен быть однотонным. (В этом примере — белым. Но отредактировав стили можно использовать слайдер с любым другим одноцветным фоном.)

Вот что у меня получилось:

Восход над островом

Озёрный край

Закатная синева

Сельский пейзаж

Код слайдера:

<style>
    .sliderD {
        width: 400px;
        height: 250px;
        position: relative;
        text-align: center;
        margin: 28px auto 20px auto;
        z-index: 0;
    }

    .sliderD > div:first-child {
        width: 100%;
        height: 100%;
        border: 8px solid #fff;
        box-shadow: 1px 1px 4px #666;
        border-radius: 5px;
        position: absolute;
        top: -8px;
        left: -8px;
        z-index: 30;
    }

    .sliderD:before {
        content: ' ';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 20;
        top: 0px;
        right: 100%;

        background: -moz-linear-gradient(left, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(40%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%); /* IE10+ */
        background: linear-gradient(to right, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%); /* W3C */
    }

    .sliderD:after {
        content: ' ';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 20;
        top: 0px;
        left: 100%;

        background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%); /* IE10+ */
        background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%); /* W3C */
    }

    .sliderD > input {
        display: none;
    }

    .sliderD > input + label,
    .sliderD > input + label + label {
        display: block;
        width: 50px;
        height: 50px;

        visibility: hidden;
        opacity: 0;
        transition: opacity 0.8s ease-out 0s, visibility 0s 1s;

        cursor: pointer;

        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
    }

    .sliderD > input + label {
        right: 105%;
        background: url('https://lh3.googleusercontent.com/-tacAA4lVYgc/VeVDqFrDRRI/AAAAAAAAAT4/RBongekAUqI/s800-Ic42/prev.png')
    }

    .sliderD > input + label + label {
        left: 105%;
        background: url('https://lh3.googleusercontent.com/-gy6RMZnCdAc/VeVDqJF1S5I/AAAAAAAAAT0/D4nN8T9RGro/s800-Ic42/next.png')
    }

    .sliderD > input:checked + label,
    .sliderD > input:checked + label + label {
        visibility: visible;
        opacity: 0.4;
        transition: opacity 0.8s ease-out 0s, visibility 0s 0s;
    }

    .sliderD > input:checked + label:hover,
    .sliderD > input:checked + label + label:hover {
        opacity: 0.6;
    }

    .sliderD > label:first-of-type,
    .sliderD > label:last-of-type {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    .sliderD > div {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        z-index: 0;
        width: 1000%;
        text-align: left;
        transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    }

    .sliderD > input:nth-of-type(2):checked ~ div { left: -100%; }
    .sliderD > input:nth-of-type(3):checked ~ div { left: -200%; }
    .sliderD > input:nth-of-type(4):checked ~ div { left: -300%; }
    .sliderD > input:nth-of-type(5):checked ~ div { left: -400%; }
    .sliderD > input:nth-of-type(6):checked ~ div { left: -500%; }
    .sliderD > input:nth-of-type(7):checked ~ div { left: -600%; }
    .sliderD > input:nth-of-type(8):checked ~ div { left: -700%; }
    .sliderD > input:nth-of-type(9):checked ~ div { left: -800%; }
    .sliderD > input:nth-of-type(10):checked ~ div { left: -900%; }

    .sliderD > div > div {
        display: inline-block;
        position: relative;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease-out 0.5s, visibility 0.1s 1s;
    }

    .sliderD > input:nth-of-type(1):checked ~ div > div:nth-of-type(1),
    .sliderD > input:nth-of-type(2):checked ~ div > div:nth-of-type(2),
    .sliderD > input:nth-of-type(3):checked ~ div > div:nth-of-type(3),
    .sliderD > input:nth-of-type(4):checked ~ div > div:nth-of-type(4),
    .sliderD > input:nth-of-type(5):checked ~ div > div:nth-of-type(5),
    .sliderD > input:nth-of-type(6):checked ~ div > div:nth-of-type(6),
    .sliderD > input:nth-of-type(7):checked ~ div > div:nth-of-type(7),
    .sliderD > input:nth-of-type(8):checked ~ div > div:nth-of-type(8),
    .sliderD > input:nth-of-type(8):checked ~ div > div:nth-of-type(9),
    .sliderD > input:nth-of-type(10):checked ~ div > div:nth-of-type(10) {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.4s ease-out 0.1s, visibility 0.1s ease-out 0s;
    }

    .sliderD > div + div {
        position: absolute;
        width: auto;
        height: auto;
        top: 0px;
        left: 0px !important;
        right: 0px;
        bottom: 0px;
        z-index: 40;
    }

    .sliderD > div + div > div {
        position: absolute;
        width: auto;
        height: auto;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease-out 0.0s, visibility 0.1s ease-out 1s;
    }

    .sliderD > input:nth-of-type(1):checked ~ div + div > div:nth-of-type(1),
    .sliderD > input:nth-of-type(2):checked ~ div + div > div:nth-of-type(2),
    .sliderD > input:nth-of-type(3):checked ~ div + div > div:nth-of-type(3),
    .sliderD > input:nth-of-type(4):checked ~ div + div > div:nth-of-type(4),
    .sliderD > input:nth-of-type(5):checked ~ div + div > div:nth-of-type(5),
    .sliderD > input:nth-of-type(6):checked ~ div + div > div:nth-of-type(6),
    .sliderD > input:nth-of-type(7):checked ~ div + div > div:nth-of-type(7),
    .sliderD > input:nth-of-type(8):checked ~ div + div > div:nth-of-type(8),
    .sliderD > input:nth-of-type(8):checked ~ div + div > div:nth-of-type(9),
    .sliderD > input:nth-of-type(10):checked ~ div + div > div:nth-of-type(10) {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.4s ease-out 0.9s, visibility 0.1s ease-out 0s;
    }


    .sliderD > div + div > div > p {
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        text-align: center;
        color: #fff;
        text-shadow: 1px 1px 2px #000;
    }
</style>

<div style='width: 100%; overflow: hidden;'>
<div class='sliderD'>
    <div></div>

    <input type="radio" name="slider1" id="slider1_1" checked="checked">
    <label for="slider1_4"></label>
    <label for="slider1_2"></label>

    <input type="radio" name="slider1" id="slider1_2">
    <label for="slider1_1"></label>
    <label for="slider1_3"></label>

    <input type="radio" name="slider1" id="slider1_3">
    <label for="slider1_2"></label>
    <label for="slider1_4"></label>

    <input type="radio" name="slider1" id="slider1_4">
    <label for="slider1_3"></label>
    <label for="slider1_1"></label>

    <div>
        <div>
            <img src='https://lh3.googleusercontent.com/-XGgw41OSARk/VePicTdAdgI/AAAAAAAAAS4/WeBbxp4ebQg/s400-Ic42/00099_manaisland_1920x1200.jpg' alt=''>
        </div><div>
            <img src='https://lh3.googleusercontent.com/-aafAKIoTkT4/VePihWk2BHI/AAAAAAAAATA/zQVtiYD_eDc/s400-Ic42/00201_lakejipe_1920x1200.jpg' alt=''>
        </div><div>
            <img src='https://lh3.googleusercontent.com/-ikbDMRhLc_I/VePkT4XLFtI/AAAAAAAAATg/qaHqQk89RAw/s400-Ic42/00744_laclahachesunset_1920x1200.jpg' alt=''>
        </div><div>
            <img src='https://lh3.googleusercontent.com/-BLXeHJNyOqw/VePimp_e_wI/AAAAAAAAATQ/BVw_9LFehyU/s400-Ic42/00442_pyrenees_1920x1200.jpg' alt=''>
        </div>
    </div>

    <div>
        <div>
            <p>Восход над островом</p>
        </div><div>
            <p>Озёрный край</p>
        </div><div>
            <p>Закатная синева</p>
        </div><div>
            <p>Сельский пейзаж</p>
        </div>
    </div>
</div>
</div>

Отправить комментарий