Howler.js＋audioSpriteで「BGMのON/OFF切り替え」「BGM切り替え 」「 イコライザーアニメーション」をつくってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのはっちゃんです。 最近はブラウザでさまざまなことが再現できるようになりました。たとえば、WebサイトにBGMを入れたくなるときってありますよね？ その場合は、当然サウンドのON/OFFの切り替え機能を作ってユーザーに配慮することが必要になります。 しかし、弊社には「期待を超えろ」というスローガンがあります。そのまま作ることは会社的にも個人的にもプライドが許しません。 そこで今回は、単なるサウンドのオン・オフ切り替え機能にとどまらず、それをさらにパワーアップさせた「サウンド ON/OFF + BGM切り替え + イコライザーアニメーション」を作ってみようと思います。 準備するもの BGMのコントールに重宝するHowler.js Howler.jsはさまざまな音楽ファイルのフォーマットを扱うことができ、再生のON/OFF、ストップ、ミュートなどを簡単に実装
Theemey.js - jQuery製のテーマエンジン MOONGIFT
WordPressなど多くのCMSがテーマ機能を備えています。一種類のデザインだけで全員を満足させるのは難しいので、テーマがあることで自由度を高めたり、テーマを作成するデザイナーを増やすこともできます。 そんなテーマ機能を手軽に追加できるライブラリがTheemey.jsです。jQueryベースで作られたテーマエンジンです。 Theemey.jsの使い方 Theemey.jsのデモです。まずデフォルトの表示です。 テーマを変更しました。HTMLの構造は変わらず、ダイナミックにスタイルシートを変更しています。 多くのパターンが登録されています。 Theemey.jsではHTMLの構造は変えられませんが、スタイルシートだけでも文字サイズや色以外にDOMの配置を変更することもできるでしょう。簡易的に提供するテーマ機能としては十分ではないでしょうか。 Theemey.jsはjQuery/JavaSc
[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs
一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。 flexible.gs flexible.gs -GitHub flexible.gsのデモ flexible.gsの使い方 flexible.gsのデモ 対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, Opera Mini, Android Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobileと現在主流のブラウザに対応しています。 デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種
![[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5d222ae06cf2d58d2b7bc17660d161a7352606d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102201-01.png)
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
Cloud Carousel - A 3d Carousel in Javascript
startSection('doctype'); ?> endSection();?> startSection('head');?> endSection(); $templ->startSection('content'); ?> Cloud Carousel - A 3d Carousel in Javascript There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist (see this and this), the commercial Flash products tend to have better aesthetics and polish. To redress the balance
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
