ブラウザ上で動作する便利なウィジェットを簡単作成「iCarousel」
2007年05月14日-
iCarousel is an open source (free) javascript tool for creating carousel like widgets.
ブラウザ上で動作する便利なウィジェットを簡単作成「iCarousel」。
次のようなアニメーションするウィジェットを作成可能。
ニューススクローラー
>水平画像スクローラー
>垂直テキストスクローラー
実装コードもシンプルで、垂直テキストスクローラーの場合は次のコードで実現できます。
■HTML / ■JavaScript
<h3>V. Vertical text scroller</h3>
<div id="example_5">
<div id="example_5_content">
<div class="example_5_item">
<h4>What is Lorem Ipsum?</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book...</p>
<p><a href="http://www.lipsum.com">more information</a></p>
</div>
<div class="example_5_item">
<h4>Where does it came from?</h4>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked...</p>
<p><a href="http://www.lipsum.com">more information</a></p>
</div>
<div class="example_5_item">
<h4>Why do we use it?</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',...</p>
<p><a href="http://www.lipsum.com">more information</a></p>
</div>
</div>
<div id="example_5_frame">
<img id="example_5_previous" src="images/ex4_previous.gif" alt="move previous" />
<img id="example_5_next" src="images/ex4_next.gif" alt="move next" />
</div>
</div>
<script>
window.addEvent("domready", function() {
new iCarousel("example_5_content", {
idPrevious: "example_5_previous",
idNext: "example_5_next",
idToggle: "undefined",
item: {
klass: "example_5_item",
size: 172
},
animation: {
direction: "top",
duration: 1000,
amount: 1
}
});
});
</script>
デフォルトだとちょっとかっこ悪い感じですが、スタイルシートでデザインされているのでCSSによってクールなUIにすればかなり使えそうですね。
最新のブログ記事(新着順)
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 過去のエントリ