ブラウザ上で動作する便利なウィジェットを簡単作成「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にすればかなり使えそうですね。
最新のブログ記事(新着順)
- 15000以上のいい感じの線形アイコン「Lineicons」
- CSSやTailwindでのCSSスニペットライブラリ「CSS Snippets Library」
- AIを使ってサイトマップが作れる「Octopus.do」
- ライブラリ依存のないモーダルオープンライブラリ「Blendy」
- 個性的な明朝フリーフォント「築豊初号明朝OFL」
- CSSで太陽が差し込むようなアニメーション実装
- 可愛くアニメーションする「beautifully crafted animated icons」
- アイソメトリックなアイコンがアイコンがPNG,SVGでゲットできる「Isoicons」
- ユニークなカタカナフォントtorisippo
- 美しいメッシュグラデーションをCSSで簡単に取得できる「MSHR」
- 過去のエントリ