Member 10427643 Ответов: 2

Мерцающая анимация с помощью CSS и /или Javascript

Привет,

Я уже несколько часов пытаюсь понять, как создать "мерцающую" текстовую анимацию, как вы можете видеть в примерах:

http://www.leedsbuildingsociety.co.uk/resources/kick-my-habits/[^]

http://www.served-mcr.com/[^]

Не мог бы кто-нибудь объяснить, с каким Javascript-плагином это работает или есть ли только CSS-решение (идеальное)?

Заранее большое спасибо.

С уважением

Sergey Alexandrovich Kryukov

Никто не любит мерцание, оно заставляет людей нервничать. Анимация на первом сайте на самом деле не мерцает, но она обладает некоторыми свойствами раздражения, похожими на мерцание. Не хотите ли вы придумать что-нибудь получше?
—СА

Member 10427643

Спасибо за ваш комментарий. Речь шла не об оценке эстетики или выборе дизайна. Речь шла просто о технической реализации этого эффекта. Есть идеи, как это сделать? Спасибо за Ваши советы.

Sergey Alexandrovich Kryukov

Я понимаю, о чем идет речь, спасибо. Тем не менее, позвольте мне остановиться на важных аспектах эстетики или выбора дизайна, поскольку в реальной жизни они, в некотором смысле, более важны, чем реализация. Кстати, я ответил на ваш вопрос.
—СА

2 Ответов

Рейтинг:
0

Sergey Alexandrovich Kryukov

Пожалуйста, смотрите мой комментарий к этому вопросу. У нас и так слишком много раздражающих и отвлекающих спецэффектов на веб-страницах.

На втором сайте ваша ссылка выглядит лучше и может быть реализована в таком простом виде, как всего один файл, анимированный GIF: http://en.wikipedia.org/wiki/Animated_GIF#Animated_GIF[^].

Существует множество редакторов для их редактирования или компиляции из существующих фреймов.

Первый из них… Прежде всего, позвольте мне дать вам один способ посмотреть, как что-то реализовано на странице: возьмите свой веб-браузер, откройте страницу и используйте "просмотр исходного кода страницы" (или что-то в этом роде), рекурсивно загрузите все скрипты и файлы стилей. А потом посмотрим, как это работает.

В этом руководстве объясняется, как создавать анимации только для CSS: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations[^].

Вы можете найти несколько простых примеров, например, здесь: https://daneden.me/animate/[^].

С помощью Javascript вы можете создавать гораздо более продвинутые анимации, особенно если используете функцию HTML5 Canvas:
http://en.wikipedia.org/wiki/HTML5_canvas[^],
некоторые впечатляющие образцы: http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/[^].

Теперь оставшиеся шаги делают некоторую работу. Пожалуйста, продолжайте, но, пожалуйста, не делайте это чрезмерным или раздражающим. :-)

—СА

Рейтинг:
0

Member 10427643

Спасибо за ваш ответ.

Я уже посмотрел исходный код "ужасных выносов"-пример. Вы можете найти соответствующие разделы в приложении.

Что заставляет меня задуматься, так это фоновое изображение, которое они использовали:

http://www.leedsbuildingsociety.co.uk/resources/kick-my-habits/img/screen-2-titles-stacked.png[^]

Почему они не использовали серию из нескольких картинок, а вместо этого свели все в одну картинку?

HTML:

&ЛТ;1 полугодие класс="мерцание АБС-средний ИК"и GT;ужасно вынос&ЛТ;/Н1&ГТ;

CSS:

.привычка.тока .вспышка {
-webkit-анимация: flicker .2s шаги(1) Бесконечные;
-moz-анимация: flicker .2s шаги(1) Бесконечные;
-ms-анимация: flicker .2s шаги(1) Бесконечные;
-o-анимация: мерцание .2s шагов(1) бесконечно;
анимация: flicker .2s шаги(1) Бесконечные;
}

.экрана.вынос Н1 {
ширина: 465px;
высота: 333px;
маржа: -330px 0 0 -524px;
фоновое изображение: url(../img/screen-2-titles-stacked.png);
}

Тем не менее, реализация этого кода не работает для меня, что говорит о том, что я что-то упускаю из виду или что-то связано с Javascript.

Есть идеи, чего не хватает?