X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Слайдер на css
prolisk
prolisk
Topic Starter сообщение 26.12.2014, 22:16; Ответить: prolisk
Сообщение #1


Привожу рабочий код слайдера на css без разных яваскриптов и подобного. Вставили в страницу и радуемся :)
Код написан не мной, найден на просторах. Я подпилял и юзаю на сайтах. Код сделан для 4 картинок.
Стили:
.slides {
    height:290px;
    overflow:hidden;
position: relative;
    width:600px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* Кадры анимации #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* анимация css3 */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* Задержки css3 */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
margin-top: 15px;
    display:block;
width: 600px;
height: 300px;
}

/* Кадры анимации #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:12px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:auto;

    /* Анимация css3 */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}


Вывод на странице, html-код:
<div class="slides">
<ul><!-- Слайды -->
    <li><img src="Ссылка на 1 картинку" alt="image01" />
<div>Заголовок для 1 картинки</div></li>
    <li><img src="картинка с форматом" alt="image02" />
<div>название 2 картинки</div></li>
    <li><img src="картинка с форматом" alt="image03" />
<div>название для 3 картинки</div></li>
    <li><img src="http://полный адрес картинки" alt="image04" />
<div>Танцуй, пляши, 4 картинка</div></li>
</ul>
</div>


Если нужно изменить размер/цвет/фон - пишите ;-)


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
сообщение 27.12.2014, 10:31; Ответить: k0ttee
Сообщение #2


Слайдер на css

"И все остальное, на что хватит фантазии с умением" - я бы сказал. На CSS (и возможно немнго JS) прекрасно делаются анимированные рекламные баннеры, которые при правильных названиях классов и id + немного нестандартных размерах, смогут избежать выпиливания адблоком. Да и просто "flash не нужен".


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
shaddad_mw
shaddad_mw
сообщение 5.1.2015, 22:29; Ответить: shaddad_mw
Сообщение #3


Чуваки, ну вы хоть изображение прикрепляйте или... в конец концов, есть куча ресурсов, где можно продемонстрировать работу кода! Невыносимо же.
Итак, вот как работает слайдер - http://jsfiddle.net/qw4a01th/ - одним слово, отвратительно выглядит и ни фига не функциональный. CSS стремится вытеснить JS, но это произойдет еще не скоро. А IE-дрочеры так вообще пожизненно будут его использовать.

Данный пример можно встроить куда-нибудь как безделушку, но явно не в качестве слайдера.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prolisk
prolisk
Topic Starter сообщение 7.1.2015, 12:49; Ответить: prolisk
Сообщение #4


Владимир, он особо не функциональный, но работает. И главное нормально - картинки меняются, есть описание, плавный выход.
Конечно, допиливать нужно, НО каждый допиливает в меру своих нужд (я черный фон надписи менял по фону сайта либо вообще убирал, размеры картинок и блоков тоже менял). :)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3335 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3292 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Веб-разработка (HTML, CSS)
1 ViktoriaFE 6438 5.5.2021, 5:22
автор: bekett
Открытая тема (нет новых ответов) Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).
0 kozak199110 1652 3.3.2021, 12:22
автор: kozak199110
Открытая тема (нет новых ответов) Продам адаптивный шаблон (css/html/js) под cj/tube сайт
2 zaiko 1415 29.12.2020, 23:49
автор: zaiko


 



RSS Текстовая версия Сейчас: 29.3.2024, 10:39
Дизайн