アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプトを紹介します。 ↓はアニメーションGIFなので音はありませんが、実際のデモでは弦楽器のような音を奏でます。 びよ~んとなるのが、かなり気持ちいいです。
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ:Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
スクロールすると、ページに配置されているあらゆる要素が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: エフェクトの設定 まずは、コアとなるフレームを作成します。この中に
作成:2015/03/2 更新:2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ 1.クリック時のエフェクト 2.フォームクリック時のエフェクト 3.テキストに11種の動きを出すエフェクト 4.分離するエフェクト フルスクリーンの見栄えをよくする 5.フルスクリーン 縦スライド3つ 6.全画面+オーバーレイ 7.フルスクリーン背景+ローディング 8.写真から背景色を抽出 9.background-size 対策 ドロワーメニュー 10.ドロワーメニュー3つ スクロールエフェクト 11.スクロ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ:ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
ダウンロードファイルに含まれているデモ jQuery.twinkleの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="jquery-1.10.2.min.js"></script> <script src="../jquery.twinkle-0.7.1.js"></script> </body> Step 2: HTML アニメーションを適用する要素にclassやidを加えます。 <div id="twinkle1">click !</div> Step 3: JavaScript jQueryのセレクタで要素を指定し、スクリプトを実行します。 $(selector).twinkle(); アニメーションやエフェクトはオプションで設定します。 var options = { "effe
デモページ [ad#ad-2] lake.jsの使い方 HTML 画像はimg要素で配置し、「display: none;」で一旦非表示にします。 <img id="lake-img" src="lake.png" style="display: none;"/> 画像は下記のように、上半分のみ用意します。 使用している画像:lake.png 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="jquery.js"></script> <script src="lake.js"></script> JavaScript jQueryのセレクタで適用する画像を指定し、スクリプトを実行します。 オプションではアニメーションのスピードやさざ波の量などを調整できます。 <script> $(function() { $('#lake-img
Googleが提唱する新UX「Material Design」で採用されている波紋の美しいエフェクトを簡単に実装できるスクリプトを紹介します。 ボタンでもアイコンでもパネル・画像でも簡単に波紋を適用でき、jQueryなど他のスクリプトは不要です。 Waves Waves -GitHub 「Material Design」が気になる方は、前の記事(「波紋」のアニメーションを実装するテクニック)で動画を紹介しているので参考にしてみてください。 Wavesのデモ Wavesの使い方 Wavesのデモ デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは10+でご覧ください。 以下、デモをアニメーションgifにしてみました。 それぞれクリック・タップした地点を中心にエフェクトが波紋状に広がり、フェードで消えます。 デモ:divのパネル、画像 パネルや画像な
ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ!と思わせるクリエイティブなエフェクトを7つ紹介します。 Inspiration for article intro effects 7つのエフェクトをアニメーションgifにしてみました。 ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです! 各エフェクトのソースは上記ページからまとめてダウンロードできます。
iOSの方がきれい Menyは3Dトランスフォームをサポートするブラウザで動作し、iPhoneのMobile Safariにも対応しています。 動作に必要なCSS, JavaScriptファイルは、下記からダウンロードできます。 Meny -GitHub
画像や見出し・パラグラフなどを配置したパネルを木枯らしに舞う葉っぱのようなアニメーションで次々に表示するjQueryのプラグインを紹介します。 Demo 3: jQuery UI Sliderを使ったタイプ Windyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.windy.js"></script> Step 2: HTML コンテンツはリスト要素で、各アイテムに画像や見出し・パラグラフを自由に配置できます。 <ul
Scrollable Containers onScreenはさまざまなDOM要素に対応しており、パラグラフ、画像、コンテンツスライダーなどスクロールが可能な要素全てに利用できます。 スクロールして表示する際に、ちょっとだけCSSのエフェクトを加えるのかっこいいですね。 onScreenの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="lib/jquery.onscreen.min.js"></script> </head> Step 2: HTML onScreenを適用するエレメントは指定できるよ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
Toybox Box Lid Menuの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトを</body>の上あたりに外部ファイルとして記述します。 <head> ... <link rel='stylesheet' type='text/css' href='css/box-lid.css'> </head> <body> ... ... <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <script src='js/jquery.box-lid.min.js'></script> </body> Step 2: HTML 左のナビゲーションとコンテンツをdiv要素などで配置し、並列の構造で実装します。 <div class='box-lid-menu'> <div cl
「Easing Effect」には3つのデモがあります。 「easeInOutBack」一旦逆にスクロールし、目的地をちょっとだけ通りすぎて戻って到着。 「easeOutBounce」目的地につくとバウンドで到着。 「easeOutElastic」はeaseInOutBackを素早くした感じです。 AnimateScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に記述します。 <head> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="animatescroll.js"> </head> Step 2: HTML(スクロール先の設定) スクロール先の要素にidやclassを付与します。 ※ペー
Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jarallax-0.2.3b.js"></script> HTML HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。 <h1 class="logo">Jarallax</h1> <div class="container" id="slide1"> <h2>見出し:slide
羅列された要素をフェードイン しながら徐々にランダムで表示 させるエフェクトをjQueryで実装 出来る、というプラグインの ご紹介。割と短いコードで作れる エフェクトなので覚えておきたい ですね。 要素をフェードインさせながらランダム表示させるjQueryのプラグイン・champagne.jsです。 champagne.js とても軽量で、テキストでも画像でもOKです。シンプルなので色々応用が利きそう。 以下動作サンプルです。※再生ボタンで動作します。 コード<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.champagne.mi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く