✨ Бегущая строка на лендинге — стильное решение для переходов

✨ Бегущая строка на лендинге — стильное решение для переходов

Хочу поделиться классным решением — бегущая строка!

Её отлично использовать между экранами, когда, например, фото эксперта "повисает в воздухе" и нужен плавный переход.

Как сделать:

Шаг 1. Вставляем в HTML блок следующее (замените текст на свой):

<!-- БЕГУЩАЯ СТРОКА -->

<div class="gc-marquee-wrapper">

<div class="gc-marquee-inner">

<p class="gc-marquee">

<span>

Новогоднее колесо фортуны в школе Валентины Букеевой | Новогоднее колесо фортуны в школе Валентины Букеевой | Новогоднее колесо фортуны в школе Валентины Букеевой | Новогоднее колесо фортуны в школе Валентины Букеевой |

</span>

</p>

</div>

</div>

Шаг 2. Вставляем JS блок, который заставляет строку двигаться:

(function ($) {

$(function () {

var screenWidth = $(window).width();

var duration = screenWidth < 620 ? 10000 : 40000;

$('.gc-marquee').marquee({

direction: 'left',

duplicated: true,

duration: duration,

pauseOnHover: false,

startVisible: true,

gap: 10

});

});

})(jQuery);

Готово! Бегущая строка добавит динамики вашему лендингу 🎯

Сохраняйте, чтобы не потерять!

#getcourse #kuz_getcourse #лендинг #дизайн #бегущаястрока #kuz_инструкции