CSSで作る縦方向のスライドニュースティッカー。JSはアクティブ要素の切り替えだけ

縦方向にスライド表示するニュースティッカーの実装例。表示切り替えやアニメーションはすべてCSSで完結し、JavaScriptはアクティブ要素の切り替えにとどめたシンプルな構成です。お知らせ欄や通知エリアの制作時の参考にどうぞ。

縦方向にスライド表示する、ニュース(お知らせ)ティッカーの実装例です。

表示やアニメーション処理はすべてCSSだけで完結。JavaScriptの役割は、アクティブ要素の切り替えだけというシンプルな構成にしています。

See the Pen 縦にスライドする、お知らせニュースティッカー by MEMORUKA (@memoruka) on CodePen.

なるべくCSSで

今まで昔に作ったものをずっと使い回していましたが、垂直方向の文字揃え、ウィンドウリサイズ時のheightの再計算、「…」による省略表示など、当時はすべてJavaScriptでゴチャゴチャと処理していました。

今なら、それら全部をCSS3でスッキリできそうだなと思い、改めて実装してみた次第です。

HTML / CSS

<ul class="ticker js-ticker">
    <li>
        <a href="#">
            <span>1つ目のお知らせ。テキスト量が長い場合は...(3点リーダー)で文末を省略。CSSだけで対応可能です。</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>2つ目のお知らせ。</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>3つ目のお知らせ。</span>
        </a>
    </li>
</ul>

HTMLの構成は非常にシンプルで、ただのリスト形式にしています。

.ticker {
    position: relative;
    height: 50px;
    background: #333;
    border-radius: 5px;
    overflow: hidden;

    & li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transform: translateY(100%);
        transition: all 1s ease;

        &.active {
            opacity: 1;
            transform: translateY(0);
        }

        &.inactive {
            opacity: 0;
            transform: translateY(-100%);
        }

        & a {
            box-sizing: border-box;
            display: grid;
            place-content: center start;
            height: 100%;
            color: #fff;
            font-size: 16px;
            text-decoration: none;
            padding: 0 1.5em;
            line-height: 1;
        }

        & span {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }

}

CSSはこちら。

.tickerがティッカー本体です。overflow: hiddenを指定し、まず最初に表示領域を制限します。

liはposition: absoluteでティッカーの位置に合わせます。非表示状態の.inactive時は opacity: 0 + transform: translateY(100%) で下に退避させ、表示状態の.active時は、opacity: 1 + translateY(0)で表示位置までスライドさせます。

aタグはdisplay: gridで垂直方向が中央に揃うよう調整。さらにテキスト部分の包括要素には、text-overflow: ellipsisを指定し、1行に収まらないテキストが省略表示（…）になるように設定します。不要な場合は削除可。

JavaScript(jQuery)

$(function () {

    function initTicker(selector, switchDelay) {
        const $tickerList = $(selector);

        $tickerList.each(function () {
            const $ticker = $(this);
            const $tickerItems = $ticker.find('li');
            let currentIndex = 0;

            // 最初の要素をアクティブ化
            $tickerItems.eq(currentIndex).addClass('active');

            setInterval(function () {
                // 現在の要素を非アクティブ化
                const $currentItem = $tickerItems.eq(currentIndex);
                $currentItem.removeClass('active').addClass('inactive');

                // 次のインデックスを計算（最後なら最初に戻る）
                currentIndex = (currentIndex + 1) % $tickerItems.length;

                const $nextItem = $tickerItems.eq(currentIndex);
                $nextItem.removeClass('inactive').addClass('active');

                // アニメーション完了後に前のinactiveを削除
                $nextItem.one('transitionend', function () {
                    $currentItem.removeClass('inactive');
                });
            }, switchDelay);
        });
    }

    initTicker('.js-ticker', 4000);

});

JSの役割もシンプルで、「どのliを表示状態にするか」の制御にとどめています。

主な役割は「トリガー」としての制御のみで、表示やアニメーション自体はCSS側に任せているのがポイントです。

ポイント