HOME > jQuery > jQueryで動くニュースティッカー（newsticker）の作り方【コピペで1分】

jQueryで動くニュースティッカー（newsticker）の作り方【コピペで1分】

目次: jQueryで動くニュースティッカーのDEMO; jQueryで動くニュースティッカーの作り方解説; HTML記述; css記述; jQuery記述

jQueryで動くニュースティッカーのDEMO

DEMOページ

jQueryで動くニュースティッカーの作り方解説

jQueryを使用してlistの中身を上部にスライドさせ、次のlistが流れてくるように実装。
※このサイトのトップで実際に動いている手作りニュースティッカーです。

1．HTMLは親要素とリスト（ul・li）要素で構成する。親要素に「overflow: hidden;」をかけて対象部分以外は非表示にする。
2．リストのcssの切り替えアニメーションを設定。「transform: translateY;」でY軸（縦軸）にアニメーションするように設定
3．jQueryで切り替え処理を作成し、リサイズした際は調整するように指定。
4．ニュースの文字数が多い場合は「…」に切り替わるようにする。
5．正しく動作していれば完成です。

HTML記述

HTMLをbody内の表示位置に記載します。

<div class="ticker">
    <ul class="news">
        <li>ニュース1<a href="">サンプルサンプルサンプルサンプルサンプル</a></li>
        <li>ニュース2<a href="">サンプルサンプルサンプルサンプルサンプル</a></li>
        <li>ニュース3<a href="">サンプルサンプルサンプルサンプルサンプル</a></li>
        <!-- 追加のニュース項目 -->
    </ul>
</div>

css記述

cssを<style>~</style>または自作cssの中に記述します。

<style>
.ticker {
    overflow: hidden; /* 必須 */
    height: 50px;
    border: 1px solid #ccc;
}
    
.news {
    list-style-type: none;
    padding: 0;
    margin: 0;
    animation: newsticker infinite linear;  /* アニメーション設定 */
}
    
.news li {
    height: 50px;
    line-height: 50px;
    background-color: #fff;
}
    
@keyframes newsticker {
    /* 0%から25%までは初期状態（元の位置）から変化しない */
    0%, 25% {
        transform: translateY(0);
    }
    /* 50%ではニュースを上にスライドさせる */
    50% {
        transform: translateY(calc(-100% - 1px));
    }
    /* 75%から100%まではニュースを上にスライドしたまま変化しない */
    75%, 100% {
        transform: translateY(calc(-100% - 1px));
    }
}
</style>

jQuery記述

jQueryCDN 最新版などは公式サイトをご確認ください。

イージングを滑らかに動かすためのプラグインを使用します。

jQueryを<script>~</script>または自作jsの中に記述します。

<script>
// ニュースティッカー
$(document).ready(function() {
    let newsHeight = $('.news li').height();
    let newsDisplayTime = 3000; // ニュースが表示される時間（ミリ秒）（最初のニュース1が切り替わるまでの時間）
    let switchDelay = 2000;     // ニュースの切り替えまでの遅延時間（ミリ秒）（以降の各ニュースが切り替わるまでの時間）
    let switchDuration = 1000;  // ニュースの切り替え速度（ミリ秒）
    
    // ティッカーアニメーションの開始
    function startTickerAnimation() {
        tickerAnimation();        // 初回のアニメーションを実行
        setInterval(tickerAnimation, newsDisplayTime + switchDelay); // アニメーションを繰り返し実行するタイマーを設定
    }
    
    // ティッカーアニメーションの実行
    function tickerAnimation() {
        let ticker = $('.news li:first'); // 現在表示中のニュースを取得
        ticker.animate({marginTop: -newsHeight}, switchDuration, 'easeInOutCubic', function() {
        ticker.appendTo('.news').css('marginTop', 0); // ニュースを一番下に移動して表示位置をリセット
        }).delay(switchDelay); // 切り替え遅延時間を追加してアニメーションを停止
    }
    
    setTimeout(startTickerAnimation, newsDisplayTime); // 初回のアニメーションを遅延実行
    

    //はみ出した部分を3点リーダにする
    let maxLength = 10; // 上限文字数
    let originalTexts = {}; // 元のテキストを保持するオブジェクト
    
    function applyTextLimit() {
        if ($(window).width() <= 767) {
            $('.news li').each(function() {
            let originalText = $(this).data('original-text');
            if (!originalText) {
                originalText = $(this).html();
                $(this).data('original-text', originalText); // 元のテキストをdata属性に保存
            }
            let anchorTag = $(this).find('a');
            if (anchorTag.length > 0) {
                let anchorText = anchorTag.html();
                if (anchorText.length > maxLength) {
                let truncatedText = anchorText.substr(0, maxLength) + '...';
                anchorTag.html(truncatedText); // aタグのテキストを上限文字数で切り詰めて三点リーダを追加
                }
            }
            // ここで処理が終了し、次の要素へ移動
            });
            // 767px以下の場合の処理終了
        } else {
            $('.news li').each(function() {
            let originalText = $(this).data('original-text');
            if (originalText) {
                $(this).html(originalText); // 元のテキストに戻す
            }
            // ここで処理が終了し、次の要素へ移動
            });
            // 767px以上の場合の処理終了
            }
        }
    
        // 初回実行
        applyTextLimit();
    
        // ウィンドウのリサイズ時に実行
        $(window).on('resize', function() {
            applyTextLimit();
        }
    );
});
</script>