Бегущая строка на ASP-странице [требует правки]

378

21 декабря 2016, 01:08

День добрый! Есть веб-приложение с использованием ASP.NET и БД на PostgreSQL (Прилагаю архив во вложении). Так вот, нужно сделать бегущую строку, в которой будет отображаться информация о последней добавленной записи в приложении. Помогите, пожалуйста, новичку с реализацией бегущей строки! Ломаю голову, не могу придумать, как правильно её сделать...

З.Ы. Прилагаю ссылку на файлообменник https://yadi.sk/d/-Q4pzpmY33w9ga

Answer 1

Самое простое решение: воспользоваться тегом <marquee>. Недостатком этого решения является то, что данные элемент является устаревшим, и не рекомендованным к использованию. Поэтому вполне вероятно в будущих версиях браузеров он не будет поддерживаться.

<marquee>This text will scroll from right to left</marquee>

Кроме этого возможно решение с использованием css-анимации и, например, свойства text-indent, либо позиции внутреннего элемента:

Пример:

.marquee { 
  overflow: hidden; 
  height: 1em; 
  animation: 20s linear infinite marquee; 
} 
@keyframes marquee { 
  0% { 
    text-indent: 100%; 
  } 
  100% { 
    text-indent: -50%; 
  } 
} 
.marquee-position { 
  overflow: hidden; 
  height: 1em; 
  position: relative; 
} 
.marquee-position > span { 
  position: absolute; 
  animation: 15s linear infinite marquee-position; 
} 
@keyframes marquee-position { 
  0% { 
    left: 100%; 
  } 
  100% { 
    left: -50%; 
  } 
}

<div class="marquee">This text will scroll from right to left</div> 
 
<div class="marquee-position"><span>This text will scroll from right to left</span> 
</div>