自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本インドアです!InstagramTwitterContactサーバーとドメインの同時取得で.jpが無料シュウ今回は【jQuery】「お知らせ」を横から流す、webTickerの使い方!!の解説になります!こんな方に読んでほしいjQueryを学び始めた方へプラグインのwebTickerを使って「お知らせ」を横から流すアニメーションを作成したい方向け今回はwebTickerについて解説しております。今回は、「お知らせ(文字)」を横から流すアニメーションについての解説になります。「webTicker」になりますが、今でも簡単で使いやすいプラグインになっております。イメージ図は上記のようになります。「お知らせや新着情報(文字)」を横から流すアニメーションになります。シンプルな構造になっております。[記事の内容]webTickerについて必要なファイルについて記述場所について「お知らせ(文字)」を横から流す設定について「お知らせ(文字)」を横から流す設定について流れるスピードの設定について一時停止の設定についてまとめwebTickerについてwebTickerとは、「お知らせや新着情報(文字)」を横から流すアニメーションのことを示します。jQueryが苦手な方でも問題ありません。下記のサイトから「webTicker」をダウンロードしましょう。●webTickerにアクセス1https://maze.digital/webticker/●「jquery.webticker.min.js」ボタンをクリック2「jquery.webticker.min.js」をクリックし。Code画面に移動したら、保存をおこなってください。必要なファイルについてダウンロード後に必要なファイルについて解説していきます。「jquery.webticker.min.js」の1点を使用します。type="text/javascript"></script>また、「jquery.webticker.min.js」を使用する際には、webtickerを使用する宣言をしなければなりません。以下のコードを合わせて指定しましょう。$("#webticker").webTicker();});</script>また、ファイルの階層は、ご自身のフォルダに合わせてください。次に、jquery本体のプラグイン設置します。今回は2つ目のパターンを採用して解説します。2つ目は、ファイルをダウンロードせずに、「URL」から読み込むパターンになります。どちらでも問題ありません。$("#webticker").webTicker();});</script>必ず、jquery本体のプラグイン上、webtickerを下に設置しましょう。jqueryをダウンロードしたい方は、こちらのリンクから。記述場所について基本的にはbody内に指定するようにしましょう。基本構造の書き方は以下のようになります。コンテンツが入ります。$("#webticker").webTicker();});</script></body></html>「お知らせ(文字)」を横から流す設定について次に、>「お知らせ(文字)」を横から流す設定について解説します。「お知らせ(文字)」を横から流す設定についてデモサイトはコチラから。基本構造の書き方は以下のようになります。$("#webticker").webTicker();});親要素は、#webtickerを指定します。ここは、$("#webticker").webTicker();と同じ値にするようにしましょう。流れるスピードの設定についてHTML、CSSは上記と同じになります。speedを追加します。デフォルト値は「50」になります、数値が大きほど早くなります。});});一時停止の設定についてHTML、CSSは上記と同じになります。hoverpauseを追加します。デフォルト値は「true」になります、falseを設定することで「マウスオーバー」をした際に、文字が一時停止されます。});});こちらのサイトで他のオプションについても解説しております。まとめ今回はこれで以上です。POINTwebTickerとは、「お知らせ(文字)」を横から流すアニメーションのことを示します。必要なファイルはjquery.webticker.min.jsの1点になります。こちらにデモサイトを用意しました。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。