Webページの背景色(ページ全体の背景色)を30秒ごとに特定の色に変更(フェードトランジション)するためのコードを教えてください。簡単ですか? cssはそれをより簡単にするでしょうね?
インターネットで検索したところ、希望とは異なる勾配のみが見つかりました。前もって感謝します。例としてcodepenとjsfiffleを検索しましたが、それほど単純なものはありませんでした:/
例:ページを閲覧しているときに、背景色を青から緑に、次にオレンジに、さらに青などに変更したいと思います... :)
ボグダンの答えを完成させるためのjQueryアプローチは次の3つです:selector
(例: ".container"または "div")、colors
(色を切り替える配列)およびtime
(bgdの色が変化する頻度を制御します)。 3秒に設定しました(3000
)これにより、実際の動作を簡単に確認できますが、30000(30秒)に増やすことができます。
jQuery(function ($) {
function changeColor(selector, colors, time) {
/* Params:
* selector: string,
* colors: array of color strings,
* every: integer (in mili-seconds)
*/
var curCol = 0,
timer = setInterval(function () {
if (curCol === colors.length) curCol = 0;
$(selector).css("background-color", colors[curCol]);
curCol++;
}, time);
}
$(window).load(function () {
changeColor(".container", ["green", "yellow", "blue", "red"], 3000);
});
});
.container {
background-color: red;
height:500px;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-khtml-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container"></div>
CSS3アニメーションを使用して、JavaScriptなしでこれを行うこともできます。
html,
body {
height: 100%;
}
body {
-webkit-animation: background 5s cubic-bezier(1,0,0,1) infinite;
animation: background 5s cubic-bezier(1,0,0,1) infinite;
}
@-webkit-keyframes background {
0% { background-color: #f99; }
33% { background-color: #9f9; }
67% { background-color: #99f; }
100% { background-color: #f99; }
}
@keyframes background {
0% { background-color: #f99; }
33% { background-color: #9f9; }
67% { background-color: #99f; }
100% { background-color: #f99; }
}
this fiddle のようなもの
CSS:
body {
background: blue; /* Initial background */
transition: background .5s; /* .5s how long transitions shoould take */
}
JavaScript:
var colors = ['green', 'orange', 'blue']; // Define Your colors here, can be html name of color, hex, rgb or anything what You can use in CSS
var active = 0;
setInterval(function(){
document.querySelector('body').style.background = colors[active];
active++;
if (active == colors.length) active = 0;
}, 30000);