パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
今すぐ辞めて欲しい、「jQuery勉強してます」「Backbone.js勉強してます」
最近、といってもここ２年ぐらいからだけど、「jQueryの勉強してます」とか「Backbone.jsの勉強してます」とか、そういう人からのプログラミングの修得の相談とかを頂いたりする機会が多い。 それらの中で、非常に口をすっぱくして言っているんだけど、なかなか理解して頂けないのが、『「jQuery」や「Backbone.js」を使うな』という個人的なアドバイスだ。これは個人的には本当に守ってほしい、絶対に手を出してほしくない、Framework達である。 なぜかみんな「jQueryってイケてる技術だよね」「jQueryだったらこんなこともいとも簡単にできちゃうんだよね」みたいな印象を持っている。もちろん、それは間違いではない。jQueryは早い。ライブラリもたくさんある。コミュニティも活発だ。リッチなウェブサイトなんて昔は数人月かけて作ったものだが、いまはjQueryとプラグインなんて使え
すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
このJavaScriptフレームワークでHTML5は救われるかもしれない | readwrite.jp
HTML5はウェブ・ページをアプリのように動かし、そしてFlashに取って代わるはずだった。しかしパフォーマンスの問題で、アプリ開発者のHTML5導入は遅れてしまっている。 Famo.us社はこのギャップを埋めるためにスタートした小さな会社だ。同社は2Dと3Dの両方のエフェクトを高速表示するため、HTML5の遅延要素を本質的に回避する独自のフレームワークを開発した。このFamo.usによって、開発者はHTML5のパフォーマンスの問題に苦しむことなく、より短期間でクロスプラットフォームのアプリを開発することが可能となったのだ。 Famo.usの秘密はJavaScriptを利用していることだ。JavaScriptは極めて高速に動作し、既にあらゆるブラウザで広く使われている。Flashとは異なり、ブラウザ・プラグインをユーザーがダウンロードしたり、ブラウザメーカーがそれをサポートする必要もない。
作業効率化！Googleアプリを1000%活かせる「Google Apps Script」の始め方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
そして一日が終わった… 今日もアニメ見逃した… こんにちは、メディア事業部の王です( ́・_・ )、アニメの視聴時間を増やすために、常日頃から仕事の効率化を心がけております。今回は作業効率化の強い武器になる「Google Apps Script」を紹介したいと思います。 まずは初耳の方にQ&A形式でご説明します。 Q&A Q:「Google Apps Script」って？ A: Googleが提供している様々なサービス、例えば「Gmail」、「スプレッドシート」、「マップ」、「ドライブ」、「カレンダー」、「Analytics」、「Adsense」等のAPIをJavascriptで利用するクラウド型スクリプト（要は実行はクライアント側ではなく、サーバーにて行う）です。 Q:Google Apps Scriptで何ができるの？ A: Googleアプリを自分の好みや必要に応じて機能を自由に拡張
画像スライドショーでjQueryプラグインの基本を学ぶ
画像スライドショーでjQueryプラグインの基本を学ぶ：jQuery×HTML5×CSS3を真面目に勉強（2）（1/4 ページ） はじめに この連載で取り扱っているjQueryはJavaScriptのライブラリエンジンです。 世の中には実にさまざまなプログラミング言語があります。昨今主流となっているものの大半は、オブジェクト指向プログラミング言語と呼ばれているものです。 代表的な例を挙げると、Java、C#、Ruby、Python、Objective-Cといったところでしょう。これらの言語はクラスベースというカテゴリに属しています。クラスベースはアプリケーションにおけるさまざまな機能をクラスと呼ばれる単位でキッチリと分割することで、プログラム全体をキレイに整理整頓できるという特徴を持っています。大規模な開発になるほど、この特徴が威力を発揮するため、先に挙げたプログラミング言語が積極的に採用
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
特定の要素の中身をごっそり書き換える方法 - JavaScript TIPSふぁくとりー
《2017年6月8日 5:00 PM 公開/更新》 特定の要素の中身をごっそり書き換える方法 [装飾・内容変更] JavaScriptを使って特定のHTML要素の内容をごっそり丸ごと違う内容に書き換えるには、innerHTMLプロパティの値を書き換えるだけです。とても簡単に要素の中身を丸ごと異なる内容に変化させられます。JavaScriptで生成した何らかのデータを動的にウェブ上に表示する際によく使います。 特定の要素の中身をごっそり丸ごと書き換える方法 特定の要素の中身を丸ごと全部書き換えるJavaScriptの書き方 特定の要素の中身を丸ごと全部書き換えるJavaScriptの例 特定の要素の中身をごっそり丸ごと書き換える方法 JavaScriptを使うと、特定のHTML要素の中身をごっそりまるごと動的に書き換えることができます。装飾を変更するレベルではなく、表示されている内容を何もか
[JavaScript]配列中の大量データを非同期でゆっくり処理する
先日、クロネコヤマトの伝票番号から配送状況を取得するAPIを作りました。 このAPIですが、負荷軽減のため、呼び出し頻度が毎秒1回という制限を設けています。 制限があるのは良いとして、このAPIを使って複数(大量)のデータをJavaScriptで処理したい場合どうやって作ったらよいのだろうか？ と思い、色々試行錯誤した事の過程と結果です。 長文になってしまったので、最初に目次を書いておきます。 その1:ループで処理する その2:ループ内でスリープさせる その3:setTimeout()で非同期処理させる その4:非同期処理の関数に汎用性を持たせる ところで、「毎秒1回」という呼び出し制限がない場合は? その5:画面が固まることなく,大量データを素早く処理する まとめ 結論だけ欲しい人は、最後の”まとめ”にある関数だけコピーすればOKです。 その1:ループで処理する 普通に考えると、当然fo
![[JavaScript]配列中の大量データを非同期でゆっくり処理する](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
連載: IBM Watson Workspace #鬼わか アプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか 解説（前編）
IBM Related Japanese technical documents - Code Patterns, Learning Path, Tutorials, etc. Please open new issue/pull requests in either English or Japanese if you would have any feedback or you would like to contribute this repo. We provide mainly "Japanese contents" by markdown text. IBM Developerの最新情報は https://developer.ibm.com/ にアクセスし、英語のコンテンツを参照してください。 このリポジトリは、IBM Developer Japan Webサイトで公開していた
ソースがシンプルなJSによるロールオーバー｜CSS HappyLife
Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です） さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意 何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")
console.logで変数の中身をconsoleに出力 - JavaScriptist
JavaScriptでは、alert関数で次のようにして変数などの中身を表示することが出来ます。 alert関数を使う bookmark サンプルコード bookmark <script type="text/javascript"> <!-- alert("Hello world"); //--> </script> alertの出力例 bookmark console.logを使ってみる bookmark JavaScriptで次のように、コーディングします。 サンプルコード bookmark <script type="text/javascript"> <!-- console.log("Hello world"); //--> </script>すると、FirefoxのJavaScriptコンソールに「Hello world」が表示されます。 このように、値の中身がどうなっている
jQuery – チェックボックスがチェックされたらスタイルを変更する | 1：n – DETELU Blog
なんか久々にjQueryを触りました…。 セレクタ（属性フィルタ）に変数の値を利用する場合の記述を試したんですが、1.3.1はセレクタまわりが変更になっているからなのか、IE6,7、FirefoxでOKだったのですが、safariが動作せず。 で、ちょこっと調べてみると jQuery 1.3系からはsafari2は対応してないと。そういうことですか…。 jQuery: » jQuery 1.3.1 Released ブラウザーのシュアの問題で対応をはずしてるみたいですね。しかし下記ページを見てsafari3.xが6%近いシェアがあるってのでびっくり。safariってそんなにも使ってる人いるんですかね？ Browser market share まあ一応safari2.xもOKなように1.2.6を使っておきました。 作ったものはというと、チェックボックスにチェックをした時に文字のスタイルを変
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
[JS]複数のエレメントをターンテーブルのようにぐるぐる回すスクリプト -Roundabout
デモ：Around Other Things 回転の中心に他のエレメントを置いたデモ。 Roundaboutの使い方 Roundabouの実装方法を簡単に紹介します。 詳しい実装方法については「Learn」をご覧ください。 Roundabout -Learn HTML ぐるぐる回転させる各エレメントをリスト要素で実装します。 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="jquery.js"></script> <script src="jquery.roundabout.js"></script> JavaScript jQueryのセレクタで指定し、Roundaboutを実行します。 <script>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
