20.11.2019, 17:20
|
|
Кандидат Javascript-наук
|
|
Регистрация: 11.10.2016
Сообщений: 141
|
|
Нужно сначала загрузить изображения (кешировать), и только потом запускать анимацию.
Подскажите как это сделать?
И чтобы не было мерцания во время проигрывания изображений.
До окончательной загрузки хотелось бы чтобы отображалось первое изображение из списка: http://pr-demo.96.lt/demo/animate/1.png |
|
20.11.2019, 18:13
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от WebMachine
|
|
поэтому фон логотипа должен быть прозрачным
|
Что тут не так?
<style>
.anm {
height: 160px;
padding: 20px;
background: url(https://img-cdn.tinkoffjournal.ru/cover-samara-inside.8vuijdvbtrl0.jpg);
}
.masc {
font: 120px Arial;
display: inline-block;
overflow: hidden;
margin: 0;
font-weight: 800;
color: transparent;
background: linear-gradient(115deg, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 44%, rgba(255,255,255,1) 48%, rgba(255,0,0,1) 53%, rgba(255,0,0,1) 100%);
background-size: 6em 100%;
animation-duration: 2s;
animation-name: slide;
animation-iteration-count: infinite;
background-position: 0 0;
-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text;
}
@keyframes slide {
from {
background-position: 100% 0;
}
to {
background-position: 0 0;
}
}
</style>
<div class="anm">
<h1 class="masc">Text</h1>
</div>
Последний раз редактировалось laimas, 20.11.2019 в 18:16.
|
|
20.11.2019, 18:15
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от WebMachine
|
|
чтобы не было мерцания во время проигрывания изображений
|
Мы видим фильм как 24 кадра в секунду, то есть каждый мы наблюдаем 2.5 сек. Если точнее, для кино, то немного меньше, за вычетом времени на смену кадра, но в это время обтюратор киноаппарата перекрывает световой поток.
Последний раз редактировалось laimas, 20.11.2019 в 18:26.
|
|
20.11.2019, 18:56
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от Rise
|
|
это на каждый около 0.041666 сек.
|
 да, это я не то разделил. |
|
20.11.2019, 21:40
|
|
Кандидат Javascript-наук
|
|
Регистрация: 11.10.2016
Сообщений: 141
|
|
|
animation-delay задает задержку до начала первого проигрывания.
А как сделать задержку после каждого проигрывания?
|
|
20.11.2019, 21:46
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Сообщение от WebMachine
|
|
А как сделать задержку после каждого проигрывания?
|
@keyframes slide {
0% {
background-position: 100% 0;
}
20% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
animation-duration: 4.5s;
|
|
20.11.2019, 21:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
WebMachine,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.anm {
height: 160px;
padding: 20px;
background: url(https://img-cdn.tinkoffjournal.ru/cover-samara-inside.8vuijdvbtrl0.jpg);
}
.masc {
font: 120px Arial;
display: inline-block;
overflow: hidden;
margin: 0;
font-weight: 800;
color: transparent;
background: linear-gradient(115deg, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 44%, rgba(255,255,255,1) 48%, rgba(255,0,0,1) 53%, rgba(255,0,0,1) 100%);
background-size: 6em 100%;
animation-duration: 4.5s;
animation-name: slide;
animation-iteration-count: infinite;
background-position: 0 0;
-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text;
}
@keyframes slide {
0% {
background-position: 100% 0;
}
40% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
</style>
<div class="anm">
<h1 class="masc">Text</h1>
</div>
</body>
</html>
|
|
21.11.2019, 00:46
|
|
Кандидат Javascript-наук
|
|
Регистрация: 11.10.2016
Сообщений: 141
|
|
|
Спасибо вам ребят) вы лучшие!
|
|
21.11.2019, 02:11
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
|
|
|
|
