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

2014年9月2日火曜日

CSS3で簡単にページ切替を追加できる「Animsition」

フェードアウト、インでページ切り替えをしたりその他色々なトランジションで切り替えできる。ちょっと動きを追加したい時や動きに合わせた表現方法も考えられるかも。

◯サポートブラウザ
モダンブラウザとIE10以上

◯リンク

A simple and easy jQuery plugin used to add page transition on css animations.

2014年2月13日木曜日

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

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

2014年1月21日火曜日

スマートフォンサイト制作メモ

スマートフォンサイト、ブラウザチェック環境

・SDK android(エミュレータ)
・Android SDK の高速化方法

・Google Chromeの標準機能でユーザーエージェント切り替え

参考サイト

「1分で使える！Google Chromeならスマホのブラウザチェック機能はデベロッパーツールに標準装備」

ROOM9

「スマホでLightboxのようなモーダルウィンドウを再現、動画やhtmlも読み込み可：Boxer」

・iOS7になって変わったブラウザ表示サイズ、スマホサイトファーストビューなど。

iOSとAndroidのフォント指定について

iOSはヒラギノ角ゴかヒラギノ明朝W3,W6
Androidは以下
・4.0以降　日本語フォントはモトヤフォントの「MTLc3m.ttf - モトヤLシーダ3等幅」「MTLmr3m.ttf - モトヤLマルベリ3等幅」の2つでボールドののフォントが無い。
英語フォントは「Roboto」

・3.X以前
「Droid Sans」

<参考サイト>
・Web Tips
「スマートフォンを考慮したフォント指定の検討」

・たき備忘録
「Android 4.0で採用された｢モトヤフォント｣とは？」

<参考サイト>
・All about 「Androidスマートフォンエミュレータの使い方」
http://allabout.co.jp/gm/gc/381225/

・「スマートフォン向けサイト作成にあたっての基本概要」
http://www.u-ziq.com/blog/2011/01/post_61.html

・スマートフォンサイトをデザインする上で知っておくべき10のTIPS
http://blog.webcreativepark.net/2011/06/16-103025.html

スマートフォンサイトスライドショーまとめ(iPhone,Android)

01.FlexSlider 2

・フリック対応
・横スライド
・レスポンシブ
・iPhone,Android多分可
・ボタンの位置が変えやすい
参考URL：FlexSlider 2

02.Nivo Slider（をレスポンシブにしたものby LIG）

・フリック非対応
・色々なスライド方法あり
・レスポンシブ
・iPhone,Android多分可
・ボタンの位置が変えやすい
参考URL：スマホサイトに入れると使いやすくなる！おすすめjQuery4選！｜LIG

03.Swipeshow

普通の縦横固定のスライドショー
・フリック対応
・横スライド
・iPhone,Android多分可
参考URL：Swipeshow

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のおさらい。」

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年1月5日土曜日

html5のcanvas＋JSで描画する勉強サイトまとめ

・HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！

・HTML 5 canvas要素 + Javascriptで作る、動的コンテンツ

・『canvas』要素の勉強をする時の参考サイトまとめました / HTML5『canvas』要素基礎

・Canvasリファレンス

・まだまだ間に合うCanvasでアニメーション入門（まとめ実践）

・Canvasで実現するカラフルな円が小さくなったり大きくなったりする背景

2012年11月22日木曜日

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

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

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

2012年10月8日月曜日

WEBフォントのWEBサービス「Fonts.com 」の使い方

(1)「Fonts.com 」のWEBフォントのページ行く
(2)アカウントを作る。
※この時無料のプランは月間25000PV以内のWEBサイトで3000フォント使えるというようなプランを選べば無料でWEBフォントが使える。
(3)プロジェクト名を決める、プロジェクト毎に複数のサイトでWEBフォントを設定できる。

(4)名前を決めたらプロジェクトで使う「フォント」「WEBフォントを使用するドメイン」「WEBフォントを使用するフォントを囲むタグやid,class名」を指定する。

※Add & Edit CSS Selectorsは例えばWEBサイト全体に効かせたいのであれば
htmlやbodyタグを指定する。任意の場所のみに効かせたい場合はそのフォントを囲むhtmlのidやclass名を指定すれば良い。

(5) プロジェクトの設定画面右のメニュー「Publish Options」を選択する。
JSのリンクが出てくるのでそのリンクをhtmlの<head>の中に記述する。

(6)JSリンクの下にWEBフォントを指定するCSSが記述されているので
それをCSSに書き込む。

(7)htmlとCSSをプロジェクトで登録したドメインのサーバー上にあげれば完成。

(8)ちなみに無料版は右端にバナーが入るらしいがdiplay、noneとかで
消えるので気になる場合はCSSで消せる。

2012年5月29日火曜日

Javascriptのみでスムーズページスクロール(加速なし)

以下を<head></head>の中に記述

以下をhtmlに記述



ページの上へ

CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie

CSS(スタイルシート)をjavascriptで切り替える色々な方法のメモ
参考サイト
http://blog.4galaxy.net/19.html

2012年2月22日水曜日

HTMLサイトでよく使う機能をまとめたライブラリ群「SimpleLib」

参考サイト

自由に画像にマスクをかけられるJavaScriptライブラリ「Edge.js」

参考サイト：http://phpspot.org/blog/archives/2007/08/javascriptedgej.html

2011年11月15日火曜日

スムーズスクロール JS (今回wordpressで喧嘩しなかった)

jQueryでページ内リンクをスムーズに移動。
そして止まる位置の調整も速さも調整出来る。

(以下の2つを読み込んで)
jquery.js
jQuery Easing Plugin（jquery.easing.js）

（以下をheader内に記述）

<script language="JavaScript">
$(function() {
 $('a[href*=#]').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
   var target = $(this.hash);
   target = target.length && target;
   if (target.length) {
    var sclpos = 30;
    var scldurat = 1200;
    var targetOffset = target.offset().top - sclpos;
    $('html,body')
     .animate({scrollTop: targetOffset}, {duration: scldurat, easing: "easeOutExpo"});
    return false;
   }
  }
 });
});
</script>

通常のページ内リンクをhtml上に記述すれば完成。

※Wordpressの場合は$をjQueryに変える(4箇所)

参考URL

http://www.detelu.com/blog/2008/09/jquery%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E3%82%B9%E3%83%A0%E3%83%BC%E3%82%BA%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB/

2011年7月2日土曜日

アコーディオンメニュー。フェードして現れる。

IE6,7でも、ページスクロールjsやスライドショーのjs、iepngfix.jsと共存出来る.

2011年3月31日木曜日

IE6,7も対応。背景画像をフルスクリーンにできるjs

2011年2月20日日曜日

JavaScript: ポップアップウインドウの開き方、短いスクリプト！

ポップアップウィンドウの位置を指定して表示。

http://www3.ocn.ne.jp/~motiya/java/sample-4/window_choice1.htm

2011年2月3日木曜日

[JS]jQueryのプラグイン33+1選

・スライド式ギャラリー
・リッチな動きのナビゲション
・ファードインでコンテンツが読み込まれるエフェクトとか。

http://coliss.com/articles/build-websites/operation/javascript/jquery-plugins-best-2011-jan.html

登録: 投稿 (Atom)