Идеальный компонент с бесконечной прокруткой для Nuxt
Вам когда-нибудь нужен был плавный, непрерывный скроллинг для ваших проектов Nuxt? Вдохновленный современным подходом Райана Маллигана, я создал для вас идеальный отзывчивый компонент Nuxt. Метод Райана Маллигана служит отличной основой для этой реализации, поэтому не стесняйтесь ознакомиться с ним, чтобы получить более подробное объяснение задействованного CSS.
Ключевые особенности компонента Scrolling Marquee Nuxt
- Отзывчивый размер шрифта: Гарантирует, что ваше изображение будет отлично смотреться на устройствах любого размера.
- Настраиваемая скорость: Настройте скорость прокрутки в соответствии с темпом вашего сайта.
- Варианты базовых шрифтов и элементов сообщения: Настройте стиль шрифта и содержание сообщения в соответствии с вашими потребностями.
Этот компонент - практичное дополнение к вашему проекту Nuxt: просто скопируйте его целиком и обратите внимание на доступные реквизиты. Благодаря возможности легко изменять скорость, шрифт и сообщение, вы можете интегрировать этот макет в различные части ваших веб-приложений, будь то объявления, рекламные акции или просто динамические эффекты.
Код компонента
<template>
<div v-if="isFontSizeSet" class="marquee">
<div
class="marquee__content"
:style="{ animationDuration: animationSpeed }"
>
<span
v-for="(letter, index) in (message + ' ').split('')"
:key="index"
class="marquee__item"
>
{{ letter }}
</span>
</div>
<div
class="marquee__content"
:style="{ animationDuration: animationSpeed }"
>
<span
v-for="(letter, index) in (message + ' ').split('')"
:key="index + 1000"
class="marquee__item"
>
{{ letter }}
</span>
</div>
</div>
</template>
<script setup>
import { computed, watchEffect, onMounted } from 'vue';
const props = defineProps({
fontSize: {
type: String,
default: '16px',
},
message: {
type: String,
default: 'THIS IS THE DEFAULT MESSAGE',
},
speed: {
type: Number,
default: 10,
},
});
const animationSpeed = computed(() => `${props.speed}s`);
const isFontSizeSet = ref(false);
onMounted(() => {
watchEffect(() => {
document.documentElement.style.setProperty(
'--baseFontSize',
props.fontSize
);
isFontSizeSet.value = true;
});
});
</script>
<style>
.marquee {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
overflow: hidden;
user-select: none;
display: flex;
gap: var(--gap);
--gap: 1rem;
}
.marquee__content {
flex-shrink: 0;
display: flex;
justify-content: flex-start;
min-width: 100%;
gap: var(--gap);
animation: scroll linear infinite;
}
.marquee__item {
white-space: nowrap;
font-size: var(--baseFontSize);
margin-right: 1px;
}
@media (max-width: 600px) {
.marquee__item {
font-size: calc(var(--baseFontSize) * 0.5);
}
}
@media (min-width: 601px) and (max-width: 1024px) {
.marquee__item {
font-size: calc(var(--baseFontSize) * 0.75);
}
}
@media (min-width: 1025px) {
.marquee__item {
font-size: calc(var(--baseFontSize) * 2);
}
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
</style>Вы можете заметить, что значение baseFontSize применяется внутри хука жизненного цикла onMounted, предотвращая рендеринг до установки стиля.
Родительская часть
Тогда в родительской части вы можете просто сделать что-то вроде этого:
<ScrollingMarquee fontSize="100px" message="My Awesome Marquee" speed="6" />Посмотреть полностью рабочий пример можно здесь: https://stackblitz.com/edit/nuxt-starter-emzrvl?file=app.vue.
Как человек, потративший много времени на поиски идеального кода для прокрутки экрана, я рад поделиться этим компонентом с сообществом!
Не забудьте поделиться своим опытом и идеями, если вы интегрируете этот компонент в свои проекты. Счастливого кодинга!
