particles.jsを使って簡単に幾何学的なアニメーションを作る | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして！ 8月にLIGに入社しましたフロントエンドエンジニアのゆたろです。 今後ともよろしくお願いします。 さてさて、今回は簡単に幾何学模様のアニメーションが作れるparticles.jsについて紹介したいと思います。 particles.jsを使ってみよう まず下記よりプラグインをダウンロードしてください。 ダウンロードしたzipファイルを解凍して、中からparticles.jsまたはparticles.min.jsを取り出します。 http://vincentgarreau.com/particles.js/ 次に下記のソースをコピペして、別ファイルのJSとして保存してください。 （当記事ではsetting.jsとします。） particlesJS('hoge',{ "particles":{ //--シェイプの設定---------- "number":{ "value":80
雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造
雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造します。 Versionは1.7.4です。（だと思います＾＾；） デモサイト http://loktar00.github.io/JQuery-Snowfall/ 通常の設置$('#section').snowfall({ image :"images/flake.png", minSize:10, maxSize:32 }); snowfall.jquery.js 140行目 flakeMarkup.src = options.image; この部分を flakeMarkup.src = options.image[random(0,options.image.length-1)]; に変更 改造後if(options.image){ fakeMarkup = document.createEl
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
参考にしたい！アニメーションの動きが気持ちいいスクリプト | Swwwim
最近のWebサイトでは、様々なアニメーションを付けることが当たり前になってきました。リンクやボタンのホバー時、ページの遷移、スクロールなどに使われていることが多いですね。 制作しているWebサイトにアニメーションを取り入れたい時に、是非参考にしたいスクリプトをご紹介します。 メニュー mmenu DEMO SOURCE Facebookなどのスマートフォンのアプリによく使わている横からスライドしてくるメニュー。最近ではPCサイトでも使われているのをよく見かけます。 Off-Canvas Menu Effects DEMO SOURCE Off-Canvasを利用したメニューエフェクト。綺麗な曲線をなどアニメーションがとっても綺麗なスクリプトです。 スクロール JQUERY FULL CONTENT DEMO SOURCE 縦、横にコンテンツをスクロールできるようになります。 MIDNIGH
スマホのスワイプ検知 - Qiita
スマホの横スワイプをjQueryを使って検知する ネットで拾ったコードをベースに自分用に書き直したものを公開できる形に変更してます。 mainというidを持つ要素に対して横スワイプを行うとアラートが出るものです。 $(function() { $('#main').on('touchstart', onTouchStart); //指が触れたか検知 $('#main').on('touchmove', onTouchMove); //指が動いたか検知 $('#main').on('touchend', onTouchEnd); //指が離れたか検知 var direction, position; //スワイプ開始時の横方向の座標を格納 function onTouchStart(event) { position = getPosition(event); direction = '';
jQueryでフォーム入力をチェックする ｜ Tips Note by TAM
正規表現（jquery）を利用した入力チェックを紹介します。 正規表現は、文字が一致しているのか、していないかを判定する機能です。 応用としてフォームで入力された文字が条件と一致、不一致をチェックし、 ユーザーに正しい入力を促す方法です。 if文（条件文）を主に使っていきます。 if文についてはこちらを参考にしてください。 【Javascriptの条件文】 http://www.rsch.tuis.ac.jp/~mizutani/online/javascript/condition.html 今回、紹介する例は、チェックするタイミングを入力後に設定します（フォーカスを外したとき）。 $("input[name='hoge']").blur(function(){ if(条件){ //実行内容 } }); 【入力が空の場合】 $("input[name='hoge']").blur(fun
動的に生成したDOM要素に対してjQueryでイベントを設定する場合 - Qiita
参考： jQueryで動的に生成される要素に対するイベントの設定方法 | klog .on() | jQuery 1.9 日本語リファレンス | js STUDIO よく忘れるので備忘録。 jQueryで動的にDOMを生成すると、その要素に対してイベントを生成するには通常の方法ではイベントが効かなくなる。 例：（一部参考サイトより抜粋） <div id="1">1つめの要素</div> <script type="text/javascript"> $("#1").click(function(){ $("#1").after("<div id=\"2\">２つ目の要素追加</div>"); }); $("#1").click(function(){ alert("1つ目の要素クリック"); }); $("#2").click(function(){ alert("2つ目の要素クリック")
JavaScriptで日付や時間の0詰めを実装する | tagamidaiki.com
PHPで0詰めをしようとした場合、printfで制御してやれば簡単に出来たのですが、JavaScriptの場合だとどうしても0詰めがうまく出来ない。 普通にやっちゃうと桁が合わずにカッコ悪い感じになってしまいます。 2012/8/6 14:4 2012/11/13 8:14 2012/1/3 8:9 8月6日20:18 追記 @inaba_n 様にアドバイスをいただいたので追記します。 以下のように書くと更に高速になります。 <script> var date = new Date(); var dd = ("0"+date.getDate()).slice(-2); // 08 </script> 上記の書き方だと、最初に紹介した書き方より高速に動きます。 無理やり型変換をしている部分がない分それだけ速く動きますね。 情報提供ありがとうございます！ —–以上追記—– 調べた結果、ここのブ
jQueryで現在日時を表示する – Webデザインラボ
【設置方法】 GoogleライブラリAPI からjQueryを <head> 内に読み込みます。今回のスクリプトを外部ファイルにする場合は、任意の名前で外部ファイルを作って、そこに日時のスクリプトを書いて保存します。あとはその外部jsファイルを読み込ませます。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="任意の名前.js"></script>//外部ファイルにした場合 サンプルデモ 1. 現在時刻を表示する サンプルデモ HTML <p class=" demo1 "></p> JavaScript $( function (){ var now = new Date() ; var y = now.getFullYear() ; var m
javascriptで今日から何日後の日付と曜日を簡単に取れる方法_技術三昧ブログ_zanmai.net
開発中でよくある作業だと思います。ここでメモします。 例としては、本日(2013年07月08日)から99日後の日付と曜日を計算する。 下記のjavascriptコードが算出できます。 var wNames = ['日', '月', '火', '水', '木', '金', '土']; var nowDate = new Date(); //本日から i 日後のDate var i=99; // 例 var futureDate = new Date(nowDate.getTime() + i*24*60*60*1000); var txt = "" + futureDate.getFullYear() + "年" + (futureDate.getMonth()+1) + "月" + futureDate.getDate() + "日(" + wNames[futureDate.getDay
select要素内に年月日などの数字を自動生成する
Result jQuery//現在の年数オブジェクトを4桁で生成 var time = new Date(); var year = time.getFullYear(); //1900年まで表示 for (var i = year; i >= 1900; i--) { $('#year').append('<option value="' + i + '">' + i + '</option>'); } //1～12の数字を生成 for (var i = 1; i <= 12; i++) { $('#month').append('<option value="' + i + '">' + i + '</option>'); } //1～31の数字を生成 for (var i = 1; i <= 31; i++) { $('#day').append('<option value="'
ScrollMagic
ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you want to ... animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control). pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky ele
jQueryでラジオボタンの選択状態を取得する：val()
今回は、jQueryでラジオボタンの状態を取得する方法を説明します。 ラジオボタンのON/OFFで表示を切り替えたり、フォームのどのラジオボタンが選択されているかをAjaxなどで送信するなど様々な場面で使われます。 ラジオボタンのチェック状態を取得する.val() val()は、指定した要素のvalue属性を返すメソッドです。また、val("値")とすることでvalue属性を設定することもできます。 このval()メソッドを使ってラジオボタンの選択状態を取得します。 以下のような、4つのラジオボタンがあるとします。 HTML <ul> <li><input type="radio" name="radio01" value="1">選択肢1</li> <li><input type="radio" name="radio01" value="2">選択肢2</li> <li><input
【Webサイト制作】独学素人がjQueryで、ドラクエ画面を作ってみた
こんなサイトを作ってみました オッス、オラ日曜ネット大工。 １年に１回くらい趣味でwebサイトを作ったりする独学素人ノンプログラマーです。 仕事はＩＴ系にかすりもしないけど、たまにサイトが作りたくなるんです。 htmlもCSSも知識不足ですが、作成ソフトに頼ればなんとかなります。 そんなレベルで無謀にも「JavaScriptも使いたいな」とか思ったりするわけですよ。 で、たまに「簡単にわかるJavaScript入門」なんてサイトや記事がありますよね。 ああいうのを書いてくださる人に、ちょっと言いたい。 あの、独学素人ノンプログラマーの俺をなめてませんか？ あなた方の想像を絶するほどに、俺のＩＴ系理解能力はゴミクズですよ！ 「簡単に分かる入門」にさえ入門できません助けて先生！ と、鼻水をたらしながら泣き出すような底辺レベルのスキルしかないザコであります自分は。 ですが、jQueryと出会い、
Ajax クロスドメイン with jQuery - satosystemsの日記
jQuery で Ajax を行うのにあたり、同一ドメインにアクセスする際には問題ないけど、違うドメインにアクセスしようとする場合、何らかの対応が必要になります。 対応方法が３つあるので、簡単にまとめておきます。 ベース実装 まず、今回のエントリのベース実装はこんな感じです。 <html> <head> <script src="jquery-2.0.3.min.js"></script> <script> $.ajax({ url: 'http://www.ekidata.jp/api/l/11302.json', type: "GET", success: function(res) { console.log(res); } }); </script> </head> <body> </body> </html> これをローカルに任意の名前で保存し（jQuery のダウンロードも忘れ
jQueryでAjaxするときに知っておきたい、JSONとJSONPの違い
jQueryだけで他のサーバーのコンテンツを読み込もうとすると、クロスドメインの制限がついて回ります。なぜJSONではなくJSONPを使わなければならないのか確認し、他の解決策も検討してみましょう。 ※本記事は2016年7月15日に掲載した記事の翻訳を一部更新したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 Webベースのアプリケーションを開発し、権限のないドメインからデータをロードしようとすると、おそらくブラウザーの画面に以下のようなメッセージが表示されているはずです。 XMLHttpRequest cannot load http://external-domain/service. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘h
担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる こんにちは、まろCです。 最近、僕が担当した JOYSOUNDのキャンペーンサイトで、いろいろな賞を受賞することができました。 CSSREEL Design Awards Asis CSS WINNER 今回は、このような演出を入れるサイトで僕がいつも使っているJavaScriptライブラリや、webツールを晒したいと思います。 アニメーションの基本的なフロー 基本的に、アニメーションはCSSにtransitionやanimationで記述しています。 javascriptで、ロードやスクロールをトリガーにして、その要素にaddClassやremoveClassしてアニメーションを発動しています。そのほうが軽いからです。 より複雑、かつ連動して動かしたい場合は、ライブラリを使用し
第18回 東京アートビートAPIを使ってさまざまなイベント情報を取得してみよう! - MdN Design Interactive
ゼロからのWebサービス制作も自由自在 WEB API PROGRAMMING! 第18回 東京アートビートAPIを使って、 さまざまなイベント情報を取得してみよう! 東京アートビートAPI 今回は、東京アートビートAPIを使って、東京で開催されているイベント情報を取得してみよう。東京アートビートAPIを使うと、東京アートビートが公開している東京で開催されているアート・デザイン展の開催情報を簡単に取得することができる。 制作・文＝中澤直也（サノウ株式会社） INDEX >>> STEP 1 東京アートビートとは >>> STEP 2 東京アートビートAPIの使い方 >>> STEP 3 イベントリストを取得してみよう >>> STEP 4 位置情報からイベント情報を取得してみよう >>> STEP 5 東京アートビートAPIの応用例 Profile 中澤直也●1977年生まれ、長野県出身。
アニメーション最強のVelocity.jsの使い方 - Qiita
はじめに 今話題のVelocity.jsについて初歩の初歩だけまとめました。 ※追記：↓対抗馬のanime.jsについて記事書きました※ アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ Velocity.jsとは jQueryのプラグイン。 $.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。 アニメーション技術補足 jQuery Animation 便利だが重い。コマ落ちし過ぎ。 CSS Transition, CSS Animation 軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。 結局、JavaScriptを頼らないと使い物にならないことが多い。 Transit.js 有名なアニメーションライブラリのひとつであるjQueryプラグイン。 CSS Animationを制御しているため、軽快。 そして、3d-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/20150529scrollfixed
