• 締切済み

記事にある透明のボックスと同じ様にしたいです

amebablogハムスター恋愛andアタシの日記のcss3D回転キューブアメーバピック広告透明キューブボックスにテキストを透明に配置して、シャドウに広告の画像を配置して左下から右にカーブしながら大きくなりながら上がってきてスマホ画面の左にボックスの角でポンッと軽くつつかせてクリックするとボックスが止まってバラバラになって跳ね返る様に右にカーブしながら小さくなりながら左下にボックスの角で着地しています 難易度はどれぐらいですか? なかなか出来ません 作り方を教えて下さい https://ameblo.jp/asuka1395000

みんなの回答

回答No.1

あなたが実現しようとしている透明な3D回転キューブエフェクトは、CSS3の変形(transform)とアニメーションを用いて作成することが可能です。しかし、指定されたアニメーションに関わる具体的なCSSコードやJavaScriptの実装はかなり複雑であり、これには一定のHTML、CSS、JavaScriptの知識が必要です。難易度は中級から上級者レベルと言えるでしょう。 基本的な手順としては、まずHTMLでキューブの各面を持つ要素を作成します。次にCSSで3D空間のパースペクティブを定義し、各面の位置や透明度を指定します。その後、CSSでキーフレームアニメーションを作成し、キューブが動く様子を定義します。JavaScriptでは、クリックイベントを検出してアニメーションを制御する処理を記述します。 以下に基礎的な概念を示しますが、具体的なコードは記述の範囲を超えます。 1. HTMLで構造を作成: ```html <div class="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face left"></div> <div class="face right"></div> <div class="face top"></div> <div class="face bottom"></div> </div> ``` 2. CSSでキューブをデザイン: ```css .cube { position: relative; transform-style: preserve-3d; animation: rotateCube 5s infinite; } .face { position: absolute; opacity: 0.5; /* 透明度 */ /* 各面の大きさと位置を指定 */ } /* キーフレームアニメーションの定義 */ @keyframes rotateCube { /* アニメーションの中間状態を定義 */ } ``` 3. JavaScriptでインタラクションを作成: ```javascript const cube = document.querySelector('.cube'); cube.addEventListener('click', () => { // クリック時の動作を定義 }); ``` あなたがこれに取り組む場合、まずはCSSの3Dトランスフォームに関する入門記事やチュートリアルを読み、基礎的な理解を深める必要があります。次に、アニメーションやJavascriptのイベントハンドリングについて学びます。複雑な動きをスムーズに作成するためには、たくさんの試行錯誤と実験が必要です。 オンラインのリソースやコミュニティへの参加も大変役立ちます。Stack OverflowやCSS-Tricks、MDN Web Docsなど、Web開発に関連する資料やフォーラムでは、このようなエフェクトについての具体的な質問や解決策を見つけることができるでしょう。 ------ こちらの回答はAIエージェント「あい」による自動投稿です。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/

toda4503
質問者

お礼

回答有り難うございました。詳しく教えてくれて有り難うございました。ぜひ試してみたいと思います。なかなか難しいですね。頑張りたいと思います

Powered by GRATICA
toda4503
質問者

補足

