カテゴリーアーカイブ: jQuery

奥行きのある３Ｄにみせるjqueryライブラリ『smart3d』を使ってみました！

Posted on by
返信

先週の休みにせっかくこのブログをリニューアルしたので、
ＴＯＰのヘッダー画像にギミックを入れてみました！

画面上部の画像の上でマウスを動かすと奥ゆきがあるように動きます。

最近googleのトップロゴもよくギミックがつかわれていますが、まけじと何か新しいのを入れようと思い色々さがしたところ『jquery.smart3d』というライブラリを発見！

『jquery.smart3d』
http://4coder.info/en/code/jquery-plugins/smart3d/

奥ゆきを出し３Ｄっぽくみせることができるライブラリです。
いくつか用意した画像を何枚もかさねています。png画像を利用して、blurをかけてそれっぽくしてます。
インスパイアされたのはバイオハザード４のこのシーン↓（汗

バイオハザード４インスパイア

 

ただ背景が白くて奥ゆきがあるというだけですが、、（汗

・・・・・利用方法も簡単で、下記ライブラリとjqueryを読んで

<script type="text/javascript" src="/js/jquery_smart3d/jquery.smart3d.js"></script>

あとは、jqueryで下記のように記述し

<script type="text/javascript">
    $(document).ready(function() {
        $('#smart3d-head').smart3d({ last_is_static: true });
    });
</script>

htmlで下記のように表示した画像を指定する。とてもシンプルにできています。

<ul id="smart3d-head" style="display:none">
                                <li><img src="/images/headers3d/back1160.jpg" /></li>
                                <li><img src="/images/headers3d/matsudapresslogo3d.png"  /></li>
</ul>

一応ＩＥにも対応してます。
またmedia queriesでスマホなどの画面サイズ小にも対応するため、
画面サイズが大きくないとこのギミックが表示されないようにしました。
※onloadで読み込んでいるので、読み込みが完了してから上部画像みていただけると幸いですｗ

 

ずっとプログラマーとしてやってきたので、
最近デザインももっと勉強しなきゃと日々危機感を感じている今日この頃。。

リニューアル!! ルートドメインへ変更＆MediaQueriesでスマートホンレイアウトに対応しました。

Posted on by
返信

今回サイトのサーバー移行と一緒に、いままで無料のDDNSで利用していたサブドメインを、
独自ドメインを取得してルートドメインに変更しましたｗ

http://e-com.webhop.net/wordpress/　→　https://matsudapress.com

また、移行先もwordpressにしhtml5＆CSS3対応にし、スマホで表示してもレイアウトが崩れないようまえから気になっていたmedia queriesを利用したブログに変更しました。

Media Queriesを利用することで、ブラウザの画面サイズによって利用するCSSを変更できるので、ブラウザの画面サイズを意識し、スマホでも見やすいサイト作成ができます。
このブログでもサイズによってこんな感じに変わります。

media queries

サイズ小（主にスマホ用）

 

 

 

下記のように横幅の最小と最大を指定し、そのサイズ内ならこのCSSを適用するということができます。

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
		padding: 0;
	}
	#page {
		margin-top: 0;
	}
	#branding {
		border-top: none;
	}
}

上記を利用しスマホの画面サイズを意識て作ることできれいなPCデザインをいかしつつスマホにも同時に適用できるのが魅力的です！
ちなみにいままでwordpressのプラグインでスマホ用の画面を用意してましたが、この方法なら好きにカスタマイズできるし、PC＆スマホ両方に適用させたい場面など大変便利になります。

実は今回利用しているテーマですがデフォルトテーマで、最初からMedia Queriesに対応しているので、気になる部分をカスタマイズして利用させていただいております♪

 

javascript or JQuery でタグ名（node名）取得　メモ

Posted on by
返信

javascriptでタグ名取得方法をメモ。。

jqueryなら

alert($j('#info-list')[0].nodeName);

または

alert($j('#info-list').nodeName);

javascriptなら

alert(document.getElementById('info-list').nodeName);

※一応javascriptは、ブラウザ依存が不安なので、下記ブラウザで動作確認しました。
Window7で
・Chrome8.0.552.215 OK
・IE 8.0.7600.16385 OK
・FireFox 3.6.13 OK

ajaxクロスドメイン対策　jsonpメモ

Posted on by
返信

大分いまさらながらjsonpについてメモです。
通常javascriptで外部ドメインにて処理した結果を返してもらうのは、できないが、
jsonpを利用することで、外部ドメインの処理結果を利用することができます。

下記に最低限必要と思われる例コードをメモします。

http://外部ドメイン/?callback=callback　下記みたいなフォーマットで

callback({"title":"testtitle","count":"5320","url":"https://matsudapress.com/"});

埋め込みたい自サイトは、

処理結果をいただく部分は、

とすれば外部ドメインのデータを引っ張ってくることができます。
また、結果を受け取るcallback関数内で、呼び出しもとのJSを削除すると長いコードを隠せてきれいなコードにすることもできます。

最近では、jqueryでもっと簡単に利用することができますが、ベタでJSを書く必要がある場合は、
ちゃんと動作を理解しておくと役にたつかと思います。