脱「JavaScript疲れ」のために注目すべき、3つの最新ライブラリー
ツールやライブラリーが乱立し、年々複雑化するJavaScriptの世界。それでも2017年に注目したい3つのライブラリーを紹介します。 JavaScript界にとってはクレイジーな年だった、2016年が終わりました（編注：本記事の原文は2017年1月2日に公開された）。この1年で数え切れないほどの印象的なライブラリーやフレームワークが登場しました。「You Might Not Need JavaScript」はJavaScriptを使わなくても実現できるコードを紹介してJavaScriptの使い方について疑問を投げかけ、Nolan LawsonがFronteersで発表したスライドに関するツイートが議論を呼び、Jeremy KeithやChristian Heilmannといった著名人からもレスポンスがありました。この様子はNolanの投稿にまとめられています。最初にクレイジーと書きました
あなたが知らないスゴいフロントエンド開発ツール7選
2016年も進化し続けたフロントエンド開発ツール。Web Tools Weeklyのキュレーター・Louisが1年を振り返り、お気に入りのツールを紹介します。 1年が過ぎ、Webプラットホームでは予想どおり革新、いらだち、疲れとともに、開発者を支援する新しいツールやテクノロジーの大量リリースが爆発的に勢いを増しています。 ReactやAngularといったおなじみのツールがアップデートされた一方、Vue.jsなどの新しいツールも登場し、あっという間に大きな関心を集めました。 私はツールに焦点を当てたウィークリーニュースレターのキュレーションをしているので、調査中に途方もない量のツールに出会います。もちろん人気のツールにはある程度注意を向けますが、あまり注目されていないツールで興味深くかつ実用的なものも評価しています。 そこで昨年と同様、この記事でフロントエンド技術者向けツール分野の2016
コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
作成：2016/02/8 更新：2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
背景にひと手間加えたい時に便利なスクリプト 10+ - NxWorld
ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景に画像や動画のスライドショーを実装できる「Vegas」 背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。 また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。
アイコンを探す手間がなくなる！30種類の有名どこ全9,769個のSVGアイコンを一元管理・一行で簡単に利用できる -We Love SVG
Flat Color 使い方は、簡単です。 Step 1: 外部ファイル 外部ファイルにjquery.jsを使用している場合は、下記の外部スクリプトを加えます。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js"></script> AngularJSバージョンも用意されています。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/angular-webicon.min.js"></script> Step 2: HTML あとは、使用するアイコンのコードを書くだけです。 アイコンをクリックするとコードが表示されるので、そ
jquery.fadeMover - Fadein and Fadeout for jQuery
jquery.fadeMoverはページの遷移時にフェードアウト、フェードイン効果をだすためのjQueryプラグインです。 Overview 指定された要素をフェードインしながら表示し、<a>タグをクリックしてページを移動する場合にフェードアウトしてから移動します。 <a href="#top">など、ページ内リンクの指定をしている<a>タグはフェードアウト動作禁止にしています。 [2012-08-28] 「nofadeOut」で複数classの指定がある場合動作するように修正しました。（hasClassでチェック）。あとファイルを直接ダウンロードするように修正しました。 [2012-02-16] 以前作成していたものに少し手を加え、要素を順番にフェードアウト、フェードインさせるオプション「inDelay」「outDelay」もつけました。フォトギャラリー等で少し変わった動きがほしい場
Page Scroll Effects | CodyHouse
Page Scroll Effects Section 2 Section 3 Section 4 Section 5 Download Animation: Hijacking:
LetterFX jQuery Plugin | TuxSudo Web Development
LetterFx jQuery Plugin A jQuery plugin to apply animated visual effects to text - letters, words & custom patterns. LetterFx works by temporarily injecting markup into the text of an $("element") and sequentially adding & removing transition-based CSS classes. Please use responsibly. demo: 1 2 3 4 5 6 7
今一番気になるCSSの美しいエフェクト！インクを水面に落としたように波紋が広がり消えていく -Ripple Click Effect
Googleが先日発表した新しいUX「Material Design」の中で特に注目されているのが、タップやクリックをするとインクを落としたように波紋が広がるエフェクト。 これを実装するテクニックを紹介します。 Material Designについては、前の記事（「波紋」のアニメーションを実装するテクニック）で動画を紹介しています。 この波紋のエフェクトはあちこちのコミュニティで盛んで、その中でもここで紹介するエフェクトはかなり美しく仕上がっています。 デモではリストで配置したナビゲーションの各アイテムをクリックすると、そのクリックした地点を中心に波紋が広がり、フェードで消えていきます。 ※上記はエフェクトが分かりやすいよう、各アイテムの高さを広げています。 実際の動作は、下記ページでお楽しみください。 Ripple Click Effect from Google Material De
指定した桁数ごとに自動で区切るスクリプト -Politespace | コリス
デモページ デモでは、さまざまな区切りができます。 3桁ずつ区切るなどの同数の区切り 料金など 4桁ずつ区切るなどの同数の区切り クレジットカードなど 3桁、4桁など異なる数の区切り 郵便番号など 指定数の区切りの後、残りはフリー 米の電話番号など 日本の電話番号のように最初の桁が2桁か4桁、というのは扱えないのがちょっと残念。 Politespaceの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="js/jquery.js"></script> <script src="js/politespace.js"></script> </head> Step 2: JavaScript jQueryのセレクタで適用を指定し、スクリプトを実行します。 <script> jQuery( func
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
固定ヘッダーを簡単に実装可能なJavaScript「On Scroll Header Effects」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 新オフィスに引っ越してから、いろいろな人のお手製ご飯が食べられて嬉しい今日この頃です。 今回は、セクションごとにスタイリッシュな切り替えができる固定ヘッダーを簡単に設置できるJavaScript「On Scroll Header Effects」を紹介します。 公式ページはこちら： https://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/ デモ まずは、下記リンクからデモをご覧ください。 https://211.125.65.24/demo/2013/10/effect/ ※現在はサービスを終了しています。 実装手順 使用するのは「jQquery」と「waypoints.js」の2つです。 まずはHTMLとCSSを用意します。 CSSの読み込み <link rel="styles
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
HTML、CSS、JS等のUIコンポーネントライブラリが検索できるUIBox！ | バンクーバーのうぇぶ屋
UI関連のアイデアや表現、もしくはコンポーネントライブラリをとにかく色々見てみたい時ってないですか？ ナビゲーションからフォーム、カラーピッカーやプルダウンメニュー等、UIの表現を考える時ちょっと探したいってシチュエーションは結構あると思います！僕であれば、レスポンシブ対応のナビゲーションなんかは結構どういう形が理想か、まだまだ暗中模索状態って感じですので、色んなサイトを参考にしたい所です！ そんなこと考えている時に直ぐ検索してみることが出来るサイトが今日ご紹介させて頂くUIBoxです！ UIの参考となるヒントがもしかしたら見つかるかもしれませんので、是非一度除いてみてください〜！ UIBox – Curated HTML, CSS, JS UI Component Library 検索フォームからのUI検索が可能ですねー。 例えばナビゲーションに関するUIのコンポーネントが見たかったら、
Sticky-Kit | jQuery plugin for sticky elements
Reference To install include jquery.sticky-kit.js after including jQuery. Usage: $("#sticky_item").stick_in_parent(); // or $("#sticky_item").stick_in_parent(options); You can pass a hash of options to configure how Sticky Kit works. The following options are accepted, each one is optional: parent — The element will be the parent of the sticky item. The dimensions of the parent control when the st
Box Lid Menu by jimjh
Box Lid Menu inspired by Toybox. View the Project on GitHub jimjh/box-lid Download ZIP File Download TAR Ball View On GitHub Built by Jim Lim. Follow @jim_jh Overview This jQuery plugin creates the box lid effect for navigation menus, and is inspired by Toybox. You can see it in action by hovering your mouse over the menu bar on the left. A bare bones example is also available on github. Finally,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexboxのjustify-contentで最後の行を左寄せにするScriptを書きました - Matarix.Shelter Matarix.Shelter
Raindrops.js