その他

流れるテキスト02

HTML
CSS

HTML

コードの説明

    
<div class="merit__txtLoop" data-text="We have a variety of stores, so there is sure to be one that you want to work at or are interested in.">
</div>

HTML
CSS

CSS

コードの説明

    
.mvLoop__list {
    padding: max(1.25%, 5px) 0;
    background-color: var(--black);
    color: var(--white);
    min-width: 1000px;
    display: flex;
    white-space: nowrap;
}

.mvLoop__item {
    font-size: max(1.71vw, 15px);
    animation: mvLoop 20s linear infinite;
}


@keyframes mvLoop {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

HTML
CSS

流れるテキスト01

テストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト
テストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト

HTML
CSS

HTML

コードの説明

    
<div class="mvLoop">
  <ul class="mvLoop__list">
    <li class="mvLoop__item">
      テストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト
    </li>

    <li class="mvLoop__item">
      テストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト
    </li>
  </ul>
</div>

HTML
CSS

CSS

コードの説明

    
.mvLoop__list {
    padding: max(1.25%, 5px) 0;
    background-color: var(--black);
    color: var(--white);
    min-width: 1000px;
    display: flex;
    white-space: nowrap;
}

.mvLoop__item {
    font-size: max(1.71vw, 15px);
    animation: mvLoop 20s linear infinite;
}


@keyframes mvLoop {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

HTML
CSS