DEV Community

mixbo
mixbo

Posted on

1 3

Use infinite animate create fancy effect

Alt Text

I have feature should show stocks indeics auto infinite scroll. first i want to use javascript to controll it. but other developer told me we can use CSS animation create this,it's cool let's me show you code below.

<template>
  <div class="marquee">
    <div class="marquee" :style="{ width: `${width}px`, height: `${height}px` }">
      <div class="marquee--inner">
        <div class="group">
          <slot />
        </div>
        <div class="group">
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PropTypes from 'vprop-type'
export default {
  name: 'Marquess',
  props: {
    width: PropTypes.integer,
    height: PropTypes.integer.def(20),
    itemKlass: PropTypes.string.def('item'),
    speed: PropTypes.integer.def(8) // 5s
  }
}
</script>

<style scoped lang="scss">
@import '_variable.scss';
.lb-marquee {
  overflow: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  .marquee {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
  }
  .marquee--inner {
    display: block;
    width: 200%;
    margin: $gutter-sm 0;
    position: absolute;
    // keywords
    animation: marquee 40s linear infinite; 
  }

  .marquee--inner:hover {
    animation-play-state: paused;
  }

  .group {
    float: left;
    width: 50%;
    .item {
      width: 100px;
      display: inline-block;
      float: left;
    }
  }

  @keyframes marquee {
    0% {
      left: 0;
    }
    // here is keywords
    100% {
      left: -100%;
    }
  }
}
</style>

Enter fullscreen mode Exit fullscreen mode

That all you can use the Vue component like this:

<Marquess :width="210 * 8" :height="140">
  <div v-for="(item, index) in  items" :key="item.id" :index="index" class="item" :style="{ width: '210px' }">
    ......
  </div>
</Marquess>
Enter fullscreen mode Exit fullscreen mode

I have videos to show what the component is demo

Hope it can help you :)

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more