Рухомий рядок

Как создать эффект marquee без использования тега (с помощью CSS, JavaScript и jQuery)

Тег marquee больше не используется. Это старый и нестандартный HTML элемент, который использовался на веб-страницах для автоматической прокрутки текста или изображения вверх, вниз, влево, вправо.

Сегодня никто не использует этот тег. Считается, что нет никакой пользы от непрерывной прокрутки текста. Никто не захочет читать текст, который все время прокручивается.

Но если вам все же необходимо создать эффект marquee, здесь вы можете найти альтернативные способы для этого с помощью CSS, JavaScript и jQuery.

Создайте эффект marquee с помощью CSS анимаций (горизонтально и вертикально)

Используйте CSS свойства animation, transform вместе с правилом @keyframes для создания эффекта marquee без использования тега .

Для горизонтальной прокрутки текста установите свойство animation в значение «marquee 10s linear infinite;» (измените секунды в зависимости от ваших требований). Дальше задайте, чтобы анимация проигрывалась:

@keyframes marquee < 0% < transform: translateX(100%); > 100% < transform: translateX(-100%); > >

А сейчас увидим, какой вид имеет прокручиваемый текст справа налево:

Пример

html> html> title>Заголовок документа title> head> style> div < background-color: #1c87c9; color: #fff; padding: 5px; > p < -moz-animation: marquee 10s linear infinite; -webkit-animation: marquee 10s linear infinite; animation: marquee 10s linear infinite; > @-moz-keyframes marquee < 0% < transform: translateX(100%); > 100% < transform: translateX(-100%); > > @-webkit-keyframes marquee < 0% < transform: translateX(100%); > 100% < transform: translateX(-100%); > > @keyframes marquee < 0% < -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%) > 100% < -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); > > style> head> body> div> p>Горизонтально прокручиваемый текст без использования тега marquee. p> div> body> html>

А теперь попробуем получить вертикально прокручиваемый текст. В этом случае необходимо изменить значения свойства transform :

@keyframes marquee < 0% < transform: translate(0, 0); > 100% < transform: translate(0, -100%); > >

Смотрите, как будет выглядеть текст, прокручиваемый снизу вверх:

Пример

html> html> title>Заголовок документа title> head> style> div < background-color: #1c87c9; color: #fff; text-align: center; > p < display: inline-block; padding-top: 100%; -moz-animation: marquee 5s linear infinite; -webkit-animation: marquee 5s linear infinite; animation: marquee 5s linear infinite; > @-moz-keyframes marquee < 0% < transform: translate(0, 0); > 100% < transform: translate(0, -100%); > > @-webkit-keyframes marquee < 0% < transform: translate(0, 0); > 100% < transform: translate(0, -100%); > > @keyframes marquee < 0% < -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); > 100% < -moz-transform: translate(0, -100%); -webkit-transform: translate(0, -100%); transform: translate(0, -100%); > > style> head> body> div> p>Вертикально прокручиваемый текст без использования тега marquee. p> div> body> html>

Можно использовать псевдокласс :hover вместе со свойством animation-play-state, чтобы остановить прокрутку текста при наведении курсора мыши. Установите свойство animation-play-state в значение «paused»:

:hover < animation-play-state: paused; >

Пример

