【JavaScript】HTMLで音楽ファイルを再生する【audio.js】 ｜ Tips Note by TAM
HTML上で音楽を再生できるページを作りたいという要望があったので調べてみました。 HTML5のaudio要素を使いたかったのですが、対応していない旧IE対策や、 対応ブラウザでもデフォルトの見た目の差が大きく、デザインを揃えることに困りました。 また、.mp3や.wavなどブラウザによって対応している拡張子がばらばらで、 すべてのパターンを揃えるとなると素材の準備だけで大変です。 そこで見つけたのが、【audio.js】です。 とても便利だったので使い方を紹介します。 【audio.js】を使うときは、準備する音声ファイルはMP3だけで良いです。 MP3やaudio要素に対応していないブラウザではFlash Playerを使って音声を再生できるようにしてくれます。 【audio.js】が動作対応しているブラウザは、 IE6以上・Safari・Chrome・Firefox・Operaと幅広
webmobile – Pixel/iPhone/amazon/SIMの使い方！
webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile（ウェブモバイル）は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ
jFancyTile - Tile shifting image viewer using jQuery
jFancyTile is a jQuery plugin to show a slideshow in a beautiful, mosaic kind of way. It's very dynamic and easy to use. Make sure you check out the article, download the source and learn how it works! Options / use: Make sure your HTML looks like the following: <div id="selector"> <ul> <li><img src="images/img01.jpg" alt="Title 01" /></li> <li><img src="images/img02.jpg" alt="Title 02" /></li> <!
フェードイン・フェードアウトによる画像スライドショーを jQuery で簡単に | 東京のホームページ制作 / WEB制作会社 BRISK
<div id="cover"> <div><img src="demo-pic-1.jpg"></div> <div><img src="demo-pic-2.jpg"></div> <div><img src="demo-pic-3.jpg"></div> <div><img src="demo-pic-4.jpg"></div> <div><img src="demo-pic-5.jpg"></div> </div>
jQuery：jQueryで複数の画像をクロスフェードして切り替える | raining
jQueryを使用して、複数の画像をクロスフェードしたり、スライドショーしたりするプラグインは色々あります。 設定がわかりやすく、シンプルな処理のものを探していたところ、下記のページを見つけました。 jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法 とてもシンプルで簡単に実装ができ、コードもわかりやすいのでおすすめです。 上記の設定をした時の方法をメモします。 ■ 複数の画像をクロスフェードして切り替える 切り替えたい画像を用意し、下記のソースを記述します。 【JS】 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript">
フェード効果で「ふわっ」とページ切替を行う jQuery プラグイン | CYOKODOG
Fage Page はフェード効果を使ってふわっとページ切替を行えるようにする jQuery プラグインです。各ページに CSS と JS ファイルを読み込むのみで適用されます。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。 Fade Page の使い方 フェード切替効果をだしたいページで、jQuery、Fade Page（または jQuery Sitekit）の JS、CSS ファイルを読み込みます。 <link href="jquery.fade-page.css" rel="stylesheet" type="text/css"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><scri
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
シングルページ（1カラム）のページを作るときに、便利なスクリプト | Web制作についてのメモ W-clipブログ
最近？結構前？からシングルページデザインというものを、多く見かけるようになってきました。 パララックスもそうですし、様々な仕掛けがあるのが多いと感じます。 そこで、シングルページデザインで、便利そうな使ってみたいスクリプトをいくつかピックアップしてみました。 fullPage.js One Page Scroll Sites スクロールでページ全体を変えることが出来るスクリプト デモを見ると、以下のようなシンプルなソースで簡単に使えそうです。 <div> <div> Slide 1 </div> <div> Slide 2 </div> <div> Slide 3 </div> <div> Slide 4 </div> </div> また、水平のスライドショーも対応していたり、アンカーを設定できたりと、使い勝手が良さそうです。 jQuery Tilted Page Scroll スクロール
1ページサイトのためのjQueryプラグイン4選 | ko.a laboratory
シングルページのためのjQueryプラグイン4選（後編） シングルページのためのjQueryプラグイン4選（前編）途中で息切れしてしまったので、後編です。 前編では、以下の二つのプラグインを取り上げました。 One Page Scroll SMINT 後編ではシングルページサイトのスクロールがスタイリッシュになる、さらに二つのjQueryプラグインをご紹介します。 fullPage.js ［DEMO］ 使い方はとても簡単です。 サイトからファイルをダウンロードします。 headでスクリプトファイルとスタイルシートを読み込みます。jquery.min.jsとjquery-ui.min.jsも読み込みます。 もし、optionで’scrollOverflow’を’true’にする場合は、jquery.slimscroll.min.jsも読み込みます。 //fullPage.jsスタイ
サイトでおしゃれに動画再生！オリジナルUIの全画面動画を実装！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、制作部デザイナーのぺちこです。 近頃動画を使ったサイト制作に関わらせていただく機会に恵まれておりますが、 お恥ずかしながらvideo実装をしたことがなかったので、 ひたすら勉強三昧でした。 背景に動画を使ったサイトも、今ではだいぶん主流になってきた印象ですが、 動画を1つのコンテンツとして、長めにしっかりと載せているサイトも増えてきましたね！ 動画を大事なコンテンツの一部とすると、 YouTubeやVimeoで簡易的に載せるだけではどうしても物足りず…。 せっかくなので<video>タグを使用してオリジナルのコントローラーやシークバーを作ってしまおう！というのが今回の記事の内容です。 では早速行きましょう！ オリジナルUIの全画面動画を<video>で実装する方法 JSを使用すればvideoをがっつりコントロールできるのですが、 これがまた調べてもスクリプトが出てくるばかりで、
jQueryで自動ドアが開くような表示をさせるJavaScript「Image splitting effect with CSS and JQuery」
twitter facebook hatena google pocket 画像の見せ方にはいろいろあります。 Image splitting effect with CSS and JQueryでは、マウスオーバーすると画像が中央から左右に分かれて開くようなチュートリアルを紹介しています。 自動ドアが開くように表示することでユーザーに驚きを与えられるかもしれません。 sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> まずjqueryを読み込んだら以下のような記述をします。 <div class="box_container"> <div class="images_holder"> <div class="image_div l
digitalskill.jp
Buy this domain. digitalskill.jp 2021 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
これは面白い！jQueryで紙芝居のように画像をめくるJavaScript
Create a unique Gallery by using z-index and jQueryで紹介されている画像の見せ方が面白いので紹介します。 クリックするたび紙芝居のように画像がめくられていきます。 sponsors 使用方法 jQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function() { var z = 0; var inAnimation = false; $('#pictures img').each(function() { z++; $(this).css('z-index', z); }); function swapFir
jQueryで自動ドアが開くような表示をさせるJavaScript「Image splitting effect with CSS and JQuery」
jQueryで自動ドアが開くような表示をさせるJavaScript「Image splitting effect with CSS and JQuery」 画像の見せ方にはいろいろあります。 Image splitting effect with CSS and JQueryでは、マウスオーバーすると画像が中央から左右に分かれて開くようなチュートリアルを紹介しています。 自動ドアが開くように表示することでユーザーに驚きを与えられるかもしれません。 sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> まずjqueryを読み込んだら以下のような記述をします。 <div class="box_container"> <div class=
JavaScriptでスクラッチゲームみたいなことが可能な「jScratchcard plugin」
クーポンや宝くじについていて、コインなどで削るとあたりとか表示されるスクラッチ。 それをJavaScriptで実現したScratchcard (Scratchcard effect on image) pluginです。 sponsors 使用方法 Scratchcard (Scratchcard effect on image) pluginからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.jScratchcard.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#id名
スマートフォンの画像ギャラリーにも使える！タッチでスライドさせられる「Roto」
昨今のスマートフォンブームで、対応を迫られることも多い、画像ギャラリーなどのスライド機能。 既存のギャラリー系JavaScriptだとタッチがうまく取れないこともあります。 そんな時は、Rotoを使用してみてはいかがでしょうか。 sponsors 使用方法 Rotoからファイル一式をダウンロード。 下記のようなHTMLがあるとします。 <div id="id名"> <ul> <li><img src="Image1.png" /></li> <li><img src="Image2.png" /></li> <li><img src="Image3.png" /></li> <!-- 以下画像分 --> </ul> </div> あとはJavaScriptを以下のように記述します。 <script type="text/javascript" src="jquery-1.6.1.min.j
背景画像をスライドショーさせるJavaScript「Vegas Background jQuery Plugin」
背景画像を動かすことでインパクトのあるサイトが構築できます。 Vegas Background jQuery Pluginはフルスクリーンで背景をスライドさせられます。 さらにドットのオーバーレイをかけられるので、カッコイイ感じになります。 sponsors 使用方法 Vegas Background jQuery Pluginからファイル一式をダウンロード。 <link rel="stylesheet" href="jquery.vegas.css" media="all" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.vegas.js"></script> <script> $(function(){ $.v
jQuery CollagePlus - an image gallery plugin by Ed Lea
An image gallery plugin for jQuery Download .zip Download .tar.gz View on GitHub This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height. Example: Play with a live example on jsfiddle: http://jsfiddle.net/edlea/uZv3n/ or take a look at the demo Basic Usage // example HTM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images ) – かちびと.net
http://www.jquery-com.net/images/bgstretcher/