- ベストアンサー
携帯でアニメーション
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
J-phoneでは、MOTION属性を複数付けることでアニメーション効果を表現できます。 a.png、b.png、c.pngの3つのファイルを使う場合は、 <IMG MOTION="a.png" MOTION="b.png" MOTION="c.png"> となります。
関連するQ&A
- 画像のimgタグと同時にそのタグが入ったhtmlファイルを出力するソフト
画像のimgタグと同時にそのタグが入った htmlファイルを出力するソフトはないでしょうか？ 例えば「A.png」「B.png」～「Z.png」までの画像ファイルがあるとします。 そのソフトを使うと「A.html」「B.html」～「Z.html」が作成され、 「A.html」の中には「A.png」を表示するimgタグが、 「B.html」の中には「B.png」を表示するimgタグが、 という具合に出来るといったものです。 説明がわかりづらければ補足しますので仰ってください。 よろしくお願いいたします。
- 締切済み
- フリーウェア・フリーソフト
- AUの携帯にアニメーションを送りたいのですが・・・。
僕の携帯はAUのA1304Tなのです。色々、調べてみて、GIFアニメーションをPMDやPNGに変換するソフトをダウンロードしたのですが、PMDではクリップに×印がついていて、PNGでは「再生出来ません（不正データ）と表示されました。両方とも5kb前後に調整しました。また、gifを5kbに調整して送ると「再生出来ません（データサイズオーバー）」と表示されます。 ちなみにソフトはEZ携帯ピクチャーを使用しました。 どうか宜しくお願いします。
- ベストアンサー
- その他（スマートフォン・携帯・タブレット）
- cssのanimationの設定の仕方
Animationの表示タイミングが合わないので教えてください。 今回初めてcssのanimationを使ってみました。 同時に、jQuery.BgSwitcher を使って背景画像５枚を５秒間づつ表示させてループさせています。（合計２５秒間）そして、cssのanimation でテキストA,B,Cの３枚を２５秒間表示させています。 表示タイミングは 【背景画像1を表示 テキストＡを表示 テキストＢを非表示 テキストＣを非表示】 【背景画像2を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを非表示】 【背景画像3を表示 テキストＡを非表示 テキストＢを表示 テキストＣを非表示】 【背景画像4を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを非表示】 【背景画像5を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを表示】 背景画像で使用しているjQuery.BgSwitcherの表示時間は1枚５秒です。５枚ですので２５秒でループです。animationが適応されているテキストＡ，Ｂ，Ｃの animation-duration: 25s; にしています。 テキスト画像Ａ，Ｂ，Ｃは表示されるタイミングではopacity:1 にしてそれ以外はopacity:0で非表示にして背景画像1,2,3とテキストA,B,Cとの表示タイミングが合わせたいです。 初めはタイミングよく背景画像とテキスト画像が表示されているのですが徐々に表示タイミングずれてしまい５分ぐらいするとanimationのテキストA,B,Cの表示タイミングが背景画像と大きくずれ、例えばテキストＡが背景画像5で表示されるようになってしまいます。 jQuery.BgSwitcherでの背景画像５枚の１ループの時間は２５秒。animationのテキストA,B,Cのanimation-duration: 25s; なのですが、徐々にずれてしまいます。 animation側の設定に問題があるかもしれませんので教えていただけないでしょうか？ 現在のテストサイトは下記です。 http://cm-creation.net/yoshida/text-anime-test/index13.html どうぞよろしくお願いいたします。Cssとhtml設定は下記です。 ■cssの設定 .bg-slider { width: 99.1vw; height: 100vh; background-position:center center; background-size: cover; display: flex; justify-content: center; position: relative; } .textA { position: absolute; top: 5%; left:20%; animation-name:animation1; animation-duration:25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } .textB { position: absolute; top: 5%; right:20%; animation-name:animation2; animation-duration:25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } .textC { position: absolute; top: 5%; animation-name:animation3; animation-duration: 25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } @keyframes animation1 { 0% { opacity: 0; transform: translate3d(0, 30px, 0); } 5% { opacity: 1; transform: translate3d(0, 0, 0); } 26% { opacity: 0; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } } @keyframes animation2 { 0% { opacity: 0; transform: translate3d(0, 0px, 0); } 41% { opacity: 0; transform: translate3d(0, 30px, 0); } 45% { opacity: 1; transform: translate3d(0, 0, 0); } 66% { opacity: 0; transform: translate3d(0, 0px, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } } @keyframes animation3 { 0% { opacity: 0; transform: translate3d(0, 0px, 0); } 81% { opacity: 0; transform: translate3d(0, 30px, 0); } 85% { opacity: 1; transform: translate3d(0, 0, 0); } 101% { opacity: 0; transform: translate3d(0, 0px, 0); } 102% { opacity: 0; transform: translate3d(0, 0, 0); } } ■html <script> jQuery(function($) { $('.bg-slider').bgSwitcher({ images: image/main10.jpg','image/main11.jpg','image/main12.jpg','image/main13.jpg','image/main14.jpg'], // 切り替える背景画像を指定 interval: 5000, // 背景画像を切り替える間隔を指定 5000=5秒 loop: true, // shuffle: false, // effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定 duration: 500, // エフェクトの時間を指定します。 easing: "swing" // エフェクトのイージングをlinear,swingから指定 }); }); </script> <div class="container-fluid px-0 bg-slider " > <div class="textA"><img src="image/item8.png" class="img-fluid" alt=""/></div> <div class="textB"><img src="image/item9.png" class="img-fluid" alt=""/></div> <div class="textC"><img src="image/item10.png" class="img-fluid" alt=""/></div> </div>
- ベストアンサー
- HTML
- 画像がうまく表示されないのですが
ページを見るごとにランダムで画像が変わるタグを書き込んだのですが・・・ タグ１ <script language="JavaScript"> <!-- var simg=new Array(5); simg[0]="icon1.png"; simg[1]="icon2.png"; simg[2]="icon3.png"; simg[3]="icon4.png"; simg[4]="icon5.png"; var Myimg=Math.floor(5*Math.random()); document.write("<img src='"+simg[Myimg]+"'>"); //--> </script> タグ２ <SCRIPT LANGUAGE="JavaScript"> <!-- simg=new Array(2); simg[0]="<a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a>"; simg[1]="<a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a>"; Myimg=Math.floor(2*Math.random()); document.write("<img src='"+simg[Myimg]+"'>"); //--> </SCRIPT> タグ１はインフォシークのサーバーでは表示されたのですが、A-RINGSのサーバーでは表示されなかったので、サーバーの問題で表示されないのでしょうか？ 表示されないとしたらどのようにしたら表示されるものなのでしょうか？ タグ２はどちらのサーバーも表示されませんでした。 どうしたらちゃんと表示されますでしょうか？
- ベストアンサー
- JavaScript
- J-PHONEの携帯でアニメーションが登録できない
J-PHONEでアニメーション待ち受け画像を作ってみました。 J-SKY WEB上ではアニメーションが見られるのですが、携帯に登録しようとすると「画像を一部削除し…」と表示され、待ち受けにしたときに絵が動きません。(私の携帯端末はJ-D03です) アニメーションに使った画像は３枚で、合計4.5k程度の容量なんですが、原因がよく分かりません。 他にもアニメーション待ち受け画像を作ってみましたが、同じ結果になってしまいました。 どうすれば、携帯に待ち受け画像の登録ができるようになるのでしょうか。
- ベストアンサー
- その他（スマートフォン・携帯・タブレット）
- GIFからPNGへの変換(アニメーション)
現在ボーダフォンの携帯を使っています。 ネットでかわいいアニメーションを探して保存し、パソコンからメールで送って携帯にそのアニメーションを表示させようとしましたが GIFアニメーションのため、ボーダフォンではみれませんでした。 ここのサイトみて、GIFをPNGに変換するソフトをダウンロードし変換するところまではできたのですが。 いざ、パソコンから携帯へ送ってみると動きません…。ダウンロードしたソフトは「G・こんばーちゃ♪」というものです。 GIFアニメーションはPNGアニメーションに簡単に変更できないということなのでしょうか？ できれば、簡単に(自分で作成することにならずに・・)変換できる方法をおしえてください。
- ベストアンサー
- その他（インターネット・Webサービス）
- 書き出されたコードにアニメーションつけたい
https://dl.dropbox.com/u/63681173/001/index.html 編集中のソース↑ Google Feed APIを使ってRSSから取得した写真にlightbox系のものを入れたいのですがどうもうまく行かないです。 jsで書き出したソースをブラウザの開発ツールでコピーしたのが下のソースですが、これを直接htmlに書くとlightbox系のアニメーションがつきました。 --------------------------------------------------------- <div class="box"> <a href="http://distilleryimage7.s3.amazonaws.com/a083bd3672b411e2b0f722000a9f18db_6.jpg" class="swipebox"> <img src="http://distilleryimage7.s3.amazonaws.com/a083bd3672b411e2b0f722000a9f18db_6.jpg"> </a> </div> --------------------------------------------------------- jsで書き出したソースのみアニメーションがつかないのはなぜでしょうか？ http://wp.7zz.jp/news/ajax/2447.html http://brutaldesign.github.com/swipebox/
- ベストアンサー
- JavaScript
- preg_match_allで正規表現
preg_match_allにて、次のように<img>が連続したソースから、 ※URLは全てダミーです <img src="http://a.com/a/a.jpg"><img width="10" src='http://b.com/b/b.gif' height="10"><img width="10" height="10" src='http://c.com/c/c.png"><img src=http://d.com/d/d.jpg><img src="http://e.com/hogefuga/e.jpg"> 個々のimgタグ全体と"<img～>"、 個々のsrc="～"のURLを抽出したいのですが、下記の条件でマッチさせることはできるでしょうか？ 1. imgの属性位置・有無に問わず 2. 属性のくくりが、'" のどちらでも、または有無に問わず 3. src=～内に、"hogefuga"を含まないものにだけマッチ（否定形） 次のような正規表現で試したところ、 $pattern = '/<img.*?src=(\'|")?((?(?!hogefuga).)*\.(jpg|gif|png))(\'|")?.*?>/i'; 下のようにimgタグが1行づつ並んでいる場合は上手くいったのですが、連続して並んでいる場合は個々の、"<img～>"でマッチされませんでした。 ※URLは全てダミーです <img src="http://a.com/a/a.jpg"> <img width="10" src='http://b.com/b/b.gif' height="10"> <img width="10" height="10" src='http://c.com/c/c.png"> <img src=http://d.com/d/d.jpg> <img src="http://e.com/hogefuga/e.jpg"> 最終的にはsrc="～"のURLに応じて、画像をテキストリンクへ置換する、ということをしたいのですが、正規表現がよくわからず試行錯誤しています。 このような場合はどのような正規表現を書くべきなのでしょうか？ どうぞよろしくお願いします。
- ベストアンサー
- PHP
- ＨＰにのせられなくてこまっています＞＜
HPに載せる為に独学でＪａｖａスクリプトに挑戦したのですがうまくいきません。 希望 ・曜日ごとに画像・リンク・コメントが変わる。 ・曜日によって表示する画像の数が異なる。 ・同じ曜日でも画像ごとにリンク先が異なる。 一応自分で考えて作ったものを下にはっておきます。 <script language=javascript> <!-- var tag=new Array() tag[0]='<img src="5.GIF" width=28 height=22> <br>日曜日はおやすみ。'; tag[1]='<"img src="9.png","http://あ.jp"> <"img src=11.png","http://い.jp"><br> 月曜日'; tag[2]='<img src="k.jpg","http://う.jp/"> <img src="o.jpg","http://え.jp/"><br> 火曜日'; tag[3]='<"img src="96.png","http://お.jp"> <"img src="87.png","http://か.jp"><br> 水曜日'; tag[4]='<"img src="9.png","http://き.jp"><br> 木曜日'; tag[5]='<img src="3.png""http://く.jp/"> <"img src="15.png","http://け.jp"><br> 金曜日'; tag[6]='<img src="10.GIF" width=28 height=22>土曜日'; var d=new Date();d=d.getDay() document.write(tag[d]) //--> </script> 製作しているサイトに締切りがあるため早めに解決方法が知りたいです。 ご指摘・アドバイス・回答お待ちしています。
- 締切済み
- JavaScript
- 携帯コンテンツ イメージタグについて
はじめまして。お詳しい方がいらっしゃいましたらお教えください。 わたくしは一通りサイトが作れる程度のスキルの者です。 現在、個人で携帯コンテンツを作ろうといろいろいじっているのですが、画像の表示のことで、とある制作系のサイトを見たときにこんな方法でi-mode、ezweb、j-skyどれでも画像が見れた、ということが書いてありました。 （すみません。どこのサイトだったか見失いました。） それはタグ属性を重複させるというものだったのですが、果たして問題はないのでしょうか？ 例えばイメージタグの部分を <img src="○○○.gif" src="○○○.png" width="○○" height="○○"> このようにしておけば、i-modeやezwebはgifを拾い、j-skyはpngを拾うというものでした。 テストでやってみたらシュミレーターではちゃんと見れたのですが、実際問題はないのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
ありがとうございました。 actionでは なくMOTIONだったのですね。 記憶違いでした＾＾；