詳しく教えてくれて有り難うございました また難しくなっていました。 同じ様にするには大変ですね 計算は必要ありませんか? https://ameblo.jp/asuka1395000/entry-12853739568.html

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • Indesignのドロップシャドウ効果の不具合

    Indesign CS4を使っています。 1ページ上にPhotoshopクリッピングパスで切り抜いた画像を複数配置し、ドロップシャドウの効果をつけました。 通常切り抜いた形でシャドウが付くはずなのですが、何点かは画像ボックスの角版にシャドウが付いてしまいます。 パスに切れ目はないようですし、原因がわかりません。 どなたか対処法がお分かりになる方、よろしくお願いいたします。

  • 』型のリビングの角

    長方形のリビングの一部を増築して』型のリビングを作ります。 リビングの形を数字のテンキーで表すと、「7」を左上の角にする4×4の正方形から、「3」「.」「ennter」を抜いた形となります。 このとき、「6」「5」「2」で囲まれる270度の角に何か置きたいのですが、いいアイディアがあったらお聞かせ下さい。この角、2×4なので、20センチほどのコアが残るのですが、ここをうまく処理したいのです。 270度の家具ってなかなかないもので・・・ 「9」「-」の上部分の間に台所との通路があり、近くに円形のテーブルセットがあります。 「7」と「8」の間にドアがあり、その左側がソファです。 「4」の左下に小さなしきりがあるのでそこにソファ方面に向けてテレビがあります。 「1」の左側にピアノです。 掃き出し窓が、「0」「,」の下、「2」「,」の右、「6」「+」の下の3箇所あり、欠けている部分「3」「.」「ennter」にウッドデッキが来ます。 (わかりにくい説明でごめんなさい、テンキーの配置が機種によって異なっていたらどうしよう・・・) 何かいいお考えがあればお聞かせ下さい。

  • InDesignのスクリプトについて

    InDesignのスクリプトで自動化したいことがあり、試行錯誤しているのですが行き詰まってしまいました。アドバイスをいただけましたら幸いです。 【環境】 OS:Mac OS X 10.5.8 ソフト:InDesign CS3 ExtendScript Toolkit 2を使って、JavaScriptで作成 【したいこと】 ・タテ310mm×ヨコ225mmの用紙に、タテ148mm×ヨコ105mmで作成したpdfデータ(複数ページ)を全ページ4面付(1ページにpdf1ページ目、2ページにpdf2ページ目…をそれぞれ4枚ずつ配置)したい ・配置場所はそれぞれの4角(右と左の画像間は15mm、上と下の画像間は14mm) 【今の状態】 pdfを呼び出す→指定サイズの新規ドキュメントを作る→左上にボックスをつくり、画像中央配置 filename = File.openDialog("Select Pdf"); if(filename) { startNum = 1; endNum = parseInt(prompt("終了ページ","終了ページを入力")); pageObj = app.documents.add(); pageObj.documentPreferences.pageWidth = "225mm"; pageObj.documentPreferences.pageHeight = "310mm"; for(i=startNum; i<=endNum; i++) { app.pdfPlacePreferences.pageNumber = i; txtObj = pageObj.textFrames.add(); txtObj.visibleBounds = ["0mm","0mm","148mm","105mm"]; txtObj.place(filename); txtObj.fit(FitOptions.frameToContent); pageObj = app.activeDocument.pages.add(); } } これを4面配置できるようにしたく、ボックスを4つ配置したのですが、これだと最後のボックスにしかpdfが配置されませんでした。 boxdata = [ [0,0,105,148], [0,120,225,148], [162,0,105,310], [162,120,225,310] ]; filename = File.openDialog("Select Pdf"); if(filename) { pageObj = app.documents.add(); pageObj.documentPreferences.pageWidth = "225mm"; pageObj.documentPreferences.pageHeight = "310mm"; for(i=0; i<boxdata.length; i++) { y1 = boxdata[i][0]+"mm"; x1 = boxdata[i][1]+"mm"; x2 = boxdata[i][2]+"mm"; y2 = boxdata[i][3]+"mm"; txtObj = pageObj.textFrames.add(); txtObj.visibleBounds = [y1,x1,y2,x2]; } txtObj.place(filename); txtObj.fit(FitOptions.frameToContent); } ボックスを4つ作るより、繰り返し複製したほうがいいのかともおもいましたが、書き方がわかりませんでした。 改良スクリプトと、できましたら今後の勉強のために、スクリプトの解説もいただけますと嬉しいです。よろしくお願いいたします。

  • wordpressでライトボックスで記事表示

    wordpressでライトボックスで記事表示 http://kidhair.com/short_style.htmlのページのように、画像一覧ページがあり、画像をクリックするとライトボックスで記事ページを表示することは可能でしょうか。 wordpressのバージョンは3.0.1を使っています。 宜しくお願い致します。

  • seesaaの記事…同じ記事ばかりがでる

    ブログを開設して5年ほど経ち、慣れたつもりでした。 「他のブログは解からなくても、seesaaなら解かる」と思い上がり、便利さにアグラをかいていました。 しかし、昨日、模様替えをしようとし、(デザインの項目にある)テンプレートとコンテンツ中の順番のみを変えたところ、どの記事をクリックしても同じ記事(最新の記事)しか表示されなくなりました。 どのようにすれば、記事をそれぞれ見られるようになるのでしょうか? ご存知の方、どうかお教え下さい。 ちなみに、seesaaにもう2つ持っていますが、それらには異常はありません。

  • 記事について

    テレビや新聞などを見て 疑問に思ったのですが、(初歩的な内容ですが。) よく、 ○○(名前)が 横領をした疑いがあると見て、捜査する方針。しかし 本人は容疑を 否認している。 などの記事を見るのですが、否認している のに 新聞やテレビに出すというのは ○○さんは逮捕されてしまっているの か、それとも事情を警察に聞かれている状態なのかが、分かりません。 報道の自由から言えば、事情を聞かれている(逮捕はされていなくても) 段階 でも 新聞などに記事にしても良いということなんでしょうね。 では もし逮捕されてないのに テレビや新聞に載せられて、無実だったらど うなってしまうのでしょうか

  • おもしろ記事にて

    (1)「楽観シナリオ」 ――アベノミクスが成功し、経済成長がふたたび始まる。 (2)「悲観シナリオ」 ――金融緩和は効果がなく、円高と低金利のデフレ不況がこれからも続く。 (3)「破滅シナリオ」 ――国債の暴落(金利の急騰)と高インフレで財政は破綻し、金融危機が起きる。 私は3番..こちらな方だと思います 後2年で成果上げるには無理だろうと それに架空なことにのせやれる国民は.......? 期待して政権がコケたこともありますからね その記事こちら http://news.goo.ne.jp/article/president/bizskills/president_9452.html

  • この記事についてどう思いますか?

    100字くらいで感想を! http://headlines.yahoo.co.jp/hl?a=20110424-00000005-mai-soci

  • この記事についてどう思いますか?

    100字くらいで感想を! http://mainichi.jp/area/aichi/news/20110419ddlk23040242000c.html

  • この記事どう思いますか?

    http://sankei.jp.msn.com/region/news/110630/stm11063016400004-n1.htm 雇用崩壊、就職難民、膨大国債、国民原資震災予算、震災難民発生路頭混迷 さらにこの四半世紀不況の最中、 こんなの公務員といえます? 認められないでしょう? 消費増税しても使い道目的優先順位はまたこれが一番でしょ? こんなことを決める者、異議も唱えず甘んじ黙って受け取る者、こんな者達は日本国民に対しての公務員ではない。 事実上偽り公務擬きに組する者をリコールするべし。

このQ&Aのポイント
  • 質問者は、インクが残っているのに、イエローとシアンのインクが出ておらず、カラープリントができない問題に直面しています。
  • さらに、質問者はカラープリントのための小さなパイプにもインクが供給されていないことを確認しています。
  • この件について、解決策を教えてください。
回答を見る