トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 - ICS MEDIA
「かっこいいウェブサイト」とはどのようなものでしょう？ ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
[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)
Navstack.js - ハイブリッドアプリやスマートフォン向けWebサイトの画面遷移はこれにお任せ MOONGIFT
スマートフォンのWebビューは従来に比べると遙かに進化していて、レンダリング速度やJavaScriptの実行速度も高速化しています。そんな中、ネイティブアプリとWebアプリの違いと言えば、画面遷移のアニメーションにあるのではないでしょうか。 上下左右から画面がスライドして表示されるのはやはりアプリならではといった感があります。そんな表示をサポートしてくれるWebアプリ用ライブラリがNavstack.jsです。 Navstack.jsの使い方 使い方としてはまず、ステージを作ります。 stage = new Navstack({ el: $('#stage') }); 後はページ遷移をする度にpushしていくだけです。 // Navigate to new pages using push. stage.push('/home', function() { return $("<div cl
横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵
高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plugin for jquery 動き 簡単なデモページ作ってみましたのでどうぞ。公式でいいじゃんと思ったけど一応テストで作ったので。 デモページ 使い方 使い方も非常に簡単。liabru/jquery-match-heightからコードをダウンロードして、 [html] <head> <script type="text/javascript" src="http://ajax.googleapis
ページ上のブロック要素の高さを揃えるjQueryプラグイン4選まとめ｜BLACKFLAG
Webページ作成時にリストやdivなど連続したブロック要素を並べた際に 中の要素量によって高さがまちまちになってしまった場合 個々の高さを揃えるのはCSSだけだと何かと面倒だったりします。 Webページ内に並べられたブロック要素の高さを揃えるjQueryプラグインは多々ありますが、 ここ最近新たに話題になった高さを揃えるプラグインもいくつかあったので 自分用メモとしてまとめて4つほど紹介してみます。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 – to-R レスポンシブWebデザインに対応した「jquery.heightLine.js」 – to-R 言わずと知れた「to-R」さんの「jquery.heightLine.js」ですが 先日バージョンアップによってレスポンシブ対応され 今まで以上に便利なものになりました。 オプションでは ————————
もっと読む、を簡単に実装できるjQueryプラグイン「Readmore.js」:phpspot開発日誌
もっと読む、を簡単に実装できるjQueryプラグイン「Readmore.js」 2013年07月22日- Readmore.js: jQuery plugin for long blocks of text もっと読む、を簡単に実装できるjQueryプラグイン「Readmore.js」。 ブログ等でよくある、「ReadMore」。クリックすることで全文が見れるような物ですが、サーバサイドでやるとリロードが必要。 jQueryで$(element).readmore() ってやればすぐにテキストを短くしてくれるところが便利そうです。 クリック時のアニメーションなんかもできます。地味だけど便利ですね 関連エントリ selectをカッコよくしてくれるjQueryプラグイン「Minimalect」 タブ切り替え時のエフェクトがクールなタブUI実装jQueryプラグイン「Tabulous.js」 サ
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations
S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations Published July 12th, 2013 Today I'm going to share with you a gallery plugin I built (yeah, like the world needs another gallery plugin, right?) after having stumbled upon SONY's products gallery while I was browsing their website a while ago. Their products' image gallery is a simple one, but two things grabbed my attention about
13 jQuery SelectBox/Drop-down Plugins — SitePoint
How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests
least.js is a Random & Responsive jQuery, HTML 5 & CSS3 Gallery with LazyLoad
Random & Responsive jQuery, HTML 5 & CSS3 Gallery with LazyLoad Day, Month, Year: sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Day, Month, Year: sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna a
A Pen by Anand Davaasuren
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Sweet Circle Menu
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
[JS]レイヤーに要素を配置し、分離して3Dにぐるぐる回転させるスクリプト -CSSMatrix
jQueryのプラグイン「CSSMatrix」を使って、不連続のレイヤーに要素を配置し、それぞれを分離して3Dにぐるぐる回転して表示するデモを紹介します。
reveal.js - The HTML Presentation Framework
Hello Therereveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical SlidesSlides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1Nested slides are useful for adding additional detail underneath a high level horizontal slide. Basement Level 2That's it, time
jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法｜BLACKFLAG
以前の記事で「jQueryで画像などコンテンツ要素を順番にフェードインさせる方法」と題して、 一覧となって並べられた画像をjQueryを使って順々にフェードインさせる方法を紹介しましたが、 同様のパターンで、フェードインさせる順番をランダムにするパターンを できるだけシンプルな構成で作ってみたので紹介してみます。 まずは動作のサンプルから。 下記画面の「リロード」を押してみてください。 サンプルを別枠で表示する ページの読み込みが終わると 一覧画像がランダムによって順々にフェードインして表示されます。 この全体構成について、 まずはHTMLから。 ◆HTML <div id="thumblist"> <ul> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/
jQueryで読み込み時とリサイズ時の処理を合わせて書く方法 – creamu
jQueryで読み込み時とリサイズ時の処理を合わせて書くには、以下のようにします。 $(window).bind(“load resize”, function(){ // code here }); ※はてぶでコメントを頂いたので追記（2013.2.19） jQuery 1.7以上では「.bind」は非推奨になったため、以下のように「.on」を使います。 $(window).on(“load resize”, function(){ // code here });
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
自社サイトリニューアルでのアニメーション制作について少しだけ。 | ココノヱブログ
http://dan-silver.github.io/ElementTransitions.js/
World atlas in svg and country information