最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。
javascript-best-2016-may.html
最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。
最先端ウェブデザインを体感する！アニメーションが美しいUIデザインまとめ
ブラウザやウェブサイト体験が進化したことで、さまざまなアニメーションを実装したウェブサイトや、モバイルアプリへの注目が集まっています。今回は「気持ちの良い動き」がポイントとなった、最新UIデザインをまとめてご紹介します。 余白スペースをたっぷり利用したミニマルなレイアウトから、アニメーションを加えることでよりユーザーの注目を集めるナビメニューや、ユーザーインターフェースを中心に揃えています。なかなか言葉で説明しにくい遷移フローが分かりやすく説明できるので、うまくクライアントの要望に応えることができるかもしれません。 詳細は以下から。 最先端ウェブデザインを体感する！アニメーションが美しいUIデザインまとめ Cima is Live 筆ブラシでペイントしたようなエフェクトを、各ページやコンテンツに活かした、さわやかな配色も素敵なウェブサイト用UIデザイン。 Birds of Paradise
[JS]縦長ページやスマホページに便利な機能や面白い仕掛けを実装する最近のチェックしておきたいスクリプトのまとめ
縦長のランディングページ、レスポンシブなスマホ対応ページなどに便利な機能や面白い仕掛け、気持ちいいインタラクションやエフェクトなどのアニメーションを実装できるスクリプトやjQueryのプラグインを紹介します。 Popper.js Popper.js -GitHub ポッパーはツールチップとポップオーバーを組み合わせたスクリプトで、今までのツールチップとは一味も二味も異なります。指定したエレメントに表示させるだけでなく、スクロールするコンテナ、ドラッグで移動可能な要素、ビューポートのよる方向の制御など、縦長ページ・スマホ時代のツールチップです。
![[JS]縦長ページやスマホページに便利な機能や面白い仕掛けを実装する最近のチェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/63a1314d511ba3f16af07815026a8e0a870e8098/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016041101.jpg)
CSSとHTML Canvasで作るモーショングラフィック - ICS MEDIA
ICS MEDIAのトップページに掲載しているモーショングラフィック。これはCSSとHTML Canvas要素を使って作成したものです。時間経過とともに波の形状と色彩が変化し、多彩な表現を楽しめるようになっています。 本記事ではCSSとHTML Canvasの理解につながることを目標に、このモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル ステップ1. CSSでグラデーション背景の作成 サンプルを別ウインドウで開く ソースコードを確認する はじめに、時間経過で色彩が変化するグラフィックを作成しましょう。CSSで縦に長いグラデーションの背景を用意し、CSSアニメーションを使って縦方向に移動させることでグラデーションが変化する表現ができます（ステップ1のソースコード)。 #b
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
![[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/12d806b696946054b69c1dc3670ffa2dc1985773/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112505.png)
豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」 – bl6.jp
Pogo Sliderは豊富なスライドアニメーションが揃っているjQueryプラグインです。スライドダウン、スライドアップ、スピン、3Dフリップ、回転などスライダーに関するたくさんの種類のアニメーションが用意されています。 以下のページからPogo Sliderの実際のデモを確認することができます。 デモ デモではスライド、ブロック、スプリット、zip、expand、fold、フェードなど数多くのスライドトランジション動作を確認することができます。他にもスライドダウン、スライドアップなどのエレメントトランジションもチェックできます。 オプションで設定できる項目もかなりあるので、カスタマイズしたスライダーを実装したい�方にはピッタリですね。 自動再生やレスポンシブのオン／オフなどを指定することができます。 使い方はこんな感じでマークアップしていきます。 <div class="pogoSli
[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
![[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/d408ea9798d5866f690b92bcfb70e29e4a50a739/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051309.png)
CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能
前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導入した。今回はスムーズにスクロールさせようかと色々考えていたが、やはりJavaScriptでscrollTo()を制御するのはコストが高い。CSSならどうだと試行錯誤したところ、どうやらbody要素への負のマージンをCSS Transitionで滑らかに変化させれば良いようだ。 Demo: Scroll Smoothly with CSS Transition デモのページにはダミーテキストの各セクションの最後にそれぞれ⇑ Back to Topというリンクがある。それをクリックすると1秒かけてスムーズにスクロールしながらトップに戻る。トリガーとスクロール自体はJavaScriptで行っているが、スクロールのアニメーション自体はCSS Transitionで行っている。具体的には以下のような処理
CSSで14種のローディングアニメーションが実現できる「waitMe」:phpspot開発日誌
waitMe CSSで14種のローディングアニメーションが実現できる「waitMe」。 次のようにフォーム送信時等にアニメーションを14種の中から選んで実装可能 呼び出しコードは以下のようにカスタマイズ性があるけど簡単。サイズや色など、テキストが自由にかえられて、どんなサイトでも使えそう 関連エントリ 背景色をなめらかに変更できるjQueryプラグイン「Spectrum」 １つのテキストに複数のハイパーリンクを付与できるjQueryプラグイン「μllinx」 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 タイル上にエレメントを並べられるjQueryプラグイン「jMosaic」 ファイルアップ用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」 楽譜をWEB上で打ち込めるUI実装jQueryプラグイン「jsNoteEditor」
UIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアル
ボタンやパネル、レイアウトなど、最近はWebのユーザインターフェイスでさまざまなアニメーションが利用されています。WebページのUIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアルを紹介します。 アニメーションを魅力的に動かすテクニックを段階的に解説しているので、それぞれの効果がよく分かります。 Giving Animations Life 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Step 1: まずはシンプルに動かしてみよう Step 2: バウンドを加える Step 3: バウンドを自然な動きにする Step 4: ディズニー®の12の基本原則を取り入れる Step 5: アニメーションを誇張する Step 6: アニメーションに命を吹き込む キーフレームを簡単に設定できるスクリプト St
[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js
スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。 さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ！ Demo 2: Out of Space Space.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="[jquery]"></script> </head> <body> ... コンテンツ ... <script type="text/javascript" src="space.min.js"></script> </body> Step 2: エフェクトの設定 まずは、コアとなるフレームを作成します。この中に
![[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/24728443d0a7001537016b0816df756534c67040/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040301.png)
アニメーションを高速化する「Velocity.js」を使ってみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 今更ですが、jQueryのプラグインでアニメーションを高速化してくれる「Velocity.js」を使ってみました。 今回は、簡単な使い方をまとめたのでご紹介したいと思います。 まずは準備から http://julian.com/research/velocity/ 上記の公式ページにjQueryやtransitとのアニメーションの比較をできるデモがありますが、他よりかなり軽快に動くようです。モバイル対応もいい感じらしいですよ。 使うときは、ソースをとってくるか、用意されているCDNなどからVelocity.jsを読み込みます。 <!-- 今回はjQueryも読み込む --> <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <!-- CDNから読み込んでみる --> <script s
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CSSのすぐに使える小技から驚きのスゴ技まで！CSSアニメーションの素晴らしいアイデアのまとめ | コリス
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://11neko.com/menu-style-inspiration/