[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
HTML5/JSでインスタントサーチ（入力中に検索結果表示） - Qiita
3. JS: インスタントサーチのスクリプト この節がいちばんの肝です。 まず、lists = document.querySelectorAll('.line-shell-main-users-li');で検索対象を取得します 次に、for文内でinnnerTextでタグ内の文字列を取得します 最後に、.hiddenクラスをトグルします searchUsersList = function(event){ var i, id, name, lists, input_text = $(this).val(); console.log(input_text); // listのdomを取得 lists = document.querySelectorAll('.line-shell-main-users-li'); for (i = 0; i < lists.length; i++){ id
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
スマホで水平垂直方向へのスワイプ、スライドが可能なjQueryプラグイン「jQuery slideToucher plugin」
twitter facebook hatena google pocket スマホで画像やコンテンツをスワイプさせて見せられると多くのコンテンツを遷移も少なくて良いかもしれません。 jQueryプラグインのslideToucherなら水平、垂直の両方向にスワイプさせられ便利です。 sponsors 使用方法 Yuripetusko/slideToucher ? GitHubからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="slideToucher.js"></script> <script type="text/javascript"> $("document").ready(function(){ $
スワイプ操作を実装できるjQueryプラグイン、TouchSwipeがイイ感じ | Studio Rubbish
あーあー今日もウェブつくるのかーめんどくせーなーつまんねーなースワイプしてえなー。フリックでもいいからー。 jQueryでできんのかなー。あ、できちゃった、これ上手くいった? ブヒヒwww ん、たてにスクロール出来なくなっちゃったね。そりゃあそうだそうだ。 やぱ他人が作ったの使った方がウマウマだなブヒヒ。 Boxer flickGal FlickSlide flipsnap.js iScroll jCarouse jQuery.flickSimpe jQuery.flickable jQuery.jcflick PhotoSwipe Swipebox Swipeshow TouchSlider Unslider 色々試しました。疲れました。 ほかにもこの辺を参考にしたブヒ。 スマートフォン向けスワイプ・フリック系ライブラリのまとめ 画像ギャラリー等、スマートフォン（iPhone /
Web制作者でもネイティブアプリが作れる！node-webkitを使ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニアののびすけです。最近周囲で結婚ラッシュがきており、漠然と焦っています。 さて、私は業務上Node.jsを触ることがあるのですが、今日はnode-webkitで少し違ったNode.jsの活用法をお伝えしていきたいと思います。 node-webkitとは 「node-webkit」はNode.jsとChromiumを利用してネイティブアプリを作ることができる、ランタイム/開発フレームワークです。 ダウンロードは下記よりおこなうことができます。 rogerwang/node-webkit – GitHub https://github.com/rogerwang/node-webkit HTML/CSS/JavaScriptでアプリを作ることができる HTML/CSS/JavaScriptと聞くと、Webブラウザ上で動作するWebアプリケーションをイメージしますが、node
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
[JS]jQueryのプラグイン33+1選 -2012年8・9月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 BigVideo.js MP4などの動画をウェブページの背景いっぱいに配置します。 Video Background サイズ変更可能
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
jQueryプラグインを探すときに便利なサイト
jQuery Clip - jQueryのプラグ... / jquer.in / jQueryスニペット - かちびと.net他...全6件
[JS]後発だけに高性能で、実装はシンプルで超軽量のツールチップのスクリプト -jQuery PowerTip
jQuery PowerTip jQuery PowerTip -GitHub jQuery PowerTipの特徴 jQuery PowerTipのデモ jQuery PowerTipの使い方 jQuery PowerTipの特徴 実装が簡単。 シンプルな構造。 ツールチップはカーソルに追従とスタティックに表示の2種類をサポート。 ツールチップの追従するエリアは設定可能。 カスタマイズも簡単。 キーボードナビゲーションにも対応。 表示のアニメーションは、スムーズなフェードインとフェードアウト。 ツールチップは複数設置可。 あらゆる要素にツールチップを表示可能。 ビヘイビアやイベントをもった複雑なコンテンツにも対応。 6KBと超軽量。 jQuery PowerTipのデモ デモは、ベーシックな3種類が用意されています。 Demo: 左のエリアをホバーすると東にツールチップを表示し、ツールチ
「サーバーサイドの知識の無さに全俺が泣いた」レベルの入社当時の人に読ませたら少しはアドバイスになったであろうPythonとDjangoの前提知識メモ - 憧れ駆動開発
あの頃は青かった。教えるどころか無知をさらけ出すというのはこの事だった。死ぬほど恥ずかしいので消したかったけれど、この記事が一番アクセスがあって長い間いくらか読まれていたらしい。ためらった。ただ、かつての自分といくらかの人に参考になればうれしいけれど、そろそろ役目を終えたと信じたい。もし書きなおすのなら、もう少し違う言い方か伝え方にすると思う。 内容としては 当時の自分のスペック Pythonの言語で、当時の自分が知った方法(3項演算子とか) mercurial の基礎(init, commit, push, update, log) WAF(Django)の知識 URL(ディスパッチャ)をトリガーにして Viewで処理をかく ModelにDBの内容がある ORMでリレーションを簡単に記述できる テンプレートでViewで処理した内容を表示させる チラ裏に移動させた。
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。
今更ですが、Google Feed APIを利用してRSSを取得・表示する方法と、そのタイトルをCSSで省略表示させる方法を学びましたのでメモメモ。 みんなだいすきGoogle Feed API サイト制作の際、トップページなどに外部ブログのRSSを表示させたいときってありますよね。 私は過去にバンドの公式サイトを制作していた時、メンバーのブログRSSを表示させてくれとよく頼まれたものです。 （その時は無料RSSサービスを使っていました・・・） そんなときに役立つのがGoogle先生による『Google Feed API』。 表示件数や表示させたい内容、それを囲むタグなどわりと自由にカスタマイズできるので多くのWEB屋さんに愛されているようです。 何かいい方法はないか呟いたところ、多くの方からこちらを薦めていただきましたヾ(*´∀｀*)ﾉ ちなみに、以前はAPIキーを取得する必要があったよ
Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め！ - Web学び
2012年 6月 13日 新しいサーバーでブログをリニューアルして気がついた、SNSボタンの有無でかなり読み込み速度に差がある。といっても2,3秒ほどですが、これは結構命取りだったりします。 まぁ私もそんなに詳しいわけではないので断言できませんが。 ・訪問者はその数秒でサイトから逃げる ・Googleはその数秒を評価基準に入れる たしか遅延ロード(Lazy Load)とかいう技術ですね。 わりとポピュラーなコードで何とかなったので書いときます。 ピュアなJavaScriptではなく、jQuery使いますね。 方法その１ 時限式読み込み body閉じタグの前あたりに書きます。 . . . <div id="snsbox"></div> <script type="text/javascript"> var snscode = 'ここに、SNSのコードを書く' + '一行でつなげても良いが見に
Ywcafe.net
Ywcafe.net This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Contact Lens song lyrics Migraine Pain Relief Healthy Weight Loss Work from Home Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy|Do Not Sell or Share My Personal Information
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RPGアツマール
TechCrunch | Startup and Technology News
http://www.hp-stylelink.com/news/2014/06/20140617.php
https://design-spice.com/2012/06/13/responsive-web-design-image/