サイトの表示高速化につながる18のこと | knowledge / baigie
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
独学・未経験でフロントエンドエンジニアになる方法 - tatsuyankmura
私は25歳の時に異業種から、Web業界に入りフロントエンドエンジニアになりました。 職業訓練校やスクールに通わず、知識ゼロの状態からフロントエンドエンジニアになるために行ったことや転職活動で使った求人サイト、面接で気をつけたポイントや意識したことをまとめてみようと思います。 これからフロントエンドエンジニアを目指している人、異業種からWeb業界への転職・キャリアチェンジを考えている方の参考になれば幸いです。 そもそもフロントエンドエンジニアとは 一般的にフロントエンドエンジニアとは、HTML/CSS/JavaScript/PHPなどを利用しWebサイトやWebアプリケーションの見た目や操作する部分を構築する人を指します。HTMLコーダーやマークアップエンジニアとの違いは、HTML/CSSの設計がメインの前者に対し、マークアップエンジニアはJavaScriptやPHPの実装、CMSや各種AP
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
AnimateImage – attosoft.info
目次 概要 特徴 使い方 ダウンロード API 仕様 記述例 デモ FAQ アニメーション機能を持つほかのスクリプト 画像関連のアニメーション規格 サポートする？ 概要 AnimateImage は複数の画像をアニメーション GIF のように連続表示する JavaScript ライブラリ。 ※ アニメーション機能を実現するスクリプトはいくつかあるが、要求に合ったものがなかなか見つからなかったため自分で作成。 特徴 複数の画像をアニメーション GIF のように連続表示する。連番または任意のファイル名に対応。 Web ブラウザーがサポートするすべての画像形式に対応 PNG, JPEG, GIF, BMP, TIFF, WebP など 透過 PNG 画像によってアニメーション画像の背景を透過できる 256 色を超える高画質の写真やイラストをアニメーションできる アニメーション間隔を指定できる (
jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。 - WEB人
jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。 公開：2009年11月 4日 21:06, 更新：2009年11月 5日 08:01 トラックバック(0) コメント(0) 最近の流行を抑えたサイトを見ていて気になる機能がありました。ページをスクロールして下へ移動すると、右下にスーッと出現する上向きのボタン。ポチっと押すと、ぬるっとスクロールしながらページのトップに戻ってくれる優れものです。 ホイールやスクロールバーを使って戻るのは、縦に長いページほど手間がかかるので、このプラグインがデザインの邪魔にならないのであれば是非実装してみましょう。場合によっては劇的にユーザビリティが向上します。 必要ファイルの準備 まずはjQueryのライブラリファイルを用意します。jQuery公式サイトに「Production (19KB, Minified and Gzi
[JS]パネルをフェードで切り替えるシンプルな国産のjQueryのプラグイン -ImageNavigation
デモページ：2（テキスト版） 右側のパネルの切り替えは手動と自動に対応しており、スクリプトのオプションで設定が可能です。 スクリプトのオプションでは次のものなどが設定できます。 切り替えの自動と手動 パネルの表示時間 フェードの時間 ラベルの画像とテキスト ラベルに画像を使用した際、ロールオーバー時の変更はスクリプトの機能に含まれているため、ロールオーバー用の画像を用意するだけで実装されます。
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQueryでページ内スムーズスクロール | 1：n – DETELU Blog
jQueryでページ内リンクをスムーズに移動（ページトップへ等）するものを作ろうと思いいろいろ調べていたら、いいページを見つけたので早速試してみました。 We Ain’t Seen Nothin’ Yet. : [Rails meets jQuery] jQueryで作るページ内目次とスムーススクロール 上記の記事では「Interface.js」を利用しているようなのですが、動作させるコードを読んでいるとInterface.jsをどこで使っているかわからなかったので、jQueryだけで動作確認すると、とりあへず動きました。jQueryの古いバージョンでは「scrollTop」がjQuery自体に含まれていなかったのかもしれませんが、最近jQueryをいじり始めたため詳しいことはわかりません…。 ということでコードはほぼそのまま利用させていただき、スクロール動作だけを変更しています。 使用フ
[JS]イージングにも対応した、コンテンツをスクロールさせるスクリプト -Custom Content Scroller
限られたスペースに設置するのに最適、コンテンツにスクロールバーを設置するjQueryのプラグインを紹介します。 スクロールバーのデザインはCSSで簡単にカスタマイズできます。
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った - かちびと.net
iPhoneやAndroidなどの人気の スマートフォン向けのJavascript製 フレームワーク・wink toolkitを触っ てみました。動作サンプルが豊富 で割と応用できそうだったので日本 語でサンプルを作ってみました。 スマートフォン向けのWebサイトやネイティブアプリに使えそうなJavaScript製のフレームワークです。沢山の動作サンプルがあって、内容もとっても分かりやすかったので（完全ではないけど）日本語サンプルを作成してみました。 スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜
動画やWebページをクリックで表示するLightbox系javascript「Mediabox」
ホームページで、YouTube、WMP、SWF、MOV、WMVなどのサムネイル画像・文字をクリックして、 そのページ内で動画などを開く方法 ［Mediabox] Lightbox for Media Mediaboxは、lightbox系の動画メディアなどのコンテンツを再生するJavascriptである。 JSフレームワークにMooToolsを使用している。同じようなJavascriptに、画像も動画なども再生できるShadowboxがある。 Mediabox サンプル
[js] 画面全体をオーバーレイする | おれせか
Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-settings.php on line 472 Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-settings.php on line 487 Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-setti
TITLE
※基本的には出てきたオーバーレイはクリックしたら閉じます。 var o1 = new $.overlay(); $('#btn01').click(function(){ o1.open(); }); var o2 = new $.overlay({bg_color: '#ff0000'}); $('#btn02').click(function(){ o2.open(); }); var o3 = new $.overlay({opacity:0.8}); $('#btn03').click(function(){ o3.open(); }); var o4 = new $.overlay({bg_color: '#0000ff', opacity:0.1}); $('#btn04').click(function(){ o4.open(); }); var o5 = new $.ove
script.aculo.us - downloads
script.aculo.us is from now on developed using Git (hosted at github) for source code management and revision control, and Lighthouse for bug tracking. Why git instead of Subversion? Well, it simply rules supreme, and makes working with many distributed developers with lots of branches a snap. You can find a good intro book on Git on Peepcode. script.aculo.us 1.xx development will focus on bug fix
画面の下からフィードバックフォームをスライド表示して固定する - fixedUI プラグイン - Postal Search Ajax API with jQuery - Postal Search APIs & Solutions
WEB ブラウザの画面下に指定したブロック要素を固定して表示する jQuery プラグインです。ページをスクロールしても、指定したブロック要素を常に WEB ブラウザの画面下に表示します。 また、固定したブロック要素は表示や非表示の指示ができます。表示を指示すると、画面下からブロック要素をスライドしながら表示します。非表示を指示すると、画面下にブロック要素をスライドしながら隠します。 同じ効果のある jQuery Catfish Advert Plugin という jQuery プラグインもあるのですが、配布していたサイトが休止?していて入手できなくなっています。今後、再開してメンテナンスするのかもかわかりません。それじゃということで jQuery Catfish Advert Plugin と同じ振る舞いをするプラグインを自ら作ってみたわけです。 ダウンロード jquery.fixedU
難読化されたJavaScriptを見やすく·JsDecoder MOONGIFT
JavaScriptが多用されるになっているが、そのために肥大化する傾向にある。特に共通ライブラリ系は相当重たくなっており、ブラウザへの負担が大きくなっている。そのためにサイズを減らすべく使われているのが難読化処理だ。 見づらい… 変数名を短い単語に置き換え、余計な改行やコメント、空白を省いていく。開発は通常のソースで行い、配布は難読化処理を行ったものを利用する。だが、利用者側は問題が起きた時に情報が得づらくなってしまう。そこでこれを使ってみよう。 今回紹介するオープンソース・ソフトウェアはJsDecoder、難読化の逆処理を行うソフトウェアだ。 JsDecoderは難読化処理されたJavaScriptを逆に見やすくするソフトウェアだ。;で区切り、適切なインデントを行い、さらにハイライト処理を行ってくれる。もちろん、変数名が変わる訳ではないが、これでも随分見やすくなるだろう。 見やすい！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://freecss.info/css-tutorials/css-and-jquery-creating-image-slider/
Script.aculo.usで実現できる、さまざまな視覚効果
