[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro
デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。 今必要とされるさまざまな機能を備えています。 「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。 Slider Pro Slider Pro -GitHub Slider Proの特徴 Slider Proのデモ Slider Proの使い方 Slider Proの特徴 Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。 デフォルトの5タイプのスライダー 機能は非常に豊富です。 さまざまなデバイスのスクリーンに対応 デフォルトで完全にレスポンシブ対応（デモ全て） タッチ・スワイプ操作に対応（デモ全て） ブレイクポイント
![[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro](https://cdn-ak-scissors.b.st-hatena.com/image/square/662c60ab62c1f546c5985eed5c70eddf66814399/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111905.png)
数行加えるだけでパララックススクロールを実装できるチュートリアル | コリス
実装は簡単です。 既存のページにもこれなら簡単に組み込めると思います。 HTML パララックススクロール用の背景を配置するために先頭に空のdiv要素を加え、あとのコンテンツは普通に実装します。 <div class="background"></div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1> <h2 class="pageSubTitle">見出しLv2</h2> <p>パラグラフ</p> <p>パラグラフ</p> <p>パラグラフ</p> </div> <div class="slogan"> <h2 class="sloganTitle"> Parallax scrolling </h2> </div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1>
multihero.js (マルチヒーロー.js) | tshinobu.com
海外のウェブサイトで多く見られる「マルチヘッダー（MultiHeader）」「マルチヒーロー（MultiHero）」を実現するJavaScriptです。ページのキービジュアルやメインイメージに、複数のグラフィックを切り替えながら見せて、スペースをつぶさずにたくさんのコンテンツを配信します。（マルチヒーローについてはこちらの解説記事を参照→ユーザビリティやセンスの良さにグッときた8つのサイトデザイン） JavaScriptとCSSで構築しているので検索エンジンにインデックス化されやすく、どなたでも簡単にカスタマイズ＋導入いただけます。 Demo » Try demo without another. Sample code <head> <script type="text/javascript" src="jquery-1.2.6.pack.js"></script> <script ty
CSSレイアウトをWEB上でサクッと作れる「PageBlox」:phpspot開発日誌
CSS Layout Generator | PageBlox - home CSSレイアウトをWEB上でサクッと作れる「PageBlox」。 次のような画面で、カラム幅をクリックで簡単に拡大縮小できたり、ブロック要素を消したり移動したり、追加したりといったことが自由にできます。 基本となるテンプレートを選んで修正すればより効率があがりそうです export で簡単にHTMLコードを生成できます。 とりあえず素早くレイアウトを組むのには便利に使えそうですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ レスポンシブなレイアウトをON/OFFできるようにするJS「ReView」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 これは新しい!パネルレイアウトが美しいスライドショー実装デモ レスポンシブなレイアウト実装
CSS、Javascriptを圧縮して読み込み速度を上げよう！「YUI Compressor」
timelapse audio / Inha Leex Hale ブログの表示速度を少しでも速くするために、ブログ内で読み込んでいるJSファイルとCSSファイルを圧縮せんと、「YUI Compressor」というツールを試してみました。 使い方 使い方は非常に簡単。まずはOnline YUI Compressorへアクセスしませう。 続いては「Code」の部分にCSS or JSファイルをコピペ、「File Type」を適宜切り替えて、オプションを選択したら「Compress」ボタンをクリックしましょう。 しばらくすると余計な改行や空白部分が消去された圧縮コードが吐き出されますので、あとは煮るなり焼くなりはんなり。 圧縮されたコードはあとから編集しにくいので、しっかりバックアップをとっておきましょう。あと、デザインなどが崩れる事も考えられるので張り替え後は確認を！（当サイトでは特にデザイン
CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２:phpspot開発日誌
12 Free jQuery Pre-Loader Plugins CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２がまとまっています。 画像の種類が色々ある上に実装方法も、単なる画像ではない方法が選べます。 画像じゃない方法でローディング画像を実装したい場合は参考にするとよさそう。 画像ではないため、軽量でレスポンシブなサイトにも使えるというところですかね 関連エントリ 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」
画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js - かちびと.net
画面のサイズを指定して、その サイズに応じて任意のCSSファイル をロードするスクリプトのご紹介。 Media Queries等によってCSSが 肥大化してしまった場合は使って あげると軽量化できるかもですね。 指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。 Sample Media Queriesの場合、不要なCSSもロードしますが、sizeit.jsはブレークポイントに応じたCSSファイルのみを読み込むのでうまく使えば軽量化が可能です。 さて、サンプルですが、JQMを利用し、ブレークポイントを以下のように設定しました。 幅が600px以下ならJQMのCSSをロード 幅が1024px以下なら何も読み込まない それ以外はJQMのCSSをロード こう設定すれば、601px～1
[JS]iOS向けのページ制作に役立つ便利機能がたくさん詰まったスクリプト -iOS.js
iPhone, iPadなどのiOS向けのページを制作するのに役立つCSSやJavaScriptの便利機能をたくさん備えたスクリプトを紹介します。 iOS.js [ad#ad-2] iOS.jsの特徴 iOS.jsのデモ iOS.jsの特徴 iOS.jsではデスクトップのブラウザ向けページとは異なる点を中心に、より簡単に実装できるよう便利な機能がたくさん用意されています。 改善 min-height ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。 ※下記にデモがあります。 リンク ページ内の全てのリンクをWebAppで開きます。 100% height 通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。 ※下記にデモがあります。 アドレスバー ページがロー
CSSのみで約900パターンものユニークなグリッドレイアウトをドラッグ&ドロップで作成出来るWebサービス・3x4grid - かちびと.net
3連休を如何お過ごしでしょうか。さて、 ちょっと面白いものを見かけたのでシェア します。Masonryのようなレンガ風の レイアウトをCSSのみでサクッと作れる Webサービス。パズルのように組み合わせ るので種類は900パターン近くになる そうですよ。 休日なので軽めの話題でも。 よくあるグリッドレイアウトのCSSジェネレーターと違って汎用性はありませんが、こういうサービスが出てきたのがちょっと面白いなぁと。jsも使わないし、直感で作れるのでお手軽といえばお手軽じゃないですかね。 このようにパズルのようになっていて、右のエレメントをドラッグし、左にドロップしてボックスを配置する、というもの。jsは使われず、CSSのみで作れます。 操作は直感で出来ると思います。 作ったらコードを発行してもらえます。 Example 960pxで作成されますので汎用的ではありませんが、これはこれで面白いかな
[JS]CSS3アニメーションとjQueryの利点を組み合わせたスクリプト -cssAnimate
CSS3アニメーションとjQueryのいいとこ取りをした、ページにアニメーション機能を取り入れるjQueryのプラグインを紹介します。 cssAnimate jQueryのアニメーションの特徴 短いコードで簡単に記述することができますが、動作が遅い（特にモバイル機器で）。 CSS3のアニメーションの特徴 動作が高速で、柔軟に記述できますが、コードの量が多くなります。 cssAnimateの特徴 jQueryとCSS3の利点を組み合わせ、短いコードで高速に動作するアニメーションを利用できます。 jQueryのアニメーションの構文を全てサポート。 CSS3アニメーションの利用。 ブラウザの互換性。 CSS3非対応ブラウザにはjQueryでアニメーションを提供。 コールバック関数。 jQueryのfadeIn, fadeOutなどの使用。 全てのプロパティがアニメーション可。 jQueryでサポ
[JS]地味なフォームを簡単にかわいらしいデザインにする -Ideal Forms
画像を一切使用せず、既存のフォームをかわいらしいデザインに変更するjQueryのプラグインを紹介します。 チェックボックスのチェックも画像ではないですよ。 Ideal Forms デモ [ad#ad-2] Ideal Formsのデモ フォームの外観は画像は使用せずスタイルシートでデザインされているので、自分用のカラーに変更することも可能です。 デモでは、3つのスタイルが用意されています。 スタイル：Comix Ideal Formsの主な特徴 フォームに美しい外観を与える軽量（14Kb）のスクリプト。 カスタマイズも簡単で、非常に使いやすいです。 画像は必要なく、スタイルシートでデザインを適用しています。 [ad#ad-2] Ideal Formsの実装 ファイルのアップロード 以下の2つをフォルダごとアップロードします。 css/idealForms js/idealForms.js
今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。
みなさんこんにちは、カッシーです。 先日6月8日に26歳になりました。充実した26歳にできるよう頑張っていきます！ 今回は手軽に実践できる効率アップTIPSをご紹介したいと思います。 WEB業界のデファクトスタンダードっていうよりは僕が実践しているものがメインです。 こういう効率アップTIPSとかは共有してどんどん仕事の効率を上げれば ・コストダウン（人件費） ・定時に上がってアフターを楽しむ ・費用は下がるし仕事は早くできるしモチベーションは上がるはいいこといっぱい！ なんでどんどん情報をシェアしたいですね！ もしこんなのものあるよーって方はコメントなりtwitterなりメッセージ頂けると嬉しいです。 目次 ・WEBサイトの新規作成キットを利用する ・拡張機能を利用する ・コード共有・アセット ・よく使う単語は辞書に登録 ・素材や過去のデータは整理しておく ・効率の高いファイルの送受信
node.js + iPhoneのフリックでスライドをリアルタイムに切り替える - 小さい頃はエラ呼吸
はじめに 先日、node.jsとCSSSlide.jsでスライド共有するサンプルプログラムを作りました。このプログラムを少し改良して、iphoneのフリックでスライドを切り替えられるようにしました。 node.jsとCSSSlide.jsでスライド共有するサンプルプログラムを作ったよ。 - 大人になったら肺呼吸 HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応posted with amazlet at 11.06.07谷拓樹 ラトルズ 売り上げランキング: 2326 Amazon.co.jp で詳細を見る iPhoneをリモコンのように使う 普通のプレゼンテーションはノートパソコンの前に立って行いますが、node.js + socket.io + CSSSlide.jsで作られたこのプレゼンツールを使えば、iPhoneをまるでリモコン
[JS]アラート・ダイアログボックスの実装が簡単にできるスクリプト -Apprise
アラートボックスやダイアログボックスのスタイル、コンテンツ、ポジション、機能性を簡単にコントロールできるシンプルで軽量なjQueryのプラグインを紹介します。 apprise('Hello', {'animate':true}); アニメーション表示のアラートボックス サイトでは他にも多くのデモがあります。 Appriseの対応ブラウザ テスト済みのブラウザは、下記の通りです。 Chrome 8.0+ Firefox 3.0+ Safari 4.0+ Internet Explorer 9.0 Appriseの実装 外部ファイル スクリプト「jquery.js」「apprise.js」とスタイルシートを外部ファイルとして指定します。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"
[JS]スムーズなアニメーションで開閉するアコーディオンのスクリプト -Accordion Image Menu
画像を使って、スムーズなアニメーションで開閉するアコーディオンメニューを実装するjQueryのプラグインを紹介します。 デモ：vertical, easeOutBack [ad#ad-2] Accordion Image Menuの実装 HTML 各パネルはリスト要素で実装されています。 <ul id='menu'> <li><a href='link1'><span>title 1</span><img src='image1.jpg' /></a></li> <li><a href='link2'><span>title 2</span><img src='image2.jpg/></a></li> <li><a href='link3'><span>title 3</span><img src='image3.jpg' /></a></li> <li><a href='link4'>
[JS]画像の一部を拡大するシンプルで実用的なスクリプト -Easy Image Zoom
プロダクトページなどによく利用される、画像の一部を拡大する実用的で軽量なjQueryのプラグインを紹介します。 jQuery plugin: Easy Image Zoom デモページ [ad#ad-2] デモではサムネイル画像にカーソルを合わせると、その箇所を中心に拡大表示し、ディテールをユーザーに提供することができます。 スクリプトは使い勝手をよくするために、できるだけ軽量にし、またカスタマイズも簡単にできるように設計した、とのことです。 Eazy Image Zoomの実装 HTML サムネイル画像をimg要素で実装し、拡大画像をa要素に配置します。 <a href="large.jpg"><img src="small.jpg" alt="Small image" /></a> CSS 拡大画像のスタイルはCSSで簡単にカスタマイズが可能です。下記はデモページの例です。 #easy
[JS]条件付きでJavaScriptやCSSファイルをロードできるスクリプトローダー -Yepnope
プレフィックス（接頭辞）を使用して、ロードのタイミング、UAごとに必要なファイルだけをロードなど、条件付きでファイルをロードさせることができるスクリプトローダーを紹介します。 yepnope.js -A Conditional Loader For Your Polyfills! [ad#ad-2] yepnope.jsの書式 yepnope.jsの基本書式は、下記のようになります。 yepnope(resources /* string | object | array */ [, $LABchain]) css! プレフィックス「css!」を使用して、指定したファイルをCSSファイルとしてロードします。 ※「.css」で終了していない名前はJavaScriptファイルとして認識されます。 例：cachebusted.css?version=1452318 yepnope({ load
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで高度な3D表現ができると話題の「Sprite3D.js」で作った凄いデモ