サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
買ってよかったもの
2g.atsukitaira.com
canvasをウィンドウサイズいっぱいの背景に固定したい場合や、フルcanvasのコンテンツを作成したい場合用のメモ。 canvasはjavascriptを利用してサイズ指定、リサイズ処理を行います。 ※下記コードはjQueryの利用を前提に書いています。 【html】 <body> <div id="wrapper"> <canvas id="main"></canvas> </div> </body> 【css】 body{ margin: 0px; padding: 0px; position: relative; } body #wrapper{ width: 100%; height: 100%; position: fixed; } 【js】 $(function () { sizing(); $(window).resize(function() { sizing(); })
要素をアニメーションさせて印象的に見せる「動きのあるメインビジュアル」は以前まで主にFlashが使われていましたが、最近ではJavascriptで実装されているものが増えてきています。Javascriptを利用したアニメーションは、jQueryとEasing Pluginを使うことで比較的簡単に個々の動きをつけることができます。 個々に設定したアニメーションを順番に再生するために、今まで自分はdelay()やコールバックを利用していましたが、Web Designing（2013.03）にjQueryのDeferredオブジェクトを利用して関数を順番に実行する方法が載っていたので処理の流れを確認するためメモを兼ねてコードを自分なりに整理してみました。 個人的に今回のポイントとなるのはjQuery.Deferredとスキップボタンに使用するstop()。 調べてみるとstop()の引数には実は
ブラウザの「戻る」を利用しページが再表示された時にはonloadイベントが走らないブラウザが多いため、ロールオーバー画像が既に見えていたり、フェード効果がなくなったり、Ajaxで読み込んだコンテンツが…といった不都合が起きやすいものです。 これはキャッシュを利用しページを再表示するために起こるのですが、unloadイベントがあるとキャッシュされない性質を利用し回避することができます。 ※下記のコードではjQueryを利用しています。 // ブラウザバック対策 $(window).unload(function(){}); 参考：戻るボタンとonloadイベント – 北海道苫小牧市出身のPGが書くブログ 0 Comments» コメントはまだありません。 このコメント欄の RSS フィード TrackBack URI コメントをどうぞ » 初めてコメントされる方は管理人の承認が必要となります
大きな画像を多用していたり、パララックスサイトなどで1ページあたりの容量が大きくなった場合、通信回線にもよりますが全ての画像とソースコードの読み込みが完了するまで結構な時間がかかったりします。 読み込み中の間は画像が順次表示されていって美しくなかったり、不具合が起きたり、訪問者がイライラして離脱に繋がったり…いろいろ不都合があります。 これを解消するために、ページを読み込み中の間はローディング画面を表示し、読み込み完了後にコンテンツを表示する方法をとります。 イメージとしては、読み込み中は上記の画像のようにコンテンツの上に目隠し用のレイヤーを表示し、全ての読み込みが完了したタイミングで目隠しを非表示にするイメージです。 ソースコードは左から右へ、上から下へと読まれていくので、ソースコードを書く位置にも注意しましょう。 ソースコードと画像が「全て読み込まれた」というイベントは、javascr
このブログの右下に実装している「ページトップに戻る」ボタンは、 ページトップ時には非表示にし、ページを少しスクロールすると出現する仕組みになっています。 jQueryを利用すれば非常にカンタンなのでご紹介します。 <!-- html --> <div id="pageTop">「ページトップに戻る」ボタン</div> $(function(){ $(window).scroll(function(){ // 対象までの高さ var distanceTop = 100; // 対象に達しているかどうかを判別 if ($(window).scrollTop() > distanceTop) { // していれば、pageTopをfadeIn $('#pageTop').fadeIn("slow"); } else { // していなければ、pageTopをfadeOut $('#pageTop
atsukitaira.com 2022 著作権. 不許複製 プライバシーポリシー
ずいぶん前から知られている技術ですが、まれに必要に迫られた時に必ず忘れているのでメモ。 divをウィンドウの上下左右中央揃えにする場合、親となるbodyに対してpositionを使用し絶対配置で配置します。 このときに指定する値はtop50%、left50%となります。これでdivの基準点が中央の指定となりますが、divの基準点は左上なのでこの位置からdivの幅の半分とdivの高さの半分のネガティブマージンでさらに位置を調整します。 実際のサンプルコードは以下の通り。 <!-- html --> <body> <div id="hoge">上下左右中央のコンテンツ</div> </body> /* css */ body { /* 省略可 */ position: relative; width: 100%; height: 100%; } #hoge { position: absolu
このページを最初にブックマークしてみませんか？
『atsukitaira.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
