[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/811172ca6306ab35b8c730bf9af1a2f005e4fab0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014092203.gif)
[JS]画像のホバー時の方向によってオーバーレイをスライド表示するスクリプト -SlipHover
デモページ: auto scroll 長いテキストを自動スクロールさせることもできます。 SlipHoverの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.sliphover.min.js"></script> Step 2: HTML 各画像はimg要素で配置しラッパーで内包し、表示するテキストをtitle内に記述します。 <div id="container"> <img src="1.jpg" title="title1" /> <img src="2.jpg" title="title2" /> ... </div> Step 3: JavaScript ラッパーをjQueryの
[JS]着眼点が面白い！スクロールできない状態でキーボードやクリックでスクロールさせるスクリプト -Scrollocue
2番目のパラグラフに移動して、ハイライト表示 Scrollocueの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery-2.0.3.js"></script> <script src="js/scrollocue.js"></script> Step 2: HTML スクロールのキューとなるパラグラフを配置し、適用する範囲を指定できるようラッパーで包みます。 適用範囲のラッパー：#container <div id="container"> <h1>Scrollocue</h1> <div class="section meta"> <p>A simple autocue/teleprompter system.</p> <p>Just use the arrows or spacebar t
[CSS]斜めのダイヤモンド状のグリッドを実装するスタイルシート
画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを実装するチュートリアルを紹介します。 デモページ：480pxで表示 実装 実装の準備 CSS3をサポートしているか判別するためにModernizeを使用します。 実装にはSassを使用します。 ダイヤモンド一つ まずはダイヤモンドを一つ実装してみましょう。 HTMLはdiv要素をa要素で囲みます。 <a href="#" class="diamond"> <div class="content"> Diamonds Are Forever </div> </a> CSSは下記のようになります。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } $diamondSize: 190p
使い勝手がかなり良い、10種類のInstagram風エフェクトを適用するPhotoshopのアクション -Instant Hipster
エフェクト：Nashville Instant Hipsterのインストール Instant Hipsterのインストールは簡単です。 ページ下部の「Free Download」から、ファイルをダウンロードします。 10 Instagram Photoshop Actions ダウンロードしたファイルを解凍します。 解凍した「Instant Hipster - 10 Retro Actions.atn」をPhotoshopフォルダ内の「Presets/Actions」の中に移動します。 Photoshopを起動しアクションパネルの右の三角から「アクションを読み込み」を選択し、解凍したファイルを指定します。 インストールが完了すると、アクションパネルに「Instant Hipster」が表示されます。 使い方も簡単で、アクションパネルから1クリックで各エフェクトが適用されます。
テキストに3DのかわいいエフェクトをPhotoshopで適用する -3D Font Generator Mockup
どこかで見たことあるような3DのかわいいエフェクトをPhotoshopであなたのテキストに簡単に適用できる「3D Font Generator」を紹介します。
[CSS]パタッと開くアニメーションがかわいいボタンを実装するスタイルシート
マウスオーバーでパネルがアニメーションでパタッと開き、中から現れるボタンを実装するスタイルシートのコンセプトを紹介します。
Mountain Lionの標準アプリをサードパーティーで代替したり改善したりする方法
Mountain Lionの標準アプリをサードパーティーで代替したり改善したりする方法2012.07.31 23:00 mayumine Mountain Lionは完璧なOSではありません。 プラットフォームとして堅実に進化していますが、ちょっとした不満や問題はまだまだありますよね。そんな問題をアップルのソフトウェアでは無くサードパーティーのアプリで、Mountain Lionと同等以上の機能を実現するTIPSを紹介していきますよ。 通知センターをもっと使いやすくする Mountain Lionから通知機能が搭載されました。この機能はGrowlというアプリでほとんど同じ機能を実現できますが、デフォルト設定だと通知センターとGrowlのバナーが同じ場所に出てきてしまうため、両方を同時に使うのはちょっと厳しいかもしれません。 これを回避するための選択肢としては......Growlを使うのを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
