[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js
マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex
![[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/67956a4938e638f9435d9da970857c7cbee434aa/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031609.png)
Big Sky :: IDE としての Vim
この文章は、http://yannesposito.com/Scratch/en/blog/Vim-as-IDE/ で掲載されている「Vim as IDE」の翻訳文です。 文内の全てはの筆者による物であり、訳文の内容については私による物となります。意訳が若干入っています。間違い等あればご連絡下さい。 Vim as IDE tl;dr: 如何に Vim を効率の良い IDE として使いこなすか Learn Vim Progressively (訳者注: 日本語訳)では Vim が如何にテキスト編集に優れ、かつファイルを操縦できる偉大なテキストエディタであるかについて示した。この短い記事では、私が如何にして Vim を IDE として使っているかについて見る事が出来るだろう。そう、主に幾つかの素晴らしいプラグインを使う事により。 1. Vim Plugin Manager Vim のプラグイン
[JS]HTMLコンテンツにも対応、カルーセルで表示するスライダーのスクリプト -jShowOff
一つ以上の子要素と、それらを内包する親要素をスライダーとして使用します。 下記は、テキストや画像を配置したdiv要素を子要素として、それらを内包するdiv要素を配置しています。 <div id="features"> <div><p>This is a slide!</p></div> <div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div> </div> JavaScript 「jquery.js」と「jquery.jshowoff.min.js」を外部ファイルとし、下記のスクリプトを記述します。 セレクタ（#features）は、自分の環境にあわせて変更してください。 $(document).re
Facebook風ドロワーメニューが手軽に導入できる drawer
「drawer」は、横からせり出してくる「ドロワーメニュー」をサイトに手軽に実装できるjQueryプラグインです。 ドロワーメニューはスマートフォンやタブレットなどのさまざまな画面サイズに柔軟に対応できる利点があり、GoogleやFacebookのモバイルサイトで利用されています。drawerプラグインは横幅の可変に対応していますので、レスポンシブ Web デザインにも利用できます。 drawerプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 10以降、スマートフォンではiOS 7のSafariとChromeに対応しています。 MITライセンスですので、著作権表示は削除せずに利用しましょう。 drawerは、パッケージマネージャーの「bower」でもインストールできます。bowerを導入している場合は、以下のコマンドですぐに利用できます。
[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS
最近よく見かける垂直に配置した複数のパネルそれぞれをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせるjQueryのプラグインを紹介します。 デスクトップだけでなく、スマホ・タブレットのスワイプ操作にも対応している優れもの！ デモページ：2ページ目 ホイール操作時には、ちょうどいい位置に自動で移動します。 FSVSの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="/assets/js/fsvs.js"></script> </head> スワイプ対応にするには、スクリプトを加えます。 <script src="/assets/js/jq
![[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS](https://cdn-ak-scissors.b.st-hatena.com/image/square/307df9d68159c53a5433b712114d5e9ae8d1a3e3/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014092203.gif)
アニメーションつき円グラフを簡単実装！Circliful
「Circliful」は、の円グラフをアニメーションつきで表示できる jQuery プラグインです。カスタムデータ属性に値を渡すだけでグラフを簡単に描画でき、豊富なオプションでデザインをカスタマイズできます。ランディングページで製品のシェアを訴える際などにいいでしょう。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、CirclifulをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。 利用するWebページの body の閉じタグ直前で、jQuery本体と「Circliful のminifyファイル」、「jquery.circliful.min.js」を読み込みます。 //(中略) <script src
Rubyのローカル変数をシンタクスハイライトするVimプラグインを書いた - TODESKING
Rubyはローカル変数への参照と無引数のメソッド呼び出しを同じ記法で書けるので、コードを読むときに混乱したりtypoでNoMethodErrorを出してがっかりすることが多々あります。 幸いなことにこれらは静的に解析することができるので、ローカル変数への参照を色付けするVimプラグインを書いた。 Github/ruby_hl_lvar.vim すごく便利な気がする！！！！！！！ Rubyインタフェース(>=1.9)が有効になったVimが必要なのでご注意ください。MacVim 7.4 KaoriYa 20140107で動作確認しました。 しくみ Ruby1.9以降に標準添付されているripperというライブラリで、Rubyの構文解析をしてローカル変数への参照を取り出しています。 require 'ripper' Ripper.sexp(<<EOS) a = 10 b = 20 c = a +
[JS]シンプルながら優れモノ！ホバーやクリックでさまざまなツールチップを表示するスクリプト -DarkTooltip
ツールチップ系のスクリプトは数多くありますが、これはなかなか使いやすそう！ トリガーはホバーだけでなくクリックにも対応、HTMLコンテンツの表示にも対応、カスタマイズにも優れており、カラー、サイズ、不透明度、表示方向、アニメーションのさまざまなエフェクト、Confirmからのイベントにも対応しています。 上段はサイズ、中段は方向、下段はアニメーション アニメーションなどの実際の動作はデモページでぜひ試してみてください。 DarkTooltipの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとしてhead内に記述します。 <head> ... <link rel="stylesheet" href="darktooltip.css"> <script src="jquery-1.10.2.min.js"></script> <script
[JS]奥行きを与えてモーダルボックスを開くスクリプトを実用化したスクリプト -Avgrund Modal
元となった：Avgrund 作者のメモには、実用のためではなく楽しむ用、とのことで、確かにIEなどの非対応ブラウザではエラーがでるだけです。 「Avgrund Modal」は、非対応ブラウザの処理やより簡単に実装できるように実用化したものです。 Avgrund Modalのデモ デモは全てのモダンブラウザで動作します。 デモページ：IE7で表示 Avgrund Modalの使い方 Step 1: 外部ファイル スタイルシートをhead内に記述します。 <link rel="stylesheet" href="avgrund.css"> 「jquery.js」と当スクリプトを</body>の上あたりに記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <
パララックスをサクッと作れるskrollr
「skrollr」は、パララックス（視差効果）を簡単に実装できるプラグインです。 サンプルの動画を見ていただければわかりますが、非常に多彩なエフェクトが用意されており、基本的なパララックスサイトであれば、サクッと作れます。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、skrollrを配布ページからダウンロードしましょう。skrollrはGitHubで公開されており、ページ右下の「Download ZIP」というボタンからダウンロードします。 jQuery本体と「dist」フォルダに入っている「skrollr.min.js」を、利用するWebページのbodyの閉じタグ直前で読み込みます。 //(中略) <script src="jquery.min.js"></script> <script src="skrollr.min.js"></sc
[JS]ブログの記事を読み終えたユーザーに、シェアなど次のアクションを促すスクリプト -jQuery Engage
WordPressで作られたブログなどでスクロールして記事を読み終えた時に、その記事をシェアするボタン、記事へのコメント入力フォーム、メールニュースなどの告知を配置したパネルを下からアニメーションで表示するjQueryのプラグイン、いやWordPressのプラグインと言った方がいいのか、を紹介します。 デモページ：記事を読み終えたとこ パネルには左から、コメント、ソーシャルメディア、メールニュースが配置されており、これはカスタマイズできます。 jQuery Engageの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※WordPressなのでjquery.jsは既に利用していると思いますが、無ければ追加してください。 <script src="js/dist/jquery.engage.min.js" type="text/javasc
[JS]スクロールしてもサイドバーなどの要素を貼り付けたように常に表示させるシンプル高性能超軽量スクリプト -Sticky-kit
ユーザーがスクロールした際、指定した要素をぴたっと貼り付けたように指定範囲に常に表示させるスティッキー用のjQueryのプラグインを紹介します。 実装は非常に工夫されており、シンプルかつ高性能、しかも1.8kの超軽量！ 一行の記述で、複数の要素を異なる範囲に表示させることもできます。 複数の要素を異なる範囲にも貼り付けたデモ Sticky-kitの使い方 実装は非常にシンプルで、簡単です。 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="/jquery.sticky-kit.js"></script> <
[JS]既存のLightbox系スクリプトの不満を解決したスクリプト -Lightbox_me
IE6にも対応した、DOMエレメントをLightboxのエフェクトで表示するjQueryのプラグインを紹介します。 Lightbox_me - Stupidly Simple Lightboxing Lightbox_meは他のLigtbox系スクリプトのソリューションにはない特徴をもっています。 DOMエレメントをLightbox化。 ウインドウのリサイズ時はオーバーレイもリサイズ。 ドキュメントがウインドウよりサイズが小さい場合はオーバーレイのサイズを変更。 全てのブラウザで固定配置（fixed）で表示。 ウインドウがモーダルボックスより小さい場合は固定配置（fixed）が自動的に絶対配置（absolute）に切り替え。これによりユーザーはスクロールが可能に。 そして、軽量でシンプル、という素晴らしい特徴も備えています。 対応ブラウザはIE6+, Fx2.5+, Safari, Chr
waterfall.js
div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリプトのページ自体がデモになっています。 まずは、デスクトップサイズでの表示。 デモページ、幅780pxで表示 カラムの数はカラムの幅の最小値を設定することで、自動で表示されます。 ページ内の適用範囲も指定できるので、左のサイドバーはそのままの表示です。 waterfallの使い方 使い方は簡単です。 HTMLがあれば、数行加えるだけで完了です。 Step 1: 外部ファイル waterfallはj
Vimを最強のPython開発環境にする2 - Λlisue's blog
本気でPythonをやりたいならあわせて読みたい「え？君せっかく Python のバージョン管理に pyenv 使ってるのに Vim の補完はシステムライブラリ参照してるの？」 2013-06-23 21:30 おしりに追記しました 2013-06-24 10:00 設定等微修正しました 2013-06-24 15:20 quickrunの設定を修正しました 2013-07-03 14:30 間違い等を修正しました 様々な開発環境を試してきましたが、結局Vimに落ち着いてしまっているAlisueです、どうも。 Vimを最強のPython IDEにするを書いてからかれこれ二年ほどが経ちます。 二年もあると新しいVimプラグインが増えるなどし、先の記事内容では最強ではなくなってしまいました。なのでこの辺でもう一度現在の最強をまとめてみたいと思います。 基本方針 プラグイン関係はすべてNeoBu
[JS]jQueryのプラグイン33 1選 -2011年5月 | コリス
Skitter 多種多少なアニメーションで画像を変更するスライドショー。 キャプチャは「cube」、キューブ状になって変更します。
tig なんて目じゃない！ Git のログ系 Vim プラグイン gitv ＆ gitv をGit 統合インターフェース化する最強の設定 - 反省はしても後悔はしない
この記事は Vim Advent Calendar 2012 の 168 日目の記事です。 昨日は id:yonchu さんの accelerated-smooth-scroll という Vimプラグイン を作った (Vim Advent Calendar 2012, 167日目) - よんちゅBlog でした。 はじめに 最近、Git のログを見る系のエントリが多い気がします。今回の Vim Advent Calendar でも はじめての unite source(unite-tig) - Design x Verification vac143 - YouTube Vimでgitのログをきれいに表示する - derisの日記 という記事がありましたし、また最近 git? tig! | Atlassian Japan CUI で Git 使うなら入れておきたいツールまとめ | バシャロ
[JS]レスポンシブ対応でパンくずの一行が長くて困ったを解決するスクリプト -rCrumbs
多階層をもったサイトでは、パンくずも長くなりがちです。 テキストベースで実装した長い一行のパンくずを表示幅に合わせて最適化するjQueryのプラグインを紹介します。 jQuery rCrumbs -GitHub rCrumbsのデモ rCrumbsの使い方 rCrumbsのデモ 一行で長いパンくずは表示幅を変更すると、最適化されて表示されます。 主要なモダンブラウザをはじめ、IE8+でご覧ください。 デモページ：幅1200, 780, 480pxで表示 幅1200pxで表示 先頭のHomeから、長いページタイトルまで全部が表示 幅780pxで表示 先頭のHome側からはみ出るアイテムを省略 幅480pxで表示 長いページタイトルもはみ出る場合は省略 ※省力無しの固定表示することもできます。 rCrumbsの使い方 実装は簡単で、パンくずはリスト要素で実装されています。 Step 1: 外部
WordPressのプラグインを開発しよう（初級編）
WordPressのプラグインを開発しよう（初級編） WordPressのプラグインを作れるようになればネットでちやほやされるかもしれない！？ ということでプラグイン開発方法をさらっと解説してみます。 投稿日2012年09月11日 更新日2012年10月02日 プラグインってなんだろう。 WordPressのテンプレートをカスタマイズしてるとfunctions.phpにコードを書くことがあると思います。 基本的にこのコードをプラグインフォルダに入れるだけでプラグインになります。 そのテンプレートに依存したものはfunctions.phpに記述したままでもいいと思いますが、ある程度使い回せるものでしたらプラグイン化すると良いと思います。 簡単なプラグイン 簡単な例を見てみましょう。 functions.php に次のようなコードがあるとします。 functions.php function
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
