Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.11.2019, 15:41
Кандидат Javascript-наук
Отправить личное сообщение для WebMachine Посмотреть профиль Найти все сообщения от WebMachine
 
Регистрация: 11.10.2016
Сообщений: 141

Как сделать анимацию блика с помощью SVG или GIF
Всем привет.
В общем стоит задача, хотим сделать логотип без заднего фона, с анимацией блика.

В svg не шарим, но есть пример Того что мы хотим:
http://pr-demo.96.lt/demo/animate/123.html

Мы пробовали на gif но качество ужасное получается..
А если использовать метод движения полосы то полоса накладывается и на фон.. А нам нужно чтобы блик проходил только по логотипу.. Как в примере..
Можете посоветовать подходящее решение?

Последний раз редактировалось WebMachine, 19.11.2019 в 15:43.
Ответить с цитированием
  #2 (permalink)  
Старый 19.11.2019, 15:56
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

А на css? В сети уже готовых примеров эффектов с текстом на css много.
Ответить с цитированием
  #3 (permalink)  
Старый 19.11.2019, 16:16
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

Если оптика то нужно что то навроде такого ставить
https://stemkoski.github.io/Three.js/Bubble.html
Ответить с цитированием
  #4 (permalink)  
Старый 19.11.2019, 17:54
Кандидат Javascript-наук
Отправить личное сообщение для WebMachine Посмотреть профиль Найти все сообщения от WebMachine
 
Регистрация: 11.10.2016
Сообщений: 141

Сообщение от laimas Посмотреть сообщение
А на css? В сети уже готовых примеров эффектов с текстом на css много.
на css не получится.. так как полоса блика будет обтекать и сам фон.. а для задуманного эффекта нужно чтобы он обтекался по логотипу а не по фону..
Пример: http://pr-demo.96.lt/demo/animate/index.html
Ответить с цитированием
  #5 (permalink)  
Старый 19.11.2019, 18:56
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от WebMachine
на css не получится.. так как полоса блика будет обтекать и сам фон..
С чего вдруг:

<style>
.a {
  position: relative;
  font: 32px Arial;
  font-weight: bold;
  color: #AA0101;
}
.a:after {
  content: "";
  position: absolute; top: 0; left: -2em;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, rgba(255,255,255,.0), rgba(255,255,255,.8), rgba(255,255,255,.0)) no-repeat -2em 0%;
  background-size: 2em 100%;
  animation-duration: 3s;
  animation-name: slide;
  animation-iteration-count: infinite;
}

@keyframes slide {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  }
}
</style>

<div class="a">TEXT</div>


PS. Проблема с подбором градиента к фону, но можно же скомбинировать с маской.

Последний раз редактировалось laimas, 20.11.2019 в 02:49.
Ответить с цитированием
  #6 (permalink)  
Старый 20.11.2019, 16:30
Кандидат Javascript-наук
Отправить личное сообщение для WebMachine Посмотреть профиль Найти все сообщения от WebMachine
 
Регистрация: 11.10.2016
Сообщений: 141

Сообщение от laimas Посмотреть сообщение
С чего вдруг
https://jsfiddle.net/Georka/bxy3kae6/1/
Дело в том что логотип должен быть прозрачным а значит полоса блика должна проходить исключительно по самому логотипу не выходя за них. Иначе полоса будет видна на фоне и сама суть в этом уже теряется.
Ответить с цитированием
  #7 (permalink)  
Старый 20.11.2019, 16:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Прозрачный, в смысле видна подложка под ним?
Ответить с цитированием
  #8 (permalink)  
Старый 20.11.2019, 16:35
Кандидат Javascript-наук
Отправить личное сообщение для WebMachine Посмотреть профиль Найти все сообщения от WebMachine
 
Регистрация: 11.10.2016
Сообщений: 141

laimas, тут: http://pr-demo.96.lt/demo/animate/123.html

Во время проигрывания анимации всех изображений (а их 17) они будто частично на милисекунды исчезают и снова появляются.. как сделать чтобы до окончательной загрузки всех 17 изображений показывался первый png рисунок.. чтобы далее пошла гладкая анимация?

Тоесть код, в начале загружает 1 png рисунок и отображает его до тех пор пока не загрузятся все остальные а далее начинает показывать их по дорожке.. И важно чтобы можно было цикличность задавать, т.е скорость проигрывания к примеру 10 мсек после каждого изображения и общую паузу, т.е после последнего изображения должно стоять 5 сек задержка до начала очередного проигрывания..

Последний раз редактировалось WebMachine, 20.11.2019 в 16:38.
Ответить с цитированием
  #9 (permalink)  
Старый 20.11.2019, 16:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Нужно сначала загрузить изображения (кешировать), и только потом запускать анимацию.

И все таки, что значит логотип прозрачный? Не видно по ссылке такого. Может все таки background-clip: text и анимация градиента подложки?

Последний раз редактировалось laimas, 21.11.2019 в 09:39.
Ответить с цитированием
  #10 (permalink)  
Старый 20.11.2019, 17:05
Кандидат Javascript-наук
Отправить личное сообщение для WebMachine Посмотреть профиль Найти все сообщения от WebMachine
 
Регистрация: 11.10.2016
Сообщений: 141

Логотип лежит на фоновом изображении. поэтому фон логотипа должен быть прозрачным.. png
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как грамотно сделать большую таблицу или подобное? win32s (X)HTML/CSS 2 28.09.2019 15:59
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как сделать редирект или заблокировать кнопку в скрипте... allanmiln AJAX и COMET 5 16.02.2013 21:13
Как сделать анимацию элемента? Dimaz jQuery 6 24.01.2013 22:51
Как сделать непрерывную и плавную анимацию с jQuery в backgroundPosition? Isaac jQuery 2 21.01.2013 14:23