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/
wow.jsでスクロールアクションをトリガーにして画面に入るとフェードインで表示させる
wow.jsを使うととても簡単にスクロールアクションを設定できます。 スクロールを着火させるためにwow.jsでトリガーを設定→animate.cssを使ってアニメーションを設定。 この方程式は2年くらい使い続けていますがテッパンですね。 時間も予算もないけど、サクッと動かしたい。そんな人のためのjqueryプラグインと言えます。 wow.jsとは wow.jsはアニメーションのトリガーとして、スクロール位置を知ることができるJavascriptのプラグインです。 wow.jsを使うことで、好きなタイミングでAnimate.cssを呼ぶことができます。 スクロールが行われてからアニメーションさせるため必要なんですよね。めっちゃ感動！！！ 要するに表示領域にオブジェクト（動かしたい要素）が入るとアニメーションを起動させてくれます。 GitHub こちらは公式サイト これで誰でも簡単にclas
Adobe XDとSketchで飲食店のサイトを作る【後編】
やっとムスリム向け日本食レストラン”HALAL SAKURA”様のWebサイトを公開しました。 いやー感無量ですね！東京のクライアントを相手に大阪から初めてフルリモートで全ての工程を終えることができました。 おめでとうございます！ そして前編に引き続き、Webサイトの制作工程を余すことなくレポートします。 Adobe XDとSketchで飲食店のサイトを作る【前編】ではワイヤーフレームはAdobe XDで作り、デザインはSketchで作るWebサイトの制作フローを紹介しました。 後編の今回はデザインを形にしていくコーディングについて詳しく書いていこうと思います。 今回の実装はどれもJqueryを使えば汎用的に使えるギミックなので、マークアップ初心者でも簡単に取り込んでいくことができます。 喜んでもらうにはアニメーションも含めてデザインする アニメーションを使うことはリッチにカッコよく見せる
高さ可変！CSSアニメーションでなめらかアコーディオン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドのつっちーです。 前回記事では、サポート終了（※1）となったIE9を切り捨てることで、CSSアニメーションを軸とするスライドショーを作成しました。今回も同様のコンセプトで、同じくよく使われているUI、アコーディオンを作成します。 内容の高さにそれぞれ違いがある場合でも、サイズを指定することなくアニメーションするところがポイントです。 ※1 Windows Serverを除く 今回つくるアコーディオン まずは完成した状態を確認してみましょう。 See the Pen 1704-completed by ligdsktschy (@lig-dsktschy) on CodePen. トリガーの要素をクリックすることで開閉する、一般的なアコーディオンです。 ちなみにこれを、CSSアニメーションを使わず実装したものがこちら。 See the Pen 1704-jquery
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で簡単に作れるマウスオーバーでアニメーションするボタン５種
Posted: 2010.10.24 / Category: javascript / Tag: jQuery ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準備 はじめにボタンと
【トリプル】ついにYahooショッピングでjQuery(Javascript)が使用可能に！トリプルについて | 複数ネットショップの商品管理専門 簡単出品王子
お知らせ:弊社では全社員リモートワークを実施しております、通常通りお問い合わせはフォームから随時お受けしております。 お知らせ:8月13日（火）から15日（木）まで夏季休業いたします。頂いたお問い合わせに関しましては、8月16日（金）より順次対応させていただきます。ご不便をおかけいたしますが、何卒よろしくお願い申し上げます。 トリプルってなんだ？？ トリプルとはyahooショッピングで様々なファイルをFTPでアップロードしてjquery(javascript)やcssなどが使えるようになる有料サービスです。 楽天のGOLDに当たるサービスと思ってもらえるとイメージしやすいと思います。 Yahooショッピングからの案内PDFはこちら http://i.yimg.jp/images/biz_ec/pdf/triple.pdf トリプルを使って出来ることはなに？ いままで、yahooショッピング
jQuery入門講座：サンプル目次
索引 └ サンプル目次 1章：短編集 ├ スイッチの作成 ├ キャプションの表示 ├ スムーススクロール(1) ├ スムーススクロール(2) ├ タブメニュー(1) ├ タブメニュー(2) ├ タブメニュー(3) ├ タブメニュー(4) ├ カテゴリ切替(1) ├ カテゴリ切替(2) └ カテゴリ切替(3) 2章：診断系コンテンツ ├ 選択肢の作成(1) ├ 選択肢の作成(2) ├ 選択肢の作成(3) ├ 質問の切替(1) ├ 質問の切替(2) ├ 点数計算 ├ 結果の表示 ├ 外部テキストの読込 └ もう一度ボタン 3章：製品抽出系コンテンツ ├ 構成の確認 ├ 回答の確認 ├ 点数表の作成 ├ 得点の集計(1) ├ 得点の集計(2) ├ 結果画面の作成(1) └ 結果画面の作成(2) 番外：Simulation Game ├ 地形データの読込 ├ ユニットの移動 ├ 敵ユニットの扱い
JavaScriptのグラフライブラリを52種類も集めた「JavaScript Graphs」。グラフの種類や依存ライブラリ、価格などで絞り込み可能
JavaScriptのグラフライブラリを52種類も集めた「JavaScript Graphs」。グラフの種類や依存ライブラリ、価格などで絞り込み可能 数年前に自作のアプリケーションをJavaScriptで作ったときにグラフ機能を実装しようとして、いくつかのグラフ用のJavaScriptライブラリを探して試したことがありました。JavaScriptライブラリを探すのは、それなりに手間がかかるものでした。 もちろん当時からJavaScriptのグラフライブラリの情報をまとめたサイトはいくつかありましたが、最近登場した「JavaScript Graphs」は52種類ものライブラリを集めて、ビジュアルに一覧できるようにしたサイトです。 さまざまな条件で絞り込みができる便利な機能も備えており、条件としては折れ線グラフやドーナッツグラフに対応したものなどグラフの種類、無料や有料、非商用のものなどの価格
jquery.jsを読み解く：第1回 jQueryライブラリ（1～171行目）｜gihyo.jp … 技術評論社
はじめに jQueryとは、John Resigによって開発され、最近非常に注目を集めている Javascriptライブラリです。 JavaScriptとHTMLの対話を劇的に改善し、Ajaxなどにより複雑化してきているWebアプリケーション構築に必要な処理を非常に簡潔に書くことができます。また、ブラウザの種類やバージョンによる違いも吸収してくれるため、プログラマの作業量も減らしてくれます。 本連載では、jQueryライブラリのコードを読みながら、実装として中で何が行われているのかを見ていこうと思います。 想定している読者は、jQueryライブラリをただ使うだけでなく、やっていることを理解したいという方、使われているコードを応用して自分なりの改造をしてみたい方、新たなプラグインを開発したいという方などです。 今回の連載では執筆開始時点の最新版であるバージョン1.2.2を対象としています。説
マウスホバーで動き出す動画ページの作り方 (1/2)
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
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
jQuery lightBox の使い方（PC用 固定サイズ版）
「すぐ使えるCMS」にjQuery lightBox を導入して、サムネイル画像をクリックした時にホームページ上で画像を拡大表示する方法をご紹介します。 lightBox とは？ lightBox は、サムネイル（サムネイル、縮小版）表示されている画像を、同じWebページ上で拡大表示する方法です。ポップアップウィンドウの動作に近いですが、JavaScript と CSS を利用して表示を調整します。このため、実サイズと異なるサイズでも拡大画像の表示が可能です。 この動作の事を「lightBox（ライトボックス）」と呼びこのためのツールはたくさんあるのですが、ここでは「jQuery lightBox plugin 0.5」というものを使います。 これは以前に http://leandrovieira.com/projects/jquery/lightbox/ で公開されていたツールですが、2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bright英会話
グローバルナビをスクロール時に固定する方法 – mororeco
http://diglog.org/javascript/2102.html
