- 締切済み
[cssアニメーションの実装方法について]
wadadanet-01の回答
- wadadanet-01
- ベストアンサー率0% (0/0)
このサイトはCSSアニメーションではなくJavascriptでのアニメーションです。 スキルとしてはHTML,CSS,Javascriptを学ぶ必要があります。 それとそのサイトはJavascriptのjQueryを使用しておりますので、jQueryも学ぶ必要があります。 学ぶと言ってもjQueryはJavascriptを便利にするもので記述方法を覚える感じですが。 もしそんなに勉強するのが、、、と思うなら最短ではHTML,CSS,CSSアニメーションを学んでもいいかもしれません ただデメリットとしてCSSアニメーションはブラウザの互換がマチマチでプロでも悩まされる代物です。 jQueryの参考サイト http://www.webopixel.net/javascript/507.html CSSアニメーション参考サイト http://unformedbuilding.com/articles/learn-about-css-animation/
関連するQ&A
- Android Live壁紙のアニメーション実装？
現在Live壁紙を制作しております。 ・背景画像のスクロール機能 ・アニメーション は実装できましたが、次のステップでつまづいています <実装方法> holder.lockCanvas(); (1)ここで、背景画像を canvasを使ってdrawBitmap しています (2)ここで、アニメーション画像を canvasを使ってdrawBitmap しています holder.jnlockCanvas(); <現状> 次のステップとして、Androidにはアニメーション機能として Alpha / Rotate / Translate / Scale / Set / があるようなので、このアニメーション機能を上記(2)の代わりに アニメーションとして実装させようとしています 現在、制作中のライブ壁紙にActivityクラスを実装し まず、ここのonCreate()の中で setContentView(R.layout.main) を読み込んで、そこにアニメーション画像を定義し その画像がclickされると、R.anim.alphaAnimation で定義した アニメーション動作をさせてみようとしております しかし、思うようにいきません。 R.layout.mainでのレイアウトは表示されず、壁紙アプリの画像しか 見えておりません <問題として考えている点> 背景画像はThreadで流動的に動いています その上にXMLで定義される Alpha / Rotate / ・・・・ のアニメーションは使用するのは無理なのではないか？ と考えています <質問> Live壁紙上で、 Alpha / Rotate / Translate / Scale / Set / アニメーションは実装可能でしょうか？ もし、可能であればその方法を教えていただけますでしょうか？ よろしくお願いします
- 締切済み
- その他（プログラミング・開発）
- プログラミングのアニメーション
https://t.co/VpeqP54YRT このサイトのアニメーションはhtml css bootstrapの知識を使って実装することはできますか？またどのようにすれば実装できますか？ またどのようにくぐればできますか？ 教えて欲しいです。よろしくお願いします
- ベストアンサー
- CSS
- cssでアニメーションgifを作動させる方法
初心者の者です。お世話になります。 いつもの様に困っております。ぜひ、お知恵をお貸しください。 h1の文字背面にアニメーションgif(1回表示)を表示させたいのですが、 現在は、h1にbackground: url(images/baranimation.gif) no-repeat;を入れております。 しかしIEでは、更新ごとにスタートしてくれるのですがFireFoxとgoogle chromeでは、更新やサイト内の他のページから戻っても再スタートしてくれません。 これを解決する方法がございましたらお願い申し上げます。 出来れば、h1 の背面に表示してくれる方法が知りたくお願い申し上げます。(CSSが機能しない携帯等でアニメーションは表示したくないのです。) http://coliss.com/articles/build-websites/operation/css/939.html や http://www.studiomame.com/mameblog/home/blog/0102flash/b080903.php の方法を少し試してみましたが、設定が悪いのかも知れませんが満足のいく結果が出来ませんでした。 文面もお粗末ですが、どうぞ、宜しくお願いいたします。
- 締切済み
- HTML
- ローディングアニメーションのロゴが消えないです。
ローディングアニメーションを入れたいと思い、調べて、以下のサイトに辿り着いて、 サイトの一番下から２番目にある、「**跳ねるうさぎちゃん**」とういタイトルのローディングアニメーションのC◆DEOENで動く、HTML,css,jsの全てコピーして、起動してみたのですが、 サイトが読み込めれると、グレー色の背景はちゃんと消えるのですが、その他のロゴ（ウサギや卵、横線）のロゴ等が **消えずに動き続けてしまいます。** このロゴもちゃんと消えるようにしたいです。 多分javascriptの部分だと思うのですが、どう書いたらよいでしょうか？ 回答よろしくお願いいたします。 [一生見てられる...カワイすぎるローディングをCSSコピペで実装！ 【 アニメーション 】 - デシノン https://deshinon.com/2019/03/03/kawaii-loading-kopipe/ 跳ねるうさぎちゃん
- ベストアンサー
- JavaScript
- フラワーシャワーのようなパララックスの実装について
wordpressでウェブサイトを作っています。 htmlやcssを独学で勉強しながら、アニメーション等を実装していて https://demo.kallyas.net/wedding2/のようにスクロールすると花がでてくるようなパララックスを作りたいのですが、デベロッパーツールを見てもどのように実装しているかが解りません、、、 こちらのサイトでは要素の上に被るように花が出てくるのですが、どのようなhtmlとcssを実装したら良いですか？ ※こちらのサイトのテーマは使用していません。。。 ご教授頂けますと幸いです。
- 締切済み
- HTML
- CSSで作図とアニメーションができますか？
[Q] CSSで作図とアニメーションができますか？ CSSのスキルアップのための問題を作りました。 CSSでツートーンの六角形を作ります。 1.六角形にマウスダウンすると、右回りに一回転します。 2.マウスアップすると、六角形が元の位置に戻ります。 3.アニメーションで回転します。 [仕様] 1.ＣＳＳだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを使わずに実現させる 5.配色はつぎのとおり gray, black CSSだけでこのような作図できますか？ CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="rokkaku"></div>
- 締切済み
- CSS
- ａｕ待ち受け画面をアニメーションにしたい
ａｕの待ち受け画面のアニメーションを作りたいと思っています。アニメーションでなくても自動的に画像の切り替えができてもかまいません。 方法ご存知のかたおられましたらお願いします。
- ベストアンサー
- その他（スマートフォン・携帯・タブレット）
- CSSで作図とアニメーション (6)
[Q] CSSで作図とアニメーションができますか？ CSSのスキルアップのための問題を作りました。 [課題] CSSで、下辺が水平で頂点が上にある正三角形を作ります。 一辺が100pxで緑色の正三角形、頂点に「Ａ」と表示させておきます。 その外接円を灰色で、その中心を赤色で描きます。 （添付図参照） [動作] 1.円にホバーした時、 ・正三角形が青色に変わる ・３秒後、右回りにアニメーションで一回転する 2.マウスアウトすると、アニメーションで元の状態に戻る [仕様] 1.ＣＳＳだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを使わずに実現させる CSSだけでこのような作図と動作ができますか？ CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="sankaku"></div>
- 締切済み
- CSS
- CSSで作図とアニメーション (7)
[Q] CSSで作図とアニメーションができますか？ CSSのスキルアップのための問題を作りました。 [課題] チェックボックスを１つ用意しておきます。 CSSで、下辺が水平で頂点が上にある正三角形を作ります。 チェックインしたら、右回転して茶色の水平線上で停止します。 （添付図参照） [動作] 1.チェックインすると、アニメーションで正三角形が右回転します。 ・回転軸は、右下の頂点です。(点Ｃ) ・右回転は、茶色の水平線上で停止します。 2.チェックアウトすると、アニメーションで元の状態に戻ります。 3.チェックボックスのラベルについて ・アニメーション開始時は「正三角形を転がす」 ・アニメーション終了時には「元に戻る」 [仕様] 1.ＣＳＳだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない CSSだけでこのような作図と動作ができますか？ CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> .container { position: relative; width: 220px; height: 160px; background-color: skyblue; border-bottom: 2px solid brown; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <input id="task" type="checkbox"> <label for="task">正三角形を転がす</label> <div class="container"> <div class="sankaku"></div> </div>
- 締切済み
- CSS
- コープスブライドはフルCGアニメーションですか？
こんにちは！ ティムバートンのコープスブライドは、フルCGのアニメーションだと思っていたのですが、ラジオやテレビなどでストップモーションアニメと言っていました。 基本的にアニメーションはみんなストップモーションかなとも思うのですが、「ナイトメアビフォアクリスマスのようなストップモーションアニメ」と紹介されているのを聞くと、フルCGアニメーションはストップモーションにあてはまるのかしら？と思い、これはフルCGではないのかしら？一部実写？と思ったので、ご存知の方がいらしたら教えて下さい。HPも見たのですが、よくわからないのでお願い致します。
- ベストアンサー
- 洋画