CSSだけで作るシンプルなニュースティッカー
Result メディアサイト等でまだ見かけるやつ。 :hoverで一時停止するようにしています。 css@keyframes ticker {/*アニメーション設定。右から左に流す、を繰り返す*/ 0% { transform: translate(0, 0); visibility: visible; } 100% { transform: translate(-100%, 0); } } .ticker-wrap {/*ティッカーを包括している親要素*/ position: fixed; bottom: 0; width: 100%; overflow: hidden; height: 2rem; background-color: rgba(0, 0, 0, 0.9); padding-left: 100%; box-sizing: content-box; } .ticker-wr
JQuery Advanced News Ticker | risq
A powerful, flexible and animated vertical news ticker plugin. Provides hight flexibility thanks to numerous callbacks & methods. Fully customizable to every kind of vertical scrolling need. Light-weight and optimized JQuery plugin. Etiam imperdiet volutpat libero eu tristique. Aenean, rutrum felis in. Read more... Curabitur porttitor ante eget hendrerit adipiscing. Maecenas at magna. Read more...
vTicker
A jQuery plug-in that adds scrolling vertical tickers to your site Just one line of javascript code is all you need to start a vTicker Items can be paused when the mouse hovers over an item Step backwards and forwards through your ticker items with easy client methods Easy to use: vTicker is easily added to your existing web page by including jQuery, the vTicker plug-in javascript file and then by
ブラウザ上部に速報を流すことができる拡張機能「インターネットニュース速報」
テレビのニュース速報のようにGoogle Chromeのブラウザ画面上部に自分の投稿を表示させるようにする拡張機能が「インターネットニュース速報」です。 ブラウザ上に速報を表示する拡張を作りました - 日記 http://airreader.hatenablog.com/entry/2012/09/21/190722 まず、ブログ本文にある「Chrome Web Store - インターネットニュース速報」をクリックします。 すると、こんな感じでポップアップウィンドウが表示されます。 右上にある「CHROMEに追加」をクリック。 警告画面が出てくることがありますが、「このまま続行」を選択します。 そして、「インターネット速報」を追加しますか？に対しても「追加」をクリックすればOK。これでインストールが完了します。 再びポップアップウィンドウを表示させると、右端の青いボタンが「CHROMEに
jQuery News Ticker
jQuery News Ticker now has support for multiple tickers per page! jQuery News Ticker now has support for right-to-left languages! jQuery News Ticker now has support for loading content via an RSS feed! jQuery News Ticker now has an optional fade effect between items! New updates have been made to jQuery News Ticker! Check below for more details! jQuery News Ticker is now compatible with jQuery 1.3
[JS]リスト要素で簡単に実装できるニュースティッカー -jQuery News Ticker
アニメーションで次々に表示するニュースティッカーを実装するjQueryのプラグインを紹介します。 IE6+をはじめ、スマフォ用のSafari Mobileにも対応しています。 jQuery News Ticker デモ [ad#ad-2] jQuery News Tickerの実装 jQuery News Tickerの実装 外部ファイル スタイルシートとスクリプトを外部ファイルとして指定します。 <link href="styles/ticker-style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script src="in
jQueryで手軽にサクッとシンプルなニュースティッカーを作る
今更なTipsなんですけど、まぁ自分用の 復習的な記事です。カスタマイズしやす いニュースティッカーを作るコードで、 1行でも4行でも画像でも、cssで見た目 をスタイルするだけで少量のコードで 実装する事が出来ます。 いろいろプラグインを紹介しておいてアレですけど、実際プラグインに依存すると困ることのほうが多いので簡単なものは簡単なコードで実装出来る程度にはしておきたい所ですね。 Sample:01ティッカーです。実際こんな風には実装せず、目立たないところに配置しますけど・・ 以下のコードで実装します。 function ticker(){ $('#news li:first').slideUp( function(){ $(this).appendTo($('#news')).slideDown(); }); } setInterval(function(){ticker()}, 50
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