html> html> head> title>Заголовок документа title> style> .marquee < margin: 0 auto; width: 600px; height: 30px; white-space: nowrap; overflow: hidden; box-sizing: border-box; position: relative; > .marquee:before, .marquee:after < position: absolute; top: 0; width: 50px; height: 30px; content: ""; z-index: 1; > .marquee:before < left: 0; background: linear-gradient(to right, #ccc 10%, transparent 80%); > .marquee:after < right: 0; background: linear-gradient(to left, #ccc 10%, transparent 80%); > .marquee__content < width: 300%; display: flex; line-height: 30px; animation: marquee 10s linear infinite forwards; > .marquee__content:hover < animation-play-state: paused; > .list-inline < display: flex; justify-content: space-around; width: 33.33%; /* reset list */ list-style: none; padding: 0; margin: 0; > @keyframes marquee < 0% < transform: translateX(0); > 100% < transform: translateX(-66.6%); > > style> head> body> div class="marquee"> div class="marquee__content"> ul class="list-inline"> li>Текст 1 li> li>Текст 2 li> li>Текст 3 li> li>Текст 4 li> li>Текст 5 li> ul> ul class="list-inline"> li>Текст 1 li> li>Текст 2 li> li>Текст3 li> li>Текст 4 li> li>Текст 5 li> ul> ul class="list-inline"> li>Текст 1 li> li>Текст 2 li> li>Текст 3 li> li>Текст 4 li> li>Текст 5 li> ul> div> div> body> html>

Создайте эффект marquee с помощью JavaScript

В данном примере использовано vanilla JS:

Пример

html> html> head> title>Заголовок документа title> style> body < font-family: sans-serif; font-weight: 700; height: 600vh; background: #d66d75; background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); > .marquee < position: fixed; top: 0; left: 0; width: 100%; height: 100vh; > .marquee .inner < position: relative; width: 100%; display: flex; color: white; font-size: 8rem; > .marquee .inner > * < white-space: nowrap; padding: 0 4rem; > style> head> body> div class="marquee"> div class="inner"> p>Привет всем. p> div> div> script> function handleMarquee( )< const marquee = document.querySelectorAll('.marquee'); let speed = 4; let lastScrollPos = 0; let timer; marquee.forEach(function(el)< const container = el.querySelector('.inner'); const content = el.querySelector('.inner > *'); //Get total width const elWidth = content.offsetWidth; //Duplicate content let clone = content.cloneNode(true); container.appendChild(clone); let progress = 1; function loop( )< progress = progress-speed; if(progress 1) 0;> container.style.transform = 'translateX(' + progress + 'px)'; container.style.transform += 'skewX(' + speed*0.4 + 'deg)'; window.requestAnimationFrame(loop); > loop(); >); window.addEventListener('scroll', function( )< const maxScrollValue = 12; const newScrollPos = window.scrollY; let scrollValue = newScrollPos - lastScrollPos; if( scrollValue > maxScrollValue ) scrollValue = maxScrollValue; else if( scrollValue < -maxScrollValue ) scrollValue = -maxScrollValue; speed = scrollValue; clearTimeout(timer); timer = setTimeout(handleSpeedClear, 10); >); function handleSpeedClear( )< speed = 4; > >; handleMarquee(); script> body> html>

Создайте плагин скроллинга текста с помощью jQuery

Использование jQuery — это альтернативный способ получения эффекта marquee. Давайте шаг за шагом научимся использовать этот метод:

$(function()< $('.marquee').marquee(< //если хотите всегда анимировать при помощи jQuery allowCss3Support: true, //работает, когда allowCss3Support установлено в true - смотрите полный список http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function css3easing: 'linear', //требует jQuery easing плагин. По умолчанию - 'linear' easing: 'linear', //приостанавливает время перед стартом следующей анимации в миллисекундах delayBeforeStart: 1000, //'left', 'right', 'up' or 'down' direction: 'left', //true или false - должен ли marquee быть дублирован для эффекта продолжающегося потока duplicated: false, //скорость marquee в миллисекундах duration: 5000, //расстояние в пикселях между бегущими строками gap: 20, //приостанавливает цикл marquee pauseOnCycle: false, //приостанавливает marquee при наведении курсора мыши - используя плагин jQuery https://github.com/tobia/Pause pauseOnHover: false, //marquee виден, когда он изначально позиционирован у границы по направлении которой будет двигаться startVisible: false >); >);

Посмотрим как это будет выглядеть:

Пример

html> html> head> title>Заголовок документа title> head> body> div class="marquee">Какой-либо текст. div> script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> script> script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"> script> script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"> script> script> $(function( )< $('.marquee').marquee(< //если хотите всегда анимировать при помощи jQuery allowCss3Support: true, //работает, когда allowCss3Support установлено в true - смотрите полный список http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function css3easing: 'linear', //требует jQuery easing плагин. По умолчанию - 'linear' easing: 'linear', //приостанавливает время перед стартом следующей анимации в миллисекундах delayBeforeStart: 1000, //'left', 'right', 'up' or 'down' direction: 'left', //true или false - должен ли marquee быть дублирован для эффекта продолжающегося потока duplicated: false, //скорость marquee в миллисекундах duration: 5000, //расстояние в пикселях между бегущими строками gap: 20, //приостанавливает цикл marquee pauseOnCycle: false, //приостанавливает marquee при наведении курсора мыши - используя плагин jQuery https://github.com/tobia/Pause pauseOnHover: false, //marquee виден, когда он изначально позиционирован у границы, по направлении которой будет двигаться startVisible: false >); >); script> body> html>

Источник

Бегущая строка на Javascript

В прошлый раз я рассказывал вам, как создать бегущую строку на сайте с помощью CSS. А сегодня, предлагаю рассмотреть тему, как создать бесконечную бегущую строку на Javascript.

Бегущая строка на чистом JS

          
Текст рухомого рядка
 
   

Вас может заинтересовать

Источник

Javascript бегущая строка бесконечная

БлогNot. Бегущая строка на Javascript и CSS3

Бегущая строка на Javascript и CSS3

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

Намного ли сложнее сделать то же самое средствами Javascript, дабы избежать невалидного HTML? Если мы согласны не гонять строчку по всей ширине экрана, то ненамного, приведу работающий пример и его код:

 
  
А вот полноценная эмуляция потребует применения JQuery и/или написания заметно более сложного кода.
Есть Marquee и в CSS3, выглядит перспективно и программирования не требует вовсе, правда, сильно устаревшие браузеры CSS3 не поддерживают. Приведу пример, стиль которого предполагает ещё и остановку прокрутки строки при наведении мыши на текст.
  
 
13.09.2017, 15:04 [22263 просмотра] 
Источник