BigVideo.js The jQuery Plugin for Big Background Video (and Images) 12-30-2015 Update This project is no longer under active development. Much has changed since the summer of 2012 when BigVideo.js was launched. For more current information on implementing video backgrounds, check out these links: CSS Tricks - Should I use a video as a background? Dudley Storey - Create Fullscreen HTML5 Page Backgr
Webアニメーションを高速化するために知っておくべき10のこと(前編) 斉藤 祐也(株式会社リッチメディア) アニメーション/トランジションは身の回りに当たり前にあるものです。 むしろ普段の生活では「0」が「1」に変化するものの方が珍しいでしょう。 アニメーション/トランジションはデジタルなWebに対して自然な変化を提供する大切なツールです。 今回はそんなアニメーション/トランジションをより自然にスムーズに動作させるために知っておきたいことを前・後編の2回に分けて紹介していきます。 アニメーションを高速化する理由 アニメーションは先ほど書いたように普段の生活にも存在しています。だからこそ、我々はスムーズではないアニメーションを見つけるのが得意です。 アニメーションに限定した話ではありませんが、FacebookのShane O’Sullivan氏が、ページロード後のレンダリングパフォーマンス
連載「Webサイト・アプリ高速化テクニック徹底解説」の第3回は、前回の「ユーザーの体感速度を高めるためのJavaScriptチューニング(前編)」の続きです。この後編では、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説し、HTML5のWeb Workersについても紹介していきます。 前回は、ユーザーの体感速度を向上させるための方法として、3つのうち「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」を解説しました。今回は、最後の「ユーザーの操作を阻害しない」について詳しく解説していきます。 ユーザーの操作を阻害しない JavaScriptによる処理が重くなると、いつまでも画面が更新されなかったり、ユーザーの操作が止まってしまったりということがあります。止まっている時間が長すぎると、ブラウザから応答がないという
animo.js A powerful little tool for managing CSS animations Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic. August 13th, 2013 by Daniel Raftery You can easily install animo via the GitHub repo or using bower's package manager. Using First and foremost, animo includes the amazing animate.css library by Dan Eden which provides you with nearly 60 be
Some inspiration for transition effects for off-canvas navigations. Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu. The idea is to show some hidden sidebar with a subtle transition on the element itself and also on the remaining content. Usually the side
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
Today’s tutorial is about creating an animated swatch book using CSS rotation transforms and JavaScript. The idea is to show a swatch book like structure and make the single swatches or “sheets” clickable. When clicking on a swatch, we’ll rotate the other swatches in order to reveal the selected one. Please note: the result of this tutorial will only work as intended in browsers that support the r
jQueryを使ってアニメーションさせる場合、アニメーションを同時ではなく、 何かの動作が終わった後、順番に実行するということも必要になってきます。 特に最近は、サイトのコンテンツもパララックスを使ったものなど、リッチなものが増えており、 そういった機会も増えてきています。 そこで、jQueryを使って順番にアニメーションする方法について、2つほど取り上げてやってみました。 ↓デモはこちらから DEMO 今回は、 車が走ってくる 車が木にぶつかって木が揺れる 鳥が逃げ出す という順番で実行するアニメーションを考えます。 まず車が走ってきた後に、木にぶつかって木が揺れるところまで。 jQueryでは、animate()で、コールバック関数を指定することで、 アニメーションが終わった後に、別の動作をさせることができるので、 それを利用しようとしましたが、 そうした場合、 今回のように特殊なイー
<div id="wrapper"> <p>ランダムで画像表示</p> <div id="random"> <div><img src="images/img01.jpg" alt="花" /></div> <div><img src="images/img02.jpg" alt="花" /></div> <div><img src="images/img03.jpg" alt="花" /></div> <div><img src="images/img04.jpg" alt="花" /></div> <div><img src="images/img05.jpg" alt="花" /></div> <div><img src="images/img06.jpg" alt="花" /></div> <div><img src="images/img07.jpg" alt="花" /></d
もっと読む、を簡単に実装できる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」 サ
Event Capturing 各イベントを取得することもできます。 jQuery.panelSnapの使い方 Step 1: 外部ファイル スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery.customEvents.js"></script> <script src="/path/to/jquery.panelSnap.js"></script> </head> Step 2: HTML コンテンツは一つずつsection要素(変更可能)で並列に配置します。 スタイルシートは各コンテンツ自由にしてください。 <body> <section>コンテンツ:1</section> <section>コンテンツ:2</sect
以前の記事で紹介しましたが、JavaScriptとCSS3だけで疑似的に3D表現を行うことができるSprite3D.jsを再びさわりましたので投稿します。 視差を利用して、立体的な表現を手に入れるパララックスも流行りましたが、もっと立体的な表現ができるSprite3Dによるトランジションは意外と効果的ではないかと思い作成しました。一見普通のコンテンツですが、リンクをクリックしたときの驚きは、パララックスをはじめてさわった時に勝るとも劣らないんではないかと思います。しかもパララックスだとFixedがまともに使えないスマフォでは再現がほとんど出来ないと思いますが、これはスマフォで問題なく表示可能です。実装も非常に簡単なので是非一度さわってみてください。 サンプル Sprite3Dとはあまり関係ないですが、実装にはTypeScriptを使用しました。TypeScriptはクラスベースでJavaS
JS系のTweenライブラリだと、オブジェクトのCSSプロパティにトゥイーンをかける事を基本に設計されている場合が多いかとおもいます。もちろんTweenかけるものって基本的に表示要素なので、CSSにトゥイーンをかけることは間違ってはいないのですが、以前の記事にてSprite3Dを使用しましたが、Sprite3Dを使ってトゥイーンをかけたい場合は、CSSプロパティではなく、メソッドを実行する必要があります。もちろんメソッドの中ではCSSプロパティを操作しているわけですが。 そういった目的に絞って、シンプルなトゥイーンエンジンが必要になり、作りましたので投稿します。 概要は、オブジェクトのプロパティの値を現在の値から、指定した値まで、指定秒で、指定イージング関数を通して変化を与えつづけます。 ソース デモページ 基本的な使い方ですが、まずはじめに第一引数にオブジェクトを渡してTween関数を実
どうもこんばんは。Toshikuraです。今回のTipsは【jQuery 外部ページでもスムーズスクロールを実装する方法 – 遷移先ページの任意IDへスムーズスクロール】です。通常のスムーズスクロールですとページ内にアンカーを設定しjQueryにて高さ取得&スクロールという手順ですが、本記事ではページ遷移と組み合わせ遷移後に特定箇所へスムーズスクロールさせます。基本的な部分のみですのでこのままでは微妙です、参考程度にご活用ください。 実装方法 実装方法は至ってシンプルです。まずは遷移後にスクロールするサイト(ここではB.html)へのリンクをA.htmlに記述します。 HTML(A.html) <a href="B.html?id=white">LINK</a> <a href="B.html?id=black">LINK</a> <a href="B.html?id=red">LINK<
Options ignoreColumns Column indexes to not make filterable Type: Array Default: [] onlyColumns Column indexes to make filterable, all other columns are left non-filterable. This takes presidence over ignoreColumns when both are provided. Type: Array Default: null - all columns ignoreCase If case should be ignored Type: Boolean Default: true isMatch Define your own function to determine if a cell
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く