MediaElement.jsでメディアプレイヤーのUIをサクッとつくる | レコチョクのエンジニアブログ
最新のIT技術を駆使して音楽関連サービスを展開しています。 日々の活動内容から得た知識をお届けする開発ブログです。 この記事はレコチョク Advent Calendar 2021 の22日目の記事となります。 はじめに こんにちは！レコチョクが提供している音楽配信サービスのウェブ開発をしている今井です。 普段の業務ではHTML・CSS・JavaScriptを扱い、ユーザーが実際に操作する画面の作成を担当しております。 レコチョクが提供している音楽配信サービスで言うと、月額料金で聴き放題の音楽ストリーミングサービス（例：TOWER RECORDS MUSIC）や1曲や1アルバム単位で購入する音楽ダウンロードサービス（例：レコチョク）など様々なものがありますが、私は後者（音楽ダウンロードサービス）を担当しております。 今回は、私が担当しているサービスで実装している「試聴機能用のメディアプレイヤ
パララックスを簡単実装！オススメのjQueryプラグインまとめ！ | 札幌・東京のホームページ制作・ウェブ制作会社monomode
絶賛パララックス記事祭り開催中です！！ パララックスのサイトを作る際は、背景の動きをずらしたりなどの全体の動きの設定とタイトルをスライドインさせたりといった各要素の動きを考え制作を行うことが多いのではないかと思います。最近、パララックスについて調べることが多かったということもあり、今回は、それぞれの用途に分けて簡単にパララックスのサイトを作ることができるプラグインをまとめてみたので、ご紹介したいと思います。 サイト全体の動きを設定するプラグイン skrollr URL：http://prinzhorn.github.io/skrollr// タグごとに色を変えたり、さまざまさアニメーションを簡単に実装することができるプラグイン。 Create a Parallax Scrolling Website Using Stellar.js URL：http://cdn.tutsplus.com/
2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
jquery.fadeMover - Fadein and Fadeout for jQuery
jquery.fadeMoverはページの遷移時にフェードアウト、フェードイン効果をだすためのjQueryプラグインです。 Overview 指定された要素をフェードインしながら表示し、<a>タグをクリックしてページを移動する場合にフェードアウトしてから移動します。 <a href="#top">など、ページ内リンクの指定をしている<a>タグはフェードアウト動作禁止にしています。 [2012-08-28] 「nofadeOut」で複数classの指定がある場合動作するように修正しました。（hasClassでチェック）。あとファイルを直接ダウンロードするように修正しました。 [2012-02-16] 以前作成していたものに少し手を加え、要素を順番にフェードアウト、フェードインさせるオプション「inDelay」「outDelay」もつけました。フォトギャラリー等で少し変わった動きがほしい場
スクロールするとコンテンツがフェードインするjQueryプラグイン作った。
スクロールして対象要素が画面に出てきたときにいい感じでフェードインして表示させるjQueryプラグイン「jquery.scrollFade.js」を作りました。文章だとわかりにくいかと思いますので、下記のデモを参照ください。 サンプルコード jQuery本体、jquery.easing、jquery.scrollFade.jsの3つを読み込みます。そして、フェードさせたい要素に対してscrollFadeメソッドを実行させます。下記の例では「.scrollFade」というクラスを持つ要素を対象にしています。scrollFadeメソッドは、フェードアウト前の透明度（out）、フェードにかける時間：ミリ秒（duration）を引数として設定できます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
【超簡単】Lightboxの設置方法と使い方
【超簡単】Lightboxの設置方法と使い方 もどる お急ぎの方へ 説明なんていらないから、とにかくすぐに使えるサンプルを寄こせ！ という方向けの「お急ぎパック」を用意しました。 管理人としては下記の手順を読んでもらいたいところですが、 そこはまあ禁則事項ですですから（笑）。 「お急ぎパック」のダウンロード（Zip） 「お急ぎパック」をダウンロードしたら、 「sample.html」をテキストエディタで開いて下さい。 ディレクトリに注意しながらコードをコピペして使用して下さい。 手順その1 公式サイトから必要なファイル一式をダウンロードします。 http://lokeshdhakar.com/projects/lightbox2/ このページを作成した時点の最新版はバージョン2.51です。 バージョン数が違ってもやり方はほとんど同じです。 実際、前バージョンも今と大筋は同
【jQuery】Lightbox表示の画像ギャラリーを簡単に設置できるプラグイン「Colorbox」の使い方 ｜ KLUTCHE
画像を拡大表示する時には定番の見せ方なのでjQueryのプラグインも沢山ありますが、今回使うのは定番プラグイン「ColorBox」です。 設置が簡単で高機能、やろうと思えば拡張性も高いです。 デモ デモページ サムネイルクリックで画像を拡大します。 拡大した画像をクリックすると次の画像へと進んでいきます。 Colorboxプラグインのダウンロード Colorbox ここからプラグインをダウンロードします。サンプルファイルも入っています。 javascript・cssの設置 <link rel="stylesheet" href="colorbox.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <scrip
ホームページ上でカウントダウンを実現するjQueryCountdownプラグイン | ウェブという選択肢
head部記述 サンプル <script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $('#counter').countdown({ image: 'img/digits.png', startTime: '01:12:12:00' }); $('#counter_2').countdown({ image: 'img/digits.png', startTime: '00:05', timerEnd: function(){ alert('5秒経過しました!'); }, format: 'mm:ss' }); }); </script> スクリプト上部がサンプル1で下部がサンプル2の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://diglog.org/javascript/2102.html