質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1067閲覧

div要素のブロックを上下にふわふわさせながら、横方向に無限にスクロールさせるアニメーションを作りたい

YuriY

総合スコア33

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/03/30 03:53

編集2020/03/30 04:33

div要素のブロック複数をランダムで配置させて、個々のブロックを上下にふわふわさせながら、横方向に無限にスクロールさせるアニメーションを作りたいです。

class=fuwafuwa
に、ふわふわするアニメーションと、ループ用のアニメーションを,でつなげて記述すると後ろのloopしか動作しません。

上下に動く動作と横に移動する動作を同時にさせる方法がわからず困っています。

<div class="logo"> <div class="fuwafuwa1"></div> </div> <div class="logo"> <div class="fuwafuwa2"></div> </div> <div class="logo"> <div class="fuwafuwa3"></div> </div> .fuwafuwa1 { -webkit-animation:fuwafuwa1 3s infinite linear alternate, loop 50s -25s linear infinite; animation:fuwafuwa1 3s infinite linear alternate, loop 50s -25s linear infinite; } .fuwafuwa2 { -webkit-animation:fuwafuwa2 2s infinite linear alternate, loop 50s -25s linear infinite; animation:fuwafuwa2 2s infinite linear alternate, loop 50s -25s linear infinite; } .fuwafuwa3 { -webkit-animation:fuwafuwa3 1s infinite linear alternate; animation:fuwafuwa3 1s infinite linear alternate; } .loop { -webkit-animation: loop 50s -25s linear infinite; animation: loop 50s -25s linear infinite; } @-webkit-keyframes fuwafuwa1 { 0% {-webkit-transform:translate(0, 0) rotate(0deg);} 50% {-webkit-transform:translate(0, -5px) rotate(0deg);} 100% {-webkit-transform:translate(0, 0)rotate(0deg);} } @keyframes fuwafuwa1 { 0% {transform:translate(0, 0) rotate(0deg);} 50% {transform:translate(0, -10px) rotate(0deg);} 100% {transform:translate(0, 0)rotate(0deg);} } @-webkit-keyframes fuwafuwa2 { 0% {-webkit-transform:translate(0, 0) rotate(0deg);} 50% {-webkit-transform:translate(0, 5px) rotate(0deg);} 100% {-webkit-transform:translate(0, 0)rotate(0deg);} } @keyframes fuwafuwa2 { 0% {transform:translate(0, 0) rotate(0deg);} 50% {transform:translate(0, 10px) rotate(0deg);} 100% {transform:translate(0, 0)rotate(0deg);} } @-webkit-keyframes fuwafuwa3 { 0% {-webkit-transform:translate(0, 0) rotate(0deg);} 50% {-webkit-transform:translate(0, 3px) rotate(0deg);} 100% {-webkit-transform:translate(0, 0)rotate(0deg);} } @keyframes fuwafuwa3 { 0% {transform:translate(0, 0) rotate(0deg);} 50% {transform:translate(0, 6px) rotate(0deg);} 100% {transform:translate(0, 0)rotate(0deg);} } @keyframes loop { 0% { transform: translateX(100%); } to { transform: translateX(-100%); } }
// 素材のランダム配置 function randomImages(id) { // 関数の引数に設定したid要素を変数に代入 var box = $(id); // 画像配列 var imageList = [ 's01', 's02', 's03', ]; var width = window.innerWidth; var height = window.innerHeight; // 配列の数だけ繰り返し処理 for ( var i=0; i<imageList.length; i++) { // 縦横軸用の乱数生成 var x = width * (Math.floor(Math.random() * 100) / 100); // 画像位置 top:x var y = height * (Math.floor(Math.random() * 100) / 100); // 画像位置 left:y var w = Math.floor(Math.random() * 100) + 90; // 画像サイズwidth ランダム値に100px加算 var f = Math.floor(Math.random() * 3) + 1; // fuwafuwa randomu // sp if (matchMedia('(max-width: 960px) and (orientation: portrait)').matches) { // ウィンドウサイズが960px以下かつ縦向きのとき w = w * 0.7; } // box要素にimgタグを追加(乱数を代入した変数をポジションに設定) box.append('<div class="logo" style="top:'+y+'px; left:'+x+'px;"><img src="/img/sdgs/'+imageList[i]+'.svg" class="pc-home-img fuwafuwa'+f+'" alt="" style="width:'+w+'px;"></div>'); } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/03/30 04:02

「ふわふわ」は3のイメージですか? 「無限ループ」とはどうするのでしょうか?
YuriY

2020/03/30 04:36

質問ありがとうございます。 実際には fuwafuwa1,fuwafuwa2,fuwafuwa3 それぞれふわふわぐあいを変えたCSS設定があって ランダムで付与するようにしています。 1・2と3で記述が異なっているのは実験で、書き方を変えて動くか見ているからでした。 無限ループは https://qiita.com/4cres/items/8ee3306a15f1d99b976f 上記のページを参考に、 @keyframes loop { 0% { transform: translateX(100%); } to { transform: translateX(-100%); } } をそれぞれ付与すればいいのではないかと考えた次第です。
yambejp

2020/03/30 07:34

jsでもいいんですよね? ふわふわはsinカーブとか使っていいですか?
YuriY

2020/03/30 07:48

ありがとうございます。 jsで問題ありません。
guest

回答1

0

ベストアンサー

こんな感じでどうでしょうか?

投稿2020/03/30 08:17

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/03/30 08:18

//html+css <style> .fuwa{ position:absolute; } </style> <div id="hoge" class="fuwa">hoge</div> <div id="fuga" class="fuwa">fuga</div> <div id="piyo" class="fuwa">piyo</div>
yambejp

2020/03/30 08:19

//js window.addEventListener('DOMContentLoaded', ()=>{ const speed=50; const winW=document.querySelector('body').offsetWidth; const hoge={ dom:document.querySelector('#hoge'), height:30, top:20, width:document.querySelector('#hoge').offsetWidth, left:0, add:10, }; const fuga={ dom:document.querySelector('#fuga'), height:50, top:70, width:document.querySelector('#fuga').offsetWidth, left:0, add:18, }; const piyo={ dom:document.querySelector('#piyo'), height:80, top:100, width:document.querySelector('#piyo').offsetWidth, left:0, add:23, }; var timerId=setInterval(()=>{ [hoge,fuga,piyo].forEach(x=>{ x.dom.style.left=x.left; x.dom.style.top=Math.sin(x.left/x.add)*x.height+x.top; x.left+=x.add; if(x.left>winW-x.width) x.left=0; }); },speed); });
YuriY

2020/03/31 03:07

ありがとうございます! 解決いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問