HTML+CSS?+JS Слайдер текста
Есть шаблон сайта: http://demo.flytheme.net/themes/sm_style/index.php/ Там сверху есть слайдер текста:
Т.е. после иконки самолетика текст плавно сдвигается влево, а справа плавно выезжает другой текст.
Вопрос в том, как сделать это самостоятельно. Я не использую библиотеки для этого проекта, т.к. хочу именно повысить свои знания в области web(html,css,js).
С тем же эффектом промотки обратно, как на указанном сайте)))
Хотя на самом деле это косяк :D
* {
box-sizing: border-box;
}
body {
font-size: 2em;
}
section {
position: relative;
background: silver;
line-height: 1.5;
}
section:before {
content: "";
width: 1em;
height: 1em;
margin: .25em;
float: left;
background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=48&d=identicon&r=PG) no-repeat;
background-size: contain;
}
div {
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
white-space: nowrap;
list-style: none;
animation: slide-8 40s linear infinite;
}
li {
display: inline-block;
width: 100%;
}
@keyframes slide-8 {
0.0% { transform: translateX( 0 ) }
10.0% { transform: translateX( 0 ) }
12.5% { transform: translateX(-100%) }
22.5% { transform: translateX(-100%) }
25.0% { transform: translateX(-200%) }
35.0% { transform: translateX(-200%) }
37.5% { transform: translateX(-300%) }
47.5% { transform: translateX(-300%) }
50.0% { transform: translateX(-400%) }
60.0% { transform: translateX(-400%) }
62.5% { transform: translateX(-500%) }
72.5% { transform: translateX(-500%) }
75.0% { transform: translateX(-600%) }
85.0% { transform: translateX(-600%) }
87.5% { transform: translateX(-700%) }
97.5% { transform: translateX(-700%) }
}<section>
<div>
<ul>
<li>Первый пункт
<li>Второй
<li>И третий
<li>Ещё один
<li>И пятый
<li>Шестой
<li>Седьмой
<li>Ну и хватит
</ul>
</div>
</section>В хроме отлично работает, не могу понять в чем косяк ))
Я про перемотку от последнего пункта к первому. Обычно делается прокрутка в одну сторону, а тут получается в обратную очень быстро всё проматывается.
да, я обратил внимание, есть идеи как это исправить?? )
Если не использовать скрипты, то наиболее удобный вариант - сделать первый и последний пункты одинаковыми и добавить точку 100%. Тогда переход со 100 на 0 будет незаметен для пользователя, поскольку содержимое одинаково.
* {
box-sizing: border-box;
}
body {
font-size: 2em;
}
section {
position: relative;
background: silver;
line-height: 1.5;
}
section:before {
content: "";
width: 1em;
height: 1em;
margin: .25em;
float: left;
background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=48&d=identicon&r=PG) no-repeat;
background-size: contain;
}
div {
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
white-space: nowrap;
list-style: none;
animation: slide-8 40s linear infinite;
}
li {
display: inline-block;
width: 100%;
}
@keyframes slide-8 {
0.0% { transform: translateX( 0 ) }
10.0% { transform: translateX( 0 ) }
12.5% { transform: translateX(-100%) }
22.5% { transform: translateX(-100%) }
25.0% { transform: translateX(-200%) }
35.0% { transform: translateX(-200%) }
37.5% { transform: translateX(-300%) }
47.5% { transform: translateX(-300%) }
50.0% { transform: translateX(-400%) }
60.0% { transform: translateX(-400%) }
62.5% { transform: translateX(-500%) }
72.5% { transform: translateX(-500%) }
75.0% { transform: translateX(-600%) }
85.0% { transform: translateX(-600%) }
87.5% { transform: translateX(-700%) }
97.5% { transform: translateX(-700%) }
100.0% { transform: translateX(-800%) }
}<section>
<div>
<ul>
<li>Первый пункт
<li>Второй
<li>И третий
<li>Ещё один
<li>И пятый
<li>Шестой
<li>Седьмой
<li>Ну и хватит
<li>Первый пункт <!-- ещё раз -->
</ul>
</div>
</section>Ещё можно попробовать добавлять другие анимации, чтобы временно перемещать первый пункт в конец, но я не уверен, всегда ли и во всех ли браузерах анимации сработают достаточно синхронно, чтобы это осталось незамеченным для пользователя.
Ещё, теоретически, в css есть отображение элемента в другое место (даже два способа - как картинка (background: -moz-element(...)) и просто перенаправление потока рендеринга (не помню, как сделать, никто не поддерживает). Но, во-первых, оба способа не подходят из-за кроссбраузерности, а во-вторых, первый способ не позволит пользователю взаимодействовать с содержимым блока.
В таком случае вот вам ответ подсказка:
- Есть блок контейнер с фиксированной шириной и
overflow: hidden - Внутри блока элементы стоящие в линию.
- Элементы перемещается по таймеру.
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
- Почему SERVER_ADDR имеет не тот IP 47554 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30492 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23626 visits
- Как через css изменить цвет png изображения? 10347 visits
- Blob video url download 9956 visits
- Php curl запрос через прокси с авторизацией 9206 visits
- Работа с captcha vk api 8088 visits
© "hostciti.net" 18.11.2024 | 21:39