Bootstrap 対応！グラデーションアニメをクラス名ひとつで簡単実装！Granim.js
ウェブサイトの制作中、目を惹くデザインのアクセントに悩むことはありませんか。最近、インタラクティブなグラデーションアニメのためのJSライブラリGranim.jsが公開され、注目を集めています。 今回は、このライブラリを使い、Bootstrapを使うような感覚で、クラス名をつけると背景にグラデーションアニメが実装できるようにしました。 デザインスパイスのひとつに、一度試してみてはいかがでしょう。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル 使い方はシンプルで、グラデーション用のクラス名をつけると、その要素の背景がグラデーションになります。 ロゴと短文を使ったカード型レイアウト。 See the Pen qaxExO by ya90net (@ya90net) on CodePen.
Bootstrap 対応！パワフルなアニメーションボタンを簡単実装しよう。Codrops Animocons
あらゆるサイトで利用されているボタンは、小さいですがユーザーが直接操作を行う重要なパーツ要素のひとつです。ボタンをデザインをするとき、見た目だけでなく押したときのエフェクトの作成に迷ってしまうという人も少なくないでしょう。 今回、Animocons というCodropsによるアニメーションボタンを使い、Bootstrapを使う感覚で、HTMLとクラス名を書くだけでアニメーションつきのボタンが簡単に実装できるようにしました。 注目が集まっているアニメーションを利用した、動きにアクセントのあるボタンデザインを作成してみてはいかがでしょう。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル 使い方は簡単で、クラスつきのHTMLを書くと、その要素がアニメーションボタンになります。 ※ アイコンに
Bootstrap 対応！マイクロインタラクションをクラス名だけで作ろう！ScrollReveal.js
2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。しかし、どうしてもJSやjQueryの技術が必要となってくるため、なかなか手を出せないというひとも多いかもしれません。 今回はスクロールに合わせて要素をアニメーションさせるプラグイン、ScrollReveal.jsを使い、Bootstrapを使うような感覚で、クラス名をつけるだけでアニメーションが実装できるようにしました。 マイクロインタラクションだけでなく、ド派手なアニメーションにも使えるので、JSやjQueryはまだというひともぜひ、トライしてみてください。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル スクロールに合わせて、アニメーション付きでコンテン
jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン | かたつむりくんのWWW
Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. jQueryAutoHeight.js とは jQueryAutoHeight.js とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。高さのそろえ方は、次の２通りです。 セレクタで指定したすべての要素を、その中の最大値にそろえる セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる（1行ごとにそろえられる） サンプル 複数のボックスの高さを最大値にそろえるjQueryプラグイン ダウンロード Releases · tinybeans/jQueryAutoHeight ※jQuery 1.9 以降で利用する場合は v0.04 以降をお使いください。 使い方 ファイルの読み込み ダウンロードしたファ
CreateJS入門サイト - ICS MEDIA
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
サイドバーをある範囲内で固定してスクロールに追尾させるjQuery [SOHO ホームページ制作 東京・新宿区 スマイルワークス ]
レイアウトの基本として、2カラムなどでメインのコンテンツとサイドバーにその他のページへのリンクなどを配置することは多々有ります。 コンテンツが長くなった場合、サイドバーはスクロールで隠れてしまい、ページ遷移におけるユーザビリティの低下が起こります。 これをコンテンツの縦幅に合わせてスクロールに追尾するスクリプトはいかがでしょうか？ どんなにコンテンツが長くなってもサイドバーは固定で表示されており、いつでも違うページヘの遷移が可能になります。 デモページ │ SMILEWORKS（当サイト） 実装 HTMLファイルには、サイドバーの固定したい要素を用意 この例では、サイドバーのクラス「fixedmenu」を固定表示にします。 <div id="main"> <div id="content"> コンテンツ部分 </div><!--end content--> <div id="side">
![サイドバーをある範囲内で固定してスクロールに追尾させるjQuery [SOHO ホームページ制作 東京・新宿区 スマイルワークス ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e4d872b1aa6d96b8be4b2cb4bead0b8ec20fcdcb/height=288;version=1;width=512/http%3A%2F%2Fsmileworks.biz%2Fwp-content%2Fuploads%2Fsidebar_fixed_banner.png)
「現在のページへのリンクをハイライトさせる」がjqueryでさくっとできてビックリした話 - Qiita
やりたかったこと メニューリンクによくある、いま自分のいるページ（現在地）へのリンクの文字色やら背景色やらが変わる、例のあれ。 某phpフレームワークでできているサイトでこれを作りたくて、if文なりなんなり書くのかなあ、と考えていたら、jquery でなんともあっさりできました。 コード jquery は読み込んだうえで。 <script> var url = window.location; $('.nav a[href="'+url+'"]').addClass('active'); </script> </head> <ul class="nav"> <li><a href="http://www.test.com/test.html">test</a><li> <li><a href="http://www.test.com/test2.html">test</a><li> </u
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
PleaseWait | A Loading Page for your SPA by Pathgather
PleaseWait.js A simple library to show your users a beautiful splash page while your application loads. Launch demo To Use Step 1: Install bower install please-wait npm install please-wait Step 2: Include in your HTML Include the please-wait.css file in your <head> tag/in your normal workflow. You can include the please-wait.js file at the end of your body, but above your other <script> tag(s) if
ページやブロック要素の切り替えがかっこいいプラグイン6選（jQuery・JSなど） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。
デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアののびすけです。最近毎日ハムスターになる夢を見ます。 前回の記事「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」にまとめましたが、WebGLを使ったサイトが最近話題になっていますね。 従来の平面で考えるWebの時代から次の時代への移り変わりを感じる今日この頃です。 今回は実際にWebGLを使った3D表現にチャレンジしてみます。 JavaScriptで記述しますが、初心者向けにまとめたのでノンプログラマやデザイナーの方にもチャレンジしてほしいです！実際にコード書くところは5分（早い人なら1分）でできると思います。 そもそもWebGLとは PC上で3Dを描画するための技術にOpenGLというものがあります。OpenGLは3DグラフィックスAPIとも呼ばれていて、様々なプラットフォームに対応しており、広く普及しています。 このOpenGLをWe
SPOILER ALERT!
Don't spoil it! Hide anything with a bit of blur. Hint on mouseover. Reveal on click. Works with copy: Sharon shoots Adama. It's really tragic. There's so much blood. Haha. Classic Sharon! Turns out Jesus dies, but is brought back to life. A twist worthy of M Night Shamamanalayan! On the Itchy & Scratchy CD-ROM, is there a way to get out of the dungeon without using the wizard key? You have to fin
Drag and Dropでファイルを簡単にアップロードできるコンテンツを作れるDropzone.js - WebDelog
dropzonejs.com 2014月7月1日: dropzone.js のバージョンが上がり、以前の記事の内容では動作しないものが多くなっていたため、2014年7月1日時点での最新版 3.10.2 の仕様にあわせて記事内容を見直し、改訂しています。(更新が遅くなってしまってすみません。) サポートしているブラウザは Chrome 7+ Firefox 4+ IE 10+ Opera 12+ (Mac版のOperaではバグがあるため現在は無効のようです) Safari 5+ となっています。 ドラッグアンドドロップが利用できないブラウザのためには、 クリックするとinput:fileで表示されるファイル選択ウィンドウを表示させたり、 動作しなかったときの処理を書いて対応することが可能となっています。 動作方法 まず実際に動かしてみましょう。 事前にdropzoneを下記よりダウンロードし
jQueryで実現する動画、音楽プレイヤー「10 Useful jQuery Video & Audio Players」
TOP > WebDesign > jQueryで実現する動画、音楽プレイヤー「10 Useful jQuery Video & Audio Players」 最近では動画や音楽もFLASHに頼ること無く、HTMLとjsのみで扱えるようになってきて、jQueryを利用すれば、かなり高度なプレイヤーを実現することも可能です。今日紹介するのはシンプルなものから一風変わったものまで、jQueryで実現する動画、音楽プレイヤーを集めたエントリー「10 Useful jQuery Video & Audio Players」です。 Responsive & Touch-friendly Audio Player 全部で10個の動画、音楽プレイヤーが紹介されていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 HTML5 Music Player シンプルな
要素を天地左右中央に配置できる簡単超軽量スクリプト -Midway.js | コリス
デスクトップやスマフォ・タブレットのレスポンシブ対応で、画像やテキストなどを天地左右の中央に簡単に配置できる超軽量（1KB）のスクリプトを紹介します。 作業は、HTMLに2つ追加するだけです。 Midway.js Midway.jsのデモ Midway.jsの使い方 Midway.jsのデモ 天地左右中央配置は表示サイズを変更しても、変わらずに天地左右中央配置になります。 デモは、ブルーの矩形の中に、ホワイトの要素を天地左右中央配置にしています。 まずは、デスクトップサイズから。 デモページ：IE7モードで表示 Midway.jsの使い方 使い方は簡単で、ステップは2つです。 Step 1: 外部ファイル head内に、スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
背景画像にぼかし効果をかけることができるjQueryプラグイン「Image Blur Plugin」｜アド･エータイプ スタッフブログ
少ないコードでページ内を自在にスクロールさせるjQuery [虚仮の一念…SMILEWORKS BLOG]
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Welcome to nginx!
https://design-spice.com/2012/06/13/responsive-web-design-image/