画面幅に合わせて円が水平に行き来するものを作りたいです。
https://lab.sonicmoov.com/markup/css/css-animati …
のサイトの1番目
クネクネ動く CSS loading
を元に
@keyframes rightの数値を100%にしてみたのですが、上手く行きませんでした。
どのように設定すれば画面幅に合わせて移動してくれますでしょうか?
こちらの赤い玉も水平方向に画面いっぱいで行き来出来ればと色々いじってみたのですが、答えが分かりませんでした。
https://tech.arms-soft.co.jp/entry/2019/11/13/09 …
どうかどちらかでもご教示いただければと思います。
html
CSS
No.2ベストアンサー
- 回答日時:
>・・・・また画面幅に収まらず動いて・・・・・・・・・・
translate(49vw);
及び
translate(-49vw);
の49を好きなように弄ったら良いでしょう。
こちらもご参考に↓
http://www.tohoho-web.com/css/prop/transform.htm
No.1
- 回答日時:
rakiduta1さん
>・・・・どのように設定すれば・・・・・・・・・・
ご参考に↓
【クネクネ動く】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
background: #000000;
}
.container {
width: 200px;
height: 100px;
padding-top: 100px;
margin: 0 auto;
}
.ball {
width: 10px;
height: 10px;
margin: 10px auto;
border-radius: 50px;
}
.ball:nth-child(1) {
background: #ffffff;
animation: right 1s infinite ease-in-out;
}
.ball:nth-child(2) {
background: #ffffff;
animation: left 1.1s infinite ease-in-out;
}
.ball:nth-child(3) {
background: #ffffff;
animation: right 1.05s infinite ease-in-out;
}
.ball:nth-child(4) {
background: #ffffff;
animation: left 1.15s infinite ease-in-out;
}
.ball:nth-child(5) {
background: #ffffff;
animation: right 1.1s infinite ease-in-out;
}
.ball:nth-child(6) {
background: #ffffff;
animation: left 1.05s infinite ease-in-out;
}
.ball:nth-child(7) {
background: #ffffff;
animation: right 1s infinite ease-in-out;
}
@-webkit-keyframes right {
0% {
-webkit-transform: translate(-49vw);
}
50% {
-webkit-transform: translate(49vw);
}
100% {
-webkit-transform: translate(-49vw);
}
}
@-webkit-keyframes left {
0% {
-webkit-transform: translate(49vw);
}
50% {
-webkit-transform: translate(-49vw);
}
100% {
-webkit-transform: translate(49vw);
}
}
@-moz-keyframes right {
0% {
-moz-transform: translate(-49vw);
}
50% {
-moz-transform: translate(49vw);
}
100% {
-moz-transform: translate(-49vw);
}
}
@-moz-keyframes left {
0% {
-moz-transform: translate(49vw);
}
50% {
-moz-transform: translate(-49vw);
}
100% {
-moz-transform: translate(49vw);
}
}
@keyframes right {
0% {
transform: translate(-49vw);
}
50% {
transform: translate(49vw);
}
100% {
transform: translate(-49vw);
}
}
@keyframes left {
0% {
transform: translate(49vw);
}
50% {
transform: translate(-49vw);
}
100% {
transform: translate(49vw);
}
}
</style>
</head>
<body>
<div class="container">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</body>
</html>
【赤い玉】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
canvas{
background-color:#f1f1f1;
}
</style>
</head>
<body>
<canvas id="canvas" width="560" height="320"></canvas>
<script>
var canvas = document.getElementById('canvas');
//canvasに対応しているブラウザのみ実行する
if (canvas.getContext){
//描画を有効にする
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var count = 0;
var up = false;
function render() {
// Canvas全体をクリア
ctx.clearRect(0, 0, w, h);
// 要素を描画する
ctx.beginPath();
ctx.arc( 50 + 2.1 * count, 50 + count, 50, 0, Math.PI*2, false);
ctx.fill();
ctx.fillStyle = 'rgb(204, 0, 0)';
// 移動と方向の切り替え
if(!up){
count++;
if(count === 220){
up = true;
}
}else{
count--;
if(count === 0 ){
up = false;
}
}
}
//繰り返す
setInterval(render, 50);
}
</script>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画面に表示したらアニメーションを開始したい 3 2023/01/13 15:38
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- HTML・CSS 横幅固定の方法 1 2022/12/03 22:42
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- HTML・CSS Chrome のキャッシュについて 3 2022/05/26 07:50
- JavaScript jQueryローディングアニメーションのコードの以下のURL内参考サイトで提示されている 3 2023/07/03 18:29
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【CSS】floatで左右に並べた...
-
divのheight指定で画面一杯に表...
-
クリッカブルマップとインライ...
-
【CSSハック】アンカーポイント...
-
css固定したフッターが本文と重...
-
CSSでdivの縦幅を指定する方法
-
htmlのstyleのposition:relativ...
-
HTMLですCSSです 画像のように...
-
文字を固定したいのですが…
-
HTMLですCSSです この画像のよ...
-
TABLEの高さを固定したいのですが…
-
ロールオーバーで画像拡大、z-i...
-
YES or NO形式で進んで行く、タ...
-
3点リーダーの作り方
-
大分類・中分類・小分類
-
positionのrelativeとabsolute...
-
Flickity で画像にリンクを貼る...
-
textareaで入力した文字を改行...
-
CSS <div>の入れ子が反映さ...
-
MAX関数を使ってからLEFT JOIN...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Ctrl+F(検索)の窓を出したいの...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
HTMLですCSSです この画像のよ...
-
css固定したフッターが本文と重...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
文字を固定したいのですが…
-
スタイルシートで画面を上下に...
-
チェックボックスの背景色って...
-
フッターの下に隙間ができてしまう
-
文字をクリックしたら別の文字...
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
CSSでdivのheightを動的に
-
★★★フッター最下部固定/スクロ...
-
離れた場所にマウスオーバーで...
-
htmlのstyleのposition:relativ...
おすすめ情報
ご回答ありがとござます。
上のCSSのみのものの記述通りで思うように動きました。
そして、さらになのですが、ここから
玉を大きくして、4つぐらいを同じ高さの位置で違う速度で揺らしたいと思っています。
まず2つを同じ高さの位置で、違う速度で移動させようと思い、次のように設定しました。
.ball {
width: 300px;
height: 300px;
margin: 10px auto;
border-radius: 50px;
animation: right 1.1s infinite ease-in-out;
.ball2 {
width: 300px;
height: 300px;
margin: 10px auto;
border-radius: 50px;
animation: right 5s infinite ease-in-out;
}
つづきます
こちら補足のつづきです
<div class="container">
<div class="ball"> <div class="ball2"></div></div>
</div>
これで設定しました。
そうすると思うように動いてはくれたのですが、また画面幅に収まらず動いてしまいます。
どのようにいじれば、どちらの玉も
画面幅に収まってくれますでしょうか?