WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

JavaScriptライブラリ

色の変換ができるライブラリRGB color parser in JavaScript

公式サイト RGB color parser in JavaScript / Stoyan's phpied.comデモ http://efu.sakura.ne.jp/web/background/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの色の値を変換</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

Swiper

jQueryを使用せずに使用できるスライダー公式サイト Swiper - Most Modern Mobile Touch Sliderデモ http://efu.sakura.ne.jp/web/swiper/ <html lang="ja"> <head> <div> <meta charset="UTF-8"> <title>swiper</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></div></head></html>

Canvasを使って雪を降らせるSnow in 3D

マウスを動かすと立体的に移動する。 デモはこちら http://efu.sakura.ne.jp/web/snow3/ 公式サイト JavaScript HTML5 Canvas Snow in 3D | Seb Lee-DelisleGitHub github.com HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript HTML5 Canvas Snow in 3D</title> <style> body { background-color: #000;</meta></head></html>…

雪を降らせることができるsnowparticle.js

こちらからお借りしました。 actyway.comjQueryに依存していない PC用とスマホ用がある デモはこちら http://efu.sakura.ne.jp/web/snow2/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>Snow Particle</title> <script> (function(u,d,s){ var ins=function(url){var j=d.createElement('script');j.src=url;s.p</meta></head></html>…

Chart.js

折れ線グラフ、棒グラフ、レーダーチャート、円グラフ、鶏頭図、ドーナツグラフなどを canvasで作成できるJavaScriptライブラリwww.chartjs.org 準備 公式サイトからファイルをダウンロードし、「Chart.js」を読みこむ。 CDNもある <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> レーダーチャート デモは…

js-redirect-module

github.comデバイスを判別して深い階層になってもリダイレクト処理が簡単にできるライブラリ。 「/」から「/sp/」や「/sp/」から「/」などにも対応。 デモはこちら http://efu.sakura.ne.jp/web/js-redirect-module/ 使い方 GitHubからファイルをダウンロー…

particles.js

幾何学模様のパーティクルを作れるライブラリvincentgarreau.comデモはこちら http://efu.sakura.ne.jp/web/particles/ 公式サイトからファイルをダウンロードする。 空のdivに任意のID名を付ける。 JSファイルを変更しない場合は「particles-js」とする。ap…

yuga.js

yuga.js :: Kyosuke.jpちょっとした実装を自動でしてくれたり、追加したりすることができるJavaScriptライブラリ基本的に読みこむだけで動作する 機能一覧 画像ロールオーバー 通常のボタン画像とロールオーバー用の画像を用意し、 ロールオーバー用の画像の…

プラグインJavascript / CSS Crossfaderでクロスフェード

デモはこちら http://efu.sakura.ne.jp/web/crossfader/ クロスフェードとは フェードインとフェードアウトを繋げ重なりながら切り替わる効果。クロスフェードのプラグインをダウンロードする。www.brandspankingnew.netダウンロードしたファイルを解凍し、 …