スクロールで画像がクロスフェードするCrossfade.js
「Crossfade.js」 は、スクロール量に応じて画像をクロスフェードで切り替えるプラグインです。最近流行の「ぼかし」のかかった写真を用意すれば、ページをスクロールすると写真がぼやけていくオシャレなトップページが作れます。 Crossfade.js は非常に軽量で、非圧縮版でも3.2KBしかありません。また、アニメーション用のJavaScript APIであるwindow.requestAnimationFrame を使って画像を再描画するので、レンダリングが高速です（window.requestAnimationFrame をサポートしていないブラウザーにも対応しています）。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Crossfade.jsをGitH
Still Within · Compassionate guidance on the path of the heart
In my life, I have recognized immense benefit by consciously extending myself beyond what is comfortable.By choosing to encounter all that within me is unknown—fear, grief, and death; silence, ecstasy, and unity—I have uncovered a peace inside myself that seems to deepen my capacity to be with all the uncertainties of what it means to be human. Feeding this inquiry has allowed me to meet suffering
よくある「背景でムービーが再生されてる奴」を実現する（Vide.js） | mah365
開くと背景で全画面でムービーが再生されているサイト、よくありますよね。それなりにインパクトがあるし、ちょっと使ってみたいと思うことも多いはず。Videというライブラリを使えば簡単に実現ができます。 使い方 ムービーが再生されるまでに表示しておく静止画（jpg）と、動画ファイル（mp4, ogv, webm）を同じパスに配置しておきます。HTML5でムービーを再生するのですが、ブラウザによって再生できるファイルが異なるので、異なる拡張子で同じムービーファイルを作成しておく必要があります。 path/ ├── to/ │ ├── video.mp4 │ ├── video.ogv │ ├── video.webm │ └── video.jpg 再生場所の指定はHTMLで行う以下のような方法と、 jQueryで行う以下のような方法があります。 $("#myBlock1").vide("path
Bigvideoプラグインを使用してvideo要素で動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載02】 | HTML5でサイトをつくろう
Bigvideoプラグインを使用してvideo要素で動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載02】 前回は、jQueryの「tubular」プラグインを使用してYOUTUBEにアップロードした動画を背景に表示させるサンプルを作成しました。（前回の記事はこちら） 今回は、jQueryの「Bigvideo」プラグインを使用して作成しました。 YOUTUBEなどの外部サイトの動画でなく自分のサーバーにある動画を背景に流したい場合におすすめのサンプルです。 前回同様に背景に動画だけを作るだけなく、ロゴやナビゲーションやコンテンツ内容を入れてWebサイトのTOPページのデザインのようなサンプルを作成してみました。 今回作成したサンプル サンプルをみる HTML5 Video要素で扱える動画ファイルに気をつけよう HTML5 Video要素で扱える動画はブラウザごとに
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
Particleground demo
Particleground A JavaScript plugin for snazzy background particle systems Download
Skippr. A jQuery plugin for creating tasteful slideshows.
The setup. Include jquery.skippr.css inside your head tag and skippr.js just before the closing body tag. Be sure to include jQuery before skippr.js <head> <title>Your Awesome Website</title> <link rel="stylesheet" href="your-path-to-skippr.css"> </head> <body> <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="your-path-to-skippr.js"></script> </body> Create a target elem
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jnicol/particleground: A jQuery plugin for snazzy background particle systems
Loading...
