2018年10月30日(火)
シンプルなbefore/afterコンテンツを作成できるスクリプト・「beerslider」
beerslider
new BeerSlider( document.getElementById( "beer-slider" ), { start: 25 } );
beersliderは上記のようなbefore/afterコンテンツを作成できるスクリプトです。他スクリプトに依存せず、単体で動作しますが、jQueryやZeptoとの併用も可能です。25kbほどの軽サイズで扱いやすい印象でした。ラベル文字はカスタムデータ属性で、開始場所も以下の方法で設定可能です。手軽で良いんじゃないでしょうか。ライセンスはMIT。
beerslider
- Post by かちびと.net
- PR:WPデザインギャラリー
- Youtubeのプレイリストをスライドギャラリーとして実装するjQueryプラグイン・jQuery Youtube Playlist Gallery
- かちびと.netの今後の予定
- モーダルウィンドウを表示する際に遠近感を付けるスクリプト・Avgrund
author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
[ユーザー投稿] 【11/14(水)開催!】広告運用に課題を抱える担当者向け セカンドオピニオン体制のご提供事例 ~成果をあげる高速PDCA運用とは~
NEXT ›

UX MILKxDesign Scramble 特別企画「別業界からなぜゲームを選んだのか?4人のデザイナーのキャリアと展望」
関連記事
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『シンプルなbefore/afterコンテンツを作成できるスクリプト・「beerslider」』についてまとめています。
この記事は特にjavascript・jQuery・youtubeについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads