ラベル jQuery の投稿を表示しています。すべての投稿を表示

2014年2月13日木曜日

[JS]デモがめちゃ楽しい！jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js

参考サイト：http://coliss.com/articles/build-websites/operation/javascript/js-wow.html

2014年1月10日金曜日

マウススクロールでアニメーションするJSまとめ。

０１.スクロールに応じて画を切替えるJS
(画像が切り替えで動くアニメーションを動かす事ができる)

スクロールに応じて動くアニメーションをつくる方法

０２.jQueryで横スクロールのアニメーションするサイトを作る方法
マウスホイールにも対応。ページの先頭ピッタリに（左に寄せて）移動してくれる。
※スマホ、タブレットのタッチデバイスに対応はしていないので何か考える必要あり。

０３.パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」
skrollr.jsというタッチデバイスにも対応しスクロールアニメーションできるJSライブラリがあるのだが、こちらのほうが軽量でPCブラウザならIE7も対応しているのでメモ。

DEMO

2013年10月4日金曜日

jQueryのanimationにイージングをつけるプラグインの使い方「jquery.easing.js」

jQueryのanimationにイージングをつける「jquery.easing.js」の設置方法。

（１）以下のページでダウンロードする。
jQuery Easing Plugin (version 1.3)

（２）jQueryと共にこのプラグインを<head>の中に入れてリンクを繋げる。

（３）jQueryのanimationを使っている部分に好きなイージングを書き込む。
※イージングは「jQuery日本語リファレンス」で動きを確認できる。

参考サイト
・jQuery日本語リファレンス-Easing/jQuery
・jQueryのエフェクトに変化を加える「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを作成してみた

2013年10月3日木曜日

google maps カスタマイズまとめ（複数マーカー&オリジナルマーカー&情報ウィンドウのカスタマイズなど）

google mapsカスタマイズまとめ

図のコードは以下

mygmap.js

var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶
 function initialize() {
  //地図初期化
  var initPos = new google.maps.LatLng(37.916192, 139.036413);
  var myOptions = {
   center : initPos,
   zoom : 4,
   mapTypeId: google.maps.MapTypeId.ROADMAP
     };

var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
 //マーカー1,2を作成
 var markerPos1 = new google.maps.LatLng(35.69384, 139.703549);
 var markerPos2 = new google.maps.LatLng(34.693738, 135.502165);
 var markerPos3 = new google.maps.LatLng(35.011636, 135.768029);
 var markerPos4 = new google.maps.LatLng(33.590355, 130.401716);
 var markerPos5 = new google.maps.LatLng(38.268837, 140.8721);
 createMarker(map_canvas, markerPos1, "
新宿
"+"
詳細
");
 createMarker(map_canvas, markerPos2, "
大阪
"+"
詳細
");
 createMarker(map_canvas, markerPos3, "
京都
"+"
詳細
");
 createMarker(map_canvas, markerPos4, "
福岡
"+"
詳細
");
 createMarker(map_canvas, markerPos5, "
宮城
"+"
詳細
");
 }
 function createMarker(map, latlng, text) {
 var infoWndOpts = {
 content : text,
 };
 var infoWnd = new google.maps.InfoWindow(infoWndOpts);
 
 
 // マーカー画像を作成 
 var markerImg = new google.maps.MarkerImage( 
 // マーカーの画像URL 
 "images/common/marker.png", 
 
 // マーカーのサイズ 
 new google.maps.Size(31, 37), 
 
 // 画像の基準位置 
 new google.maps.Point(0, 0), 
 
 // Anchorポイント 
 new google.maps.Point(10, 37) 
 );

gmapv3.css

@charset "utf-8";
@import url("gh-buttons.css");
/* selector */
html,body{margin:0;padding:0;font-size:12px;height:100%;line-height:1.5;word-break:break-all;}
body{margin:10px;}
textarea#res{margin:10px 0;width:498px;padding:0;height:100px;font-size:9px;box-sizing: border-box;}
h1, h2, h3, p{display:block;margin:10px 0;font-size:100%;}
pre{overflow:auto;}
/* class */
.w100p{width:100%;}
.cf:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.cf{display:inline-block;}
html[xmlns] .cf{display:block;}
* html .cf{height:1%;}
.size{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;}
.shadow{box-shadow:1px 1px 2px #888;-webkit-box-shadow:1px 1px 2px #888;-moz-box-shadow:1px 1px 2px #888;-ms-box-shadow:1px 1px 2px #888;-o-box-shadow:1px 1px 2px #888;}
/* map_canvas */
#map_canvas{
 width:386px;
 height:320px;
}
#zoomlevel span{font-weight:bold;font-size:120%;}
#res{color:red;}
/* infowindow */
dl#infowin1{margin:0;padding:0;}
dl#infowin1 dt{margin:0;padding:0;font-weight:bold;}
dl#infowin1 dd{margin:5px 0 0 0;padding:0;line-height:1.5;}
dl#infowin1 dd img{padding:2px;background:#fff;border:1px solid #ccc;margin-right:5px;}
dl#infowin2{margin:0;padding:0;}
dl#infowin2 dt{margin:0;padding:0;font-weight:bold;}
dl#infowin2 dd{margin:5px 0 0 0;padding:0;line-height:1.5;}
dl#infowin2 dd img{padding:2px;background:#fff;border:1px solid #ccc;margin-right:5px;}
@media only screen and (min-device-width:768px) and (max-device-width:1024px){
 #map_canvas { width:100%;height:100%;}
}
@media only screen and (min-device-width:320px) and (max-device-width:480px){
 #map_canvas { width:100%;height:100%;}
 textarea#res { width:100%;}
}
/* map */
#map{width:100%;height:100%;margin:0;padding:0;}
/* infowindow */
.infowin{font-size:11px;overflow:visible;line-height:1;}
.infowin p{margin:5px 0;padding:0;}
.infowin .picframe{overflow:hidden;text-align:center;}
.infowin .picframe img{border:2px solid #fff;overflow:hidden;margin:5px;}
.infowin .ttl{width:96%;overflow:hidden;}
.infowin .ttl b{font-size:130%;overflow:hidden;}
.infowin .ttl img{margin-right:10px;width:16px;height:16px;float:left;overflow:hidden;}
.infowin ul{margin:0;padding:0;list-style:none;}
.infowin li{margin:0;padding:0;list-style:none;}
.infowin table{margin:5px 0;padding:0;border:1px solid #ccc;border-collapse:collapse;width:100%;}
.infowin th{margin:0;padding:0;border:1px solid #ccc;width:6em;white-space:nowrap;text-align:center;}
.infowin td{margin:0;padding:0 0 0 1em;border:1px solid #ccc;text-align:left;}
.infowin th span{display:block;font-weight:normal;}
.infowin .comment{margin:5px 0;padding:0;height:100px;background:#eee;overflow:auto;}
/* panowin */
.panowin{font-size:11px;overflow:visible;line-height:1;margin:0;padding:0;}
.panowin .thumb{text-align:center;}
.panowin .thumb img{border:2px solid #fff;}
.panowin p{margin:5px 0 0 0;padding:0;}
/* custom infowindow */
.customwin{border:1px solid #a0a0a4;line-height:1;margin:0;padding:0;padding:5px;background:#fff;margin-bottom:33px;margin-top:33px;font-size:11px;}
.customwin a{color:#666;}
.customwin .logo{width:119px;height:25px;}
.customwin .author{margin:0;padding:0;}
.customwin .thumb{margin:0 auto 5px auto;padding:0;width:100%;}
.customwin .thumb img{display:block;width:100%;}

html

参考サイト
・google map 活用講座
・PHP&JavaScript Room　「情報ウィンドウ」
・google developers 「Info windows」
・lopan 「Google Maps APIのおさらい。」

jQueryでhtmlの簡単ローディング

jQueryでhtmlの簡単ローディングの参考サイト

・ニジュウリョク「jQueryでhtmlの簡単ローディング」
・ローディング用gifアニメーションのジェネレーター
「Loader Generator」
「preloaders」

2013年5月13日月曜日

jQuery覚書き

◯setTimeout

JavaScript、jQueryでfunctionを“何秒後”に実行と指定できる。 <参考URL>http://bl6.jp/web/javascript/settimeout-run-timing/

◯slideDown、slideUp

クリックで開閉するアコーディオンを実装。

<参考URL>http://yurubu.org/jquery%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89-slideup-slidedown/299

◯スムーススクロール用JavaScript

<参考URL>http://www.coolwebwindow.com/weblife_column/coolweb/000301.php

2013年4月12日金曜日

スマートフォンサイトを作るための参考サイトまとめ。

（１）「jQuery Mobile」

スマートフォン向けフレームワーク、iOSやAndroidなどのWebKitベースのスマートフォンだけでなく、Windows PhoneやBlackBerryにも対応。

スマートフォンでのページ切り替えアニメーションや基本的な構造、ボタンのアイコンなどが簡単に使えるようにしてくれるライブラリ。

参考サイト
「jQuery」http://jquery.com/

「jQuery Mobile」http://jquerymobile.com/

「jQuery Mobile 日本語リファレンス」http://dev.screw-axis.com/doc/jquery_mobile/

2012年12月20日木曜日

jqueryrotate - 画像を回転させられるjQueryプラグイン

jqueryrotateは、画像を回転させられるjQueryプラグインです。
ループでずっと回すことができたり、hover時に360度回転させることも可能なようです。

URL：jqueryrotate

2012年11月27日火曜日

マウスオーバーのクロスフェード効果jQueryと少しのJSで実装

1.　ヘッダにjQuery本体を読み込む

2.　jQueryの処理を記述する

3.CSS

4.html

jQueryの部分で.stop(true,true)を付ける事でホバーした分だけoapcityが
効いてしまうことを防ぐ。
詳しくは参考サイト：[jQuery]こんな機能があったんだ。jQuery stop()

※あと画像を２枚使ってクロスフェードさせているが、１枚画像に半透明のフェード効果を付ける事も出来る。

<参考サイト>
http://miracle-ysdesign.com/blog/javascript/443.html

2012年11月22日木曜日

画像エフェクト　jQueryプラグイン

「JsManipulate」
ライセンス料がスタンダードで12ドル

「camanjs」
推奨ブラウザはIE9から

2012年11月1日木曜日

可変グリッドとソートが出来るjQuery「jQuery Responsive Tile Gallery」

可変グリッドとソートが出来るjQuery「jQuery Responsive Tile Gallery」

参照サイト：「jQuery Responsive Tile Gallery」

2012年9月19日水曜日

「jQuery.flickable」スマホでもPCでドラッグとフリック操作でスクロール

http://lagoscript.org/jquery/flickable/demo

<元サイト>
http://lagoscript.org/jquery/flickable/demo

2012年8月29日水曜日

simpleWeather - 天気を表示するためのjQueryプラグイン

<参考URL>
http://blog.creamu.com/mt/2012/08/simpleweather_-_jquery.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+creamu%2FhLkA+%28CREAMU%29&utm_content=Google+Reader

« グラフィカルな&(and, ampersand)のフォント | トップ | Redactor - 美しいWYSIWYGエディタ » BIGVIDEO.JS - フルスクリーンの背景に動画を埋め込むためのjQueryプラグイン

<参考URL>
http://blog.creamu.com/mt/2012/08/bigvideojs_-_jquery.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+creamu%2FhLkA+%28CREAMU%29&utm_content=Google+Reader

2012年6月12日火曜日

ダイナミックなアニメーション、フルスクリーン対応のスライダーを実装する(jQuery+CSS3)

ダイナミックなアニメーション、フルスクリーン対応のスライダーを実装する(jQuery+CSS3)
<参考サイト>
http://coliss.com/articles/build-websites/operation/work/tutorial-fullscreen-slit-slider-by-codrops.html
<元サイト>
http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/

2012年6月11日月曜日

prototype.js jquery コンフリクトを4行で解決する。

prototype.jsと jqueryは一緒に使うとコンフリクトしてどちらかが
動かなくなります。その解決方法。

(1)読み込ませる順番を変える。
1：prototype.js
2：prototype.jsのプラグイン
3：jQuery
4：jQueryのプラグイン

(2)以下のスクリプト4行を上記2と3の間に入れる。

完了。

<例↓>

<参考サイト>
jQueryとprototype.jsを共存させる方法