たった256文字のJavaScriptコードで描かれた街の風景アニメがスゴ過ぎて訳がわからない／解説ページを見てもわからないorz【やじうまの杜】
たった4行のコードをコピペするだけで、Webサイトやブログをダークモードにする軽量JavaScript -Darkmode.js
既存ページにたった4行のコードをコピペするだけで、そのページをダークモードにするボタンを設置する5.73Kbの軽量JavaScriptを紹介します。 他のスクリプトへの依存はなく、カスタマイズも非常に簡単。ダークモードに切り替わる際は、アニメーションでダークに覆われます。
code.9leap.net
Let's start learning HTML5 + JavaScript with code9leap and enchant.js! Learning programming with fun! Let's make your own game with HTML5! With powerful game engine "enchant.js", you can build up your game in 9 minutes! If you are new to HTML5, don't worry about that. Start up your project with modifying sample code. Integrated Develpment/Learning Environment on Web Code9leap includes "CodeMi
Javascriptで重複させずにランダムに文字列を出力する方法 ひどすぎ備忘録
まあこれやったところでリロードするから「ねくすて単語」には全く意味ないけど 一応調べたのでいつかの時のためのメモ。 <script language="javascript"> arr = [1,2,3]; arr.sort(function() { return Math.random() - 0.5;}); document.write(arr[0]+","+arr[1]+","+arr[2]); </script> arr.sort(function() { return Math.random() - 0.5;});てのが特殊で 本来sortてのは1.2.3とかに綺麗に並べるメソッドてやつなんだけどあえて乱数でランダムな値に変更する方法。 実際これで重複が避けられたかどうか確かめるには <script language="javascript"> arr = [1,2,3]; ar
スクロールするとサイドバーの広告が追いかけてくる風の作り方 : IT速報
こんにちは！このブログを作って2ヶ月が経ちました(^^) 少し間が空きましたが、サイト制作日記を書いてみます！ 今回は２ｃｈまとめサイトにありがちなスクロールするとサイドバーの広告が追いかけてくるようなものを作ってみました。 まとめ記事じゃなくて申し訳ありません(>_<)たまーーーに。ほんとたまーーーーーに、こんなサイト制作日記たるものを書いちゃいます。ご容赦くださいm(__)m 何のことだ？って人は当ブログの右サイドバーを見てください。Amazonの広告が追いかけてくるはずです。 これ難しそうに見えて、めちゃくちゃ簡単に実装できるので是非ここでコードを盗っていってください(^^) jqueryを使う 簡単に実装するためにjqueryを使います！jqueryとはjavascriptライブラリです(^^) このjqueryを使うためには下準備が必要になります。 本家のhttp://jquer
文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」:phpspot開発日誌
文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」 2013年03月21日- SPOILER ALERT! 文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」。 $ ('spoiler, .spoiler').spoilerAlert()のように初期化するだけで、画像や文字をモザイク処理することが出来ます。 マウスオーバーでうっすらみえるように、クリックでモザイク解除みたいなことが可能です。 あとはどう使うか？というところですが、実装の際にJS側でやってしまえるというのは楽でいいですね。 関連エントリ アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 高機能なカラーピッカーを実現出来るjQueryプラグイン「Spectrum」 i
ブログテンプレートならHKDjavascriptだけでできるCustomRssReader（jqueryプラグインRSSリーダー）完成！
<head> <script type="text/javascript" src="jquery本体アップロード先URL"></script> <script type="text/javascript" src="プラグイン本体アップロード先URL" charset="utf-8"></script> <script type="text/javascript"> <!-- $(document).ready(function(){var rssList = new Array();var sortItem;var rssItemLimit;var displayItem = new Array();var titleLength;var descriptionLength;var dateFormat;var effectSpeed;var newmark = Array();var
| blog.ryow.net
jQuery.lazyloadという画像の遅延読み込みライブラリが一時期はやっていましたが、かつてのスクリプトでは最近のブラウザで正しく動いてくれないそうです。 古いブラウザでは、画像のsrc属性を指定した状態で、laz […]
スクロールで順に画像読み込みLazy Load Plugin for jQuery
Mon, Jan 1, 0001 Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader ut
PCはもちろん、iPhone、Androidにも対応しているスライドショーのライブラリ「PhotoSwipe」 - 強火で進め
1つのHTMLでPC、iPhone、Android、BlackBerryに対応するスライドショーを作成出来るライブラリ。 PhotoSwipe from Computerlovers on Vimeo. PhotoSwipe http://www.photoswipe.com/ 読み込むファイルは以下の3つ。 <script type="text/javascript" src="simple-inheritance.min.js"></script> <script type="text/javascript" src="code-photoswipe-1.0.9.min.js"></script> <link rel="stylesheet" type="text/css" href="photoswipe.css" /> HTMLの記述は以下。 <div id="Gallery">
jQueryでjsonデータを扱ってみる【入門編】
jQueryでjsonデータを扱ってみる【入門編】 javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。 似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。 そこで入門編と題して（入門編しかない!）改めて基礎から勉強していけたらと思います。 投稿日2010年07月25日 更新日2016年04月26日 とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。 「:（コロン）」で区切ったキーと値を一組として、２組目を「,（コンマ）」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェクトとして扱い
「TouchSwipe」スワイプイベント実装用のjQueryプラグイン｜(株)スーパーソフトウエア/東京オフィス
永友幸雄 2011年03月07日 HOME > テクノロジートレンド > 「TouchSwipe」スワイプイベント実装用のjQueryプラグイン TAG:jQuery, TouchSwipe スマートフォン用のサイトを作成時にスワイプ操作で画面遷移させたいなどいう時に役に立ちそうなjQueryプラグインのTouchSwipe。 とりあえず、使い方の紹介です。 使い方は至って簡単。 まず、http://labs.skinkers.com/touchSwipe/からTouchSwipeをダウンロードしてください。 次は実装です。 基本的な使い方は上記のような感じだと思います。他にも指定できるoptionがありますが、詳しいことは上記リンク先で確認してください。デモもありますし。 ただ、スワイプ操作でスワイプしている要素を取得しない仕様なので、画面遷移は少し頑張らないとできない気がし
PADILICIOUS: How to Add Finger-Swipe Support to Your Webpage
Add Finger-Swipe Support to Webpages One of the more interesting and fun aspects of iPad usage is the ability to effect change in a webpage by swiping a finger across the screen of the iPad. For example, swiping to the left to navigate to the next page in a series of pages, or swiping to display the next image in a series of images. For iPad users, these actions are intuitive and natural. However,
JQTouchを使ってみた。 - ochi0218の日記
以前jqueryMobileを使ってみたので、今度はJQTouchを使ってみた。 印象としては、JQTouchは拡張性があって、こちらの方が使いやすそう。 UIはjqueryMobileの方が強そうだけど。 使ってみたExtensionは以下。 jqt.autotitles.js リンク名をそのままタイトルに自動挿入してくれるもの。 jqt.floaty.js フロートウィンドウを表示するもの。 jqt.location.js GPS情報を取得するもの。 jqt.offline.js オフラインでWEBページを表示するもの。 html5から使用できるローカルストレージにキャッシュするユーティリティ。 TouchScroll for JQTouch タッチでスクロールできるようにするもの。 jqt.scroll.jsというのもあるけど、こちらの方が使えそう。 ただ、スクロールしたい要素を追加
Webページにスワイプインタフェースを追加するスクリプト
指をスライドさせてページ送りをしたりするスワイプという操作ですが、自分のWebサイトにもコレを使うと簡単に導入できそうです。 <div id="swipeBox" ontouchstart="touchStart(event,'swipeBox');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);"> ↑こんな感じね。（うーん、見慣れないイベントだｗ） で、動作デモがこちら(iPadで見てね)＞ Swipe Example なんで、こんなモヤモヤっとした表現かというと、iPadが無いんです。試せないんです。デモサイトは当然Chromeちゃんでは動きませんでした。Android端末からなら動くのかな？iPad頂戴。 というわけで、詳しい解説は、↓
「enchant.js」でゲームを作ろう！ HTML5とJavaScriptによるアクションゲーム制作入門
「enchant.js」でゲームを作ろう！ HTML5とJavaScriptによるアクションゲーム制作入門 ライター：Veki HTML5でゲームが作れるライブラリ「enchant.js」がユビキタスエンターテインメントから発表されました。Webブラウザだけでスプライトを使ったゲームが動くとのことで興味を持った人も多いのではないかと思います。ここではenchant.jsを使ったゲーム作りについて見ていきたいと思います。 enchant.jsがサポートしているHTML5は，長らく使われていたHTML4に代わる次世代Webシステムの要となるものです。HTML5ではWebページの動的な要素，とくにグラフィックスの描画機能などが大幅に強化されており，これまでFlashを使わないとできなかったようなことが，HTMLとJavaScriptだけでできるというのが最大の特徴となっています。 ここにきてIn
iPhone Webアプリテンプレート（CSS Nite Vol.40 reprise） | Topics | DB - KAYAC Designer's Blog（カヤック デザイナーブログ）
こんにちは。意匠部ME課のtacamyです。 CSS Nite 4周年記念イベント（Vol.40 reprise）にてご紹介した iPhone Webアプリのテンプレートセットを配布します。 イベントの内容はこちらのエントリーをご覧ください。 ダウンロード iphone-tmpl.zip セット内容 index.html HTML5+iPhone用HTML css/iphone.css HTMLの新要素＋iPhone専用CSS js/iphone.js URL&検索バーを消す指定 js/lib/jquery.js jquery apple-touch-icon.png Webクリップアイコン cache.manifest マニフェストファイル .htaccess < dd style="margin-bottom:0.5em;">.manifestのMIMEタイプ設定 viewportにつ
最近よく使っているコードセットのようなもの 第9回 パーソナルブログの作り方-Re:Creator’s Kansai （リクリ）
【2024年8月】レンタルサーバーおすすめ10社を徹底比較！ 人気ランキングも PR 最終更新日：2024年08月01日
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://labs.skinkers.com/touchSwipe/
jQT
