[B! 高速][レイアウト] masakuma0812のブックマーク

masakuma0812 id:masakuma0812

高速とレイアウトに関するmasakuma0812のブックマーク (3)

[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロールエフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
masakuma0812 2016/07/15
Javascript

画面

スクロール

アニメーション

逆

ページ処理

遷移

高速

3D

レイアウト
リンク
waterfall.js
div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモスクリプトのページ自体がデモになっています。まずは、デスクトップサイズでの表示。デモページ、幅780pxで表示カラムの数はカラムの幅の最小値を設定することで、自動で表示されます。ページ内の適用範囲も指定できるので、左のサイドバーはそのままの表示です。 waterfallの使い方使い方は簡単です。 HTMLがあれば、数行加えるだけで完了です。 Step 1: 外部ファイル waterfallはj
masakuma0812 2013/06/27
jQuery

ブロック要素

画像

リスト

整列

自動

調整

レイアウト

配置

高速
リンク
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。さまざまなレイアウトに対応できるグリッド。表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモデモはシンプルな構成のページが表示が用意されています。まずはデスクトップサイズとして、幅1200pxで表示してみます。デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップスクリプトのセ
masakuma0812 2013/05/23
Javascript

レスポンシブ

対応

レイアウト

高速

設定
リンク
1