0

私は Web プログラミングの世界では初心者ですが、ページの読み込み時に白黒バージョンの写真から通常のカラー バージョンの写真に移行する Web ページを開発しようとしています。

色々と試した結果、カラー版を瞬時に出すのが精一杯でした。また、JQuery を少しいじってみましたが、何らかの理由で、ページを正しくロードできませんでした。通常版への移行ではなく、白黒版のままでした。

HTML は次のとおりです。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<link href='http://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'>
<title>UCLA Wushu - Home</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
        $("html").animate({'background' : 'url(images/home_background.jpg) no-repeat center center fixed'}, 'slow');
});
</script>

</head>
<body>
<div id="container">
<div id="middleBar">
<strong>
<a href="index.html">My Portal</a>
</strong>
<div id="enter"><a href="announcements.html">Enter</a></div>
</div>
</div>
</body>
</html>

関連する CSS は次のとおりです (背景画像を効果的にブラウザーに引き伸ばすために、コピーして貼り付けました)。

@charset "UTF-8";
/* CSS Document */
html { 
  background: url(images/home_background_bw.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

このフォーマットを使って白黒からカラーにスムーズに移行する方法があれば教えてください。ありがとう ：）

4

3 に答える 3

0

あなたが何を望んでいるのか理解できたら、例えば使ってみてください

-webkit-transition: background-color 2s linear;
-moz-transition: background-color 2s linear;
-ms-transition: background-color 2s linear;
-o-transition: background-color 2s linear;
transition: background-color 2s linear;

そのように: http://jsfiddle.net/guillaumek/CcNHv/

于 2013-08-13T08:32:45.540 に答える
0

彩度プラグインなどを使用しない最も簡単な解決策は、ボディタグの直後に色付きの画像と不透明度ゼロのdivを配置し、そのdivの不透明度を100％にアニメーション化することだと思います。

HTML の一部:

...
<title>UCLA Wushu - Home</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
        $("#colored-bg").animate({
           opacity: 100
        }, 'slow');
});
</script>

</head>
<body>
<div id="colored-bg"></div>
<div id="container">
<div id="middleBar">
...

CSS:

#colored-bg { 
  background: url(images/home_background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0;
  filter: ~"alpha(opacity=@{0})"; // IE
  // following will strecth the element from corner to corner
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
于 2013-08-13T08:28:27.310 に答える