JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ GitHub wavifyは jQuery のプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVG コードを用意すれば OK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/
egjs is Javascript components group that brings easiest and fastest way to build a web application in your way.
PulltoRefresh.js A small, but powerful JavaScript library crafted to power your webapp's pull to refresh feature. No markup needed, highly customizable and dependency-free! Download now!Demos(mobile-only) How to Install Download the script, include it in your webapp and initialize it: PullToRefresh.init({ mainElement: '#main', // above which element? onRefresh(done) { setTimeout(() => { done(); //
…またややこしいタイトルにしてしまった。 予め伝えておきますが、この記事は「JavaScript訳わかんねえんだよ何がvarだスクリプト言語ならもっと気軽に変数を使わせろスコープややこしいわファッキュー」みたいなものではありません。 JS（色んな意味で）を愛する人が書いています。 いやー、にしても、JavaScriptの変数の宣言って難しいですよねー。何がって？ インデントが、ですよ奥さん。 var というキーワードを先頭に置かなきゃならないという厄介な規則のせいで、綺麗なインデントにするのに四苦八苦するわけですよ。var による明示的な変数の宣言によって、JavaScriptのクロージャが真価を発揮するわけですが、それにしても邪魔くさい…。 まあ普通はコーディングスタイルをきちんと決めるべきなんですけど、個人でちゃちゃっと小さいプログラムを組むときにこの変数宣言のインデントで結構悩んだり
不親切なメモです。 Typingsのinstallでエラー このテンプレコマンドを使うと typings install jquery --save --ambient こんなエラーが出る： The "ambient" flag is deprecated. Please use "global" instead コマンドを変更： typings install dt~jquery --save --global ambientをglobalにしてモジュールの頭にdt~をつける。 私のMacだとこれじゃないとだめだった： sudo $(npm bin)/typings install dt~jquery --save --global Gulpでwebpackのwatchかけてたらエラーで怒られた件 (node) warning: possible EventEmitter memory
指定した要素をスクロールに応じて、さまざまな方向に異なるタイミングでアニメーションさせることができるjQueryのプラグインを紹介します。 Parallaxor -GitHub Parallaxorのデモ Parallaxorの使い方 Parallaxorのデモ デモはChrome, Firefox, Safariでご覧ください。 IEやスマフォではスタティックに表示されます。 demo: second Parallaxorの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="parallaxor.min.css" rel="stylesheet"> </head> <body> ... コンテンツ ... <script src="http://code.jquery.com
![[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ad9c25b0c0873c683d7dbe655b590582276e72f/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015011904.png)
Introduction snabbt.js is a minimalistic javascript animation library. It focuses on moving things around. It will translate, rotate, scale, skew and resize your elements. By including matrix multiplication operations, transforms can be combined in any way you want. The end result is then set via CSS3 transform matrices. snabbt.js is built to be fast. It will only animate things that modern browse
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 ~~- var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 this === window だと思うこと~~ 今回
hello.js - Javascript API for OAuth2 authentication and REST services JavaScriptベースのOAuth認証ライブラリ「hello.js」。 JSベースでログイン、ログアウトが可能で、ユーザ情報なんかも簡単に引っ張ってこれるようです。 関連エントリ PHPでOAuthサーバを作成するチュートリアル Twitter OAuth認証をポップアップで行うjQueryプラグイン PHPフレームワークにTwitter,Facebook等の認証を速攻実装できる「Opauth」 MicrosoftのLive OAuthで認証するPHPサンプル
こんにちは。 久々の更新になってしまいました。 今回はJavaScriptについてです。 先日とある人から「ボタンを押した数をカウントしてテキストファイルに保存したい」という要望がありました。 要望だけ見ればものすごく簡単です。 ただ、今回はWebサーバ環境はないのでローカルだけで処理したい（PHP等が使えない）ということだったため、JavaScriptで実現しようと思いました。 しかしJavaScriptは基本的にはローカルファイルを扱えません。 そこで色々と調べた結果、HTML5のFile APIというのを使うと実現出来るようなのでやってみました。 一応実現出来たため、メモとして残しておきます。 以下ソースコードです。 <!DOCTYPE html> <html> <head> <script src="jquery-1.7.1.min.js"></script> <script ty
概要 ES2015を象徴する機能である、アロー関数構文の実装がついにV8で始まった。 無名関数を短く書ける [3.28.31] アロー関数は無名関数の省略記法である。 今までこう書いていたのが、 var fn = function (a, b) { } こうスッキリ書ける。 var fn = (a, b) => { } 「=>」が矢のように見えることから「アロー」関数と言う。 更に短くできる これが、 [1, 2, 3].map( function (v) { return v * v } ) // [1, 4, 9] アロー関数だとこうなるが、 [1, 2, 3].map( (v) => { return v * v } ) // [1, 4, 9] 引数が一つの時には「()」を省略できるので、こう書ける。 [1, 2, 3].map( v => { return v * v } )
前回、Rubyを楽しく学ぶコンテンツのエントリで紹介したRuby Warriorが楽しいという声を幾つか見かけました。 オンラインでコーディングできるサービスは色々ありますが、デザインや音楽、ゲーム性が優れていて熱中しやすいのでしょう。 残念ながら私は参加できませんでしたが、今月のGinza.rbもRuby Warriorをみんなでやってみるという催しで盛り上がったようです。 RubyWarriorのBGMが中毒性高い。しばらく口ずさんでしまいそう。#ginzarb— Masatoshi Iwasaki (@masa_iwasaki) April 15, 2014 RubyWarriorに集中していてだれもツイートしてない^^; #ginzarb— 高橋 明 (@Talos208) April 15, 2014 今回は同様にゲーム感覚でJavaScriptを学習でき、日本語化もされているC
ほんとに10個だと思った？（無意味に煽っていくスタイル） 最近JSだけのリポジトリで無益なゲームを大量に作っては破棄しているのだけど、割とストレスなく出来上がってきたので書く。 長々と書くが、要は次のリポジトリに概要が詰まってる。 mizchi/mizchi_client_boilerplate · GitHub https://github.com/mizchi/mizchi_client_boilerplate 前提として、最近はCSJSでもnodeのインストールを前提とする環境が多い。必須といってもいい。 grunt gruntjs/grunt · GitHub https://github.com/gruntjs/grunt ビルドタスクを簡単に作れる。make、rake、などに相当するが、node製らしくファイルシステムの監視でアクションを作れるのが特長。$ grunt serv
おっと、これは便利かも。 REGEXPERを使えば、JavaScriptの正規表現をわかりやすく表現してくれる。 一見、難解な正規表現だが、これを通しても見ると「なるほど、この文字とこの文字にはされまれていて、この間は何の文字でも良いのだな」といったことがわかるようになる。 他の人のコードを読んでいて「？」となったときに試してみてもいいかもですな。
開発者泣かせの問題児ブラウザ、Internet Explorerですが、IE5.5、IE6、IE7、IE8をモダンブラウザの挙動にする神JSがGoogle Codeで配布されていました。 とりま、 attripのデザイン崩れはこれで解決できました！ 使い方は簡単！下記のコードを貼り付ければOK！ まじ仏。 「IE9.js」は、IEを普通のモダンブラウザの挙動にするJSです。IE5、IE6でも透過PNGが使えるようになります。 「css3-mediaqueries.js」は、IEでCSS3 Media Queriesを使えるようにするJS。レスポンシブデザインのサイトをIEでも見れるようにします。 ちなみに、border-radiusや、box-shadow はできませんでした。 あと、IEでの見え方をチェックする方法はこちら↓↓ IE9環境でIE6/IE7/IE8/IE9表示する方法(共存
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![[JavaScript] ループ途中で抜ける処理は for(in break) ではなく some を使おう♪ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a4df95ab217bebad01bd3299dc46a469ed52be3f/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzc1NiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTQ3MzY4MDcwOD9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmYmc9RkZGRkZGJmZtPXBuZzMyJnM9MDFkOGFhOTE2MTQ3OGI4M2QxYzRlNjU4YjM2MTZiZDc%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Da9a8fa870a5ede15ce6ffc25b7485b6e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFMyU4MyVBQiVFMyU4MyVCQyVFMyU4MyU5NyVFOSU4MCU5NCVFNCVCOCVBRCVFMyU4MSVBNyVFNiU4QSU5QyVFMyU4MSU5MSVFMyU4MiU4QiVFNSU4NyVBNiVFNyU5MCU4NiVFMyU4MSVBRiUyMGZvciUyOGluJTIwYnJlYWslMjklMjAlRTMlODElQTclRTMlODElQUYlRTMlODElQUElRTMlODElOEYlMjBzb21lJTIwJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJThBJUUzJTgxJTg2JUUyJTk5JUFBJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NWFkZWYyYWJiNzI0N2NhODkwN2Y0MzJjYzYxZDAwN2Y%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBwaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1mNzA5ZDQyYTc3OGRkNzYxZDRkNmY1YjBiZDVhNWZmNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D2aee0e78caf09e312cc2f35ac8756e6f)
