ローディング画面でSVGアニメーション
ローディングライブラリが出てましたので、SVGアニメーションのサンプルを動かしてみました。
サンプルはこちら
http://moeten.info/js/20141015_loadingSvgAnimation/
ソースコードはこちら
<html> <head> <script src="progressbar.min.js"></script> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"> <path fill-opacity="0" stroke-width="0.5" stroke="#f4f4f4" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/> <path id="heart-path" fill-opacity="0" stroke-width="0.6" stroke="#555" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/> </svg> <script> //パスの読み込み var svgPath = document.getElementById("heart-path"); var path = new ProgressBar.Path(svgPath, { duration: 300 }); //パスアニメーション var cnt = 0; var doPath = function(){ if( cnt >= 1 ){ return false; } path.animate( cnt , { duration: 600 }, function () { console.log('Animation has finished'); }); cnt += 0.1; setTimeout( doPath , Math.random() * 1000 ); }; doPath(); </script> </body> </html>
イラスト系でもできるのかなあって思ったら、pathを指定された箇所のみってことみたいです。
jQueryライクに3D空間を作れるライブラリtQuery
jQueryライクに3D空間を作れるライブラリtQuery
tQuery API - extensions for three.jsで簡単に3D空間を作ってみました。
<!doctype html> <title>Minimal tQuery Page</title> <script src="tquery-bundle.js"></script> <script src='tquery.checkerboard.js'></script> <script src="tquery.shape.js"></script> <script src="tquery.shape.create.js"></script> <body> <script> var world = tQuery.createWorld().boilerplate().start(); tQuery.createCheckerboard({ segmentsW : 100, // number of segment in width segmentsH : 100 // number of segment in Height }).addTo(world).scaleBy(100); shape = tQuery.createHeartShape(); shape.extrude().toMesh().id('obj').addTo(world); tQuery('#obj') .geometry().computeAll().normalize().center().rotateZ(Math.PI).back(); tQuery.world.hook(function(delta){ tQuery('#obj').rotateY(90 * delta * Math.PI / 180); }); </script> </body>
ライト関係もあるらしい・・・
Canvasにランダムな点
Canvasにランダムな点を描く方法
canvasをjQueryライクに扱えるjCanvas | jQuery meets the HTML5 canvasを使ってcanvasにランダムな色の点を書いてみました。
var canvas = $("canvas"); var width = canvas.width(); var height = canvas.height(); for( var i = 0 ; i < 100 ; i ++ ){ canvas.drawArc({ draggable: true, fillStyle: "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16), x: width*Math.random(), y: height*Math.random(), radius: 10 }); }
分かりやすくて便利っすねえ
CSS3とjQueryでアコーディオン
CSS3アニメーションを使って、アコーディオンを実現します。
jQueryのslideDownよりも幾分、なめらかに動作するかと思います。
サンプルはこちら
http://moeten.info/js/20140908_cssSlide/
メインのソースはこちら
css
dd{ overflow-y: hidden; opacity: 0; max-height: 0; transition-property: all; transition-duration: 1s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } dd.open{ opacity: 1; max-height: 200px; }
javascript
$(function() { $("dl dt").click(function(){ $("dd").removeClass("open"); $("+dd",this).addClass("open"); }); });
html
<dl> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> </dl>
Apacheからnodejsのリッスンサーバーポートにマッピングさせる
Apacheからnodejsで起動したサーバーポート3000にマッピングさせます。
Apacheの設定ファイルの編集
設定ファイルを編集します。
emacs /etc/httpd/conf/httpd.conf
下記項目を追記します。
NameVirtualHost *:80 <VirtualHost *:80> ServerName example.com #←利用ドメインの指定 <Location /> ProxyPass http://localhost:3000/ ProxyPassReverse http://localhost:3000/ </Location> </VirtualHost>
Apacheのリスタート
apachectl restart
あとは、httpd.conに指定したexample.comにブラウザでアクセスすればlocalhost:3000にマッピングされます。