👨🏾‍🏫 😄 👼🏼 CSS3とjavascriptを使用して日没を制御する ♉️ ⏹️ 😭

CSS3機能の簡単なデモと例を示します。この例は、border-radius、box-shadow、およびlinear-gradientプロパティに影響します。

頭

提案されたコードは、プロジェクトで使用する既成のソリューションではなく、デモとしてのみ考慮してください。ただし、適切に改良すれば、いくつかのタスクを実行できる可能性があります。

記事の全文を読むのが面倒な人のために、すぐに実際の例へのリンクを添付します。太陽は画面の周りを移動することができ、地平線に近づくと、日没の模倣が作成されます。太陽が地平線を完全に越えた後、星は空に浮かんでいます。

この例は、最新バージョンのIE9、Chrome 16、Opera 11.60、Firefox 8の最新バージョンでテストされました。奇妙なことに、私のマシンで最も速い例はIE9ブラウザーで動作し、Firefoxブラウザーでは少し悪化しました。 ChromeとOperaでは、移動時にフリーズが目立ちます。

体

最初は、空と土の色を滑らかに変化させるために、カラーアニメーションの類似物を使用したかったのですが、単純な例では、これが太陽を動かすときに非常に顕著なブレーキを引き起こすという事実は言うまでもなく、それは難しすぎることに気づきましたそのため、透明度が可変のオーバーラップブロックをいくつか使用しました。私の意見では、それは非常に現実的でしたが、私はデザイナーではなく、信頼できるプレロールの色を再現できません:)

空から始めましょう。それには3つのブロックが必要です。青のグラデーションのある昼間の空、赤のグラデーションのある夕焼け空、濃い青のグラデーションのある夜空です。すべてのグラデーションは、css3 linear-gradientプロパティを使用して実行されます。まず、ドキュメントの本文にブロックを定義しましょう。

<div id="sky"></div> <div id="sunsetSky"></div> <div id="nightSky"></div>

次に、空のスタイルを宣言します。私は、画面の高さと画面の全幅の60％の空の高さを使用することにしました。レイヤーを相互に適切に配置するために、z-indexプロパティを使用します。

 #sky { position: absolute; height: 60%; width: 100%; background: #004cf2; background: -moz-linear-gradient(top, #004cf2 0%, #00b7ea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004cf2), color-stop(100%,#00b7ea)); background: -webkit-linear-gradient(top, #004cf2 0%,#00b7ea 100%); background: -o-linear-gradient(top, #004cf2 0%,#00b7ea 100%); background: -ms-linear-gradient(top, #004cf2 0%,#00b7ea 100%); background: linear-gradient(top, #004cf2 0%,#00b7ea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004cf2', endColorstr='#00b7ea',GradientType=0 ); z-index: 1; } #sunsetSky { position: absolute; height: 60%; width: 100%; background: #1a4182; background: -moz-linear-gradient(top, #1a4182 0%, #ef6d56 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1a4182), color-stop(100%,#ef6d56)); background: -webkit-linear-gradient(top, #1a4182 0%,#ef6d56 100%); background: -o-linear-gradient(top, #1a4182 0%,#ef6d56 100%); background: -ms-linear-gradient(top, #1a4182 0%,#ef6d56 100%); background: linear-gradient(top, #1a4182 0%,#ef6d56 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a4182', endColorstr='#ef6d56',GradientType=0 ); opacity: 0; z-index: 2; } #nightSky { position: absolute; height: 60%; width: 100%; background: #060a21; background: -moz-linear-gradient(top, #060a21 0%, #0a1638 80%, #181f59 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#060a21), color-stop(80%,#0a1638), color-stop(100%,#181f59)); background: -webkit-linear-gradient(top, #060a21 0%,#0a1638 80%,#181f59 100%); background: -o-linear-gradient(top, #060a21 0%,#0a1638 80%,#181f59 100%); background: -ms-linear-gradient(top, #060a21 0%,#0a1638 80%,#181f59 100%); background: linear-gradient(top, #060a21 0%,#0a1638 80%,#181f59 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#060a21', endColorstr='#181f59',GradientType=0 ); opacity: 0; z-index: 3; }

背景として線形グラデーションを使用する方法の詳細については、こちらをご覧ください。グラデーションを生成するために、Colorzillaのサービスを使用しました。

次に、地球の表面で作業する必要があります。ここでは、昼と夜の表面には2ブロックで十分です。

 <div id="grass"></div> <div id="nightGrass"></div>

地球の表面は、画面の幅全体を占め、残りの部分は高さ（つまり、高さの40％）を空にします。以下にスタイルを添付します

 #grass { position: absolute; top: 60%; height: 40%; width: 100%; background: #42ab3f; z-index: 11; } #nightGrass { position: absolute; top: 60%; height: 40%; width: 100%; background: #000000; opacity: 0; z-index: 11; }

ここで、シーンの主役である太陽を作成する必要があります。太陽は絶対に配置する必要があります。合計で、前の例と同様に、日と日没に2つの太陽を使用します。ただし、この場合、日没時の太陽のオプションが昼間のオプションに埋め込まれ、同期動作が保証されます。

 <div id="sun"> <div id="sunsetSun"></div> </div>

 #sun { position: absolute; height: 100px; width: 100px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background: #eff866; box-shadow: 0 0 150px #eff866; z-index: 9; cursor: move; } #sunsetSun { height: 100%; width: 100%; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; background: #F9AD43; box-shadow: 0 0 150px #F9AD43; opacity: 0; }

私たちの太陽は、幅と高さが100ピクセルのブロックです。円を描くには、値が50px（ブロックの辺の長さの半分）のcss3 border-radiusプロパティを使用します。原則として、このプロパティは使いやすいですが、作業を容易にするために、このサービスを使用して必要なコードを生成できます。また、個々の角度に対して異なる程度のフィレットを示す必要がある場合にも、作業を容易にします。

太陽の周りの壮大なハローには、box-shadowプロパティを使用します。シンプルな生成のために、このサービスを使用できます。実際、他にも便利なcss3ジェネレーターがたくさんあります。

さあ、星を取りましょう。それらの作成は動的に行われるため、それらのスタイルを決定するだけです。

 .star { position: absolute; z-index: 5; background: #CEFFFA; height: 1px; width: 1px; opacity: 0; }

この段階では、ページのデザインに関する作業は完了したと見なすことができます。 javascriptを使用して対話性を実現するときです。システムの主要なコアはjQueryです。もちろん、それなしで実行できます。もう少しコードがあります。以下のコードの完全なリストを同封します。すべてが十分にコメントされているため、説明は必要ないと思います。

jQueryに加えて、 dom-dragライブラリを使用してドラッグアンドドロップを整理しました

 <script type="text/javascript"> $(function(){ // HTML   var sun = document.getElementById('sun'); // jQuery   var $sun = $(sun); //   var $sunsetSun = $('#sunsetSun'); //   var $sunsetSky = $('#sunsetSky'); //   var $nightSky = $('#nightSky'); //   var $grass = $('#grass'); //   var $nightGrass = $('#nightGrass'); //      Drag.init(sun); // "" 100     makeStars(100); //    (   Drag.init() ) $sun.css({ 'top': 20, 'left': 300 }); //       sun.onDrag = function(x, y){ //       var sunTop = $sun.css('top'); //      ,   var sunPosition = parseInt(sunTop) / (parseInt($sunsetSky.css('height')) / 100); //      ,   var sunAbsolutePosition = parseInt(sunTop) / ($(window).height() / 100); //     $sunsetSky.css('opacity', (Math.floor(sunPosition) / 100)); //     $sunsetSun.css('opacity', (Math.floor(sunPosition) / 100)); //     $nightGrass.css('opacity', (Math.floor(sunPosition) / 100)); // ,       60%     if (sunAbsolutePosition >= 40){ // ,         var start = $(window).height() / 100 * 40; // ,      ,        var end = $(window).height() / 100 * 65; //     start  end var pos = (parseInt(sunTop) - parseInt(start)) / ((parseInt(end) - parseInt(start)) / 100); //     $nightSky.css('opacity', pos / 100); //    $('.star').css('opacity', pos / 100); } //     60%    ,     else { $('.star').css('opacity', 0); } } //       start  end function range(start, end){ if ((start >= 0) && (end >= 0)){ return Math.round(Math.abs(start) + (Math.random() * (Math.abs(end) - Math.abs(start)))); } else if ((start <= 0) && (end <= 0)){ return 0 - (Math.round(Math.abs(start) + (Math.random() * (Math.abs(end) - Math.abs(start))))); } else{ return Math.round(((start) + Math.random() * (end - start))); } } //  count     function makeStars(count){ for (var i=0; i<=count; i++){ //  ,     var star = $(document.createElement('div')); //    star star.addClass('star'); //   DOM     body star.appendTo('body'); //   star.css({ //  -    0  60%    'top': range(0, parseInt($(window).height()) / 100 * 60), //   -    0     'left': range(0, $(window).width()) }); } } }); </script>

makeStars（）に渡す引数を変更することにより、星の数を変更できます。それらの増加はよりリアルになりますが、アニメーションの速度に大きく影響します。 habrakatの上のスクリーンショットでは、値500が使用されています。

実際には、これで終了することができます、私は要約したいと思います。多くの人は、このタスクのために、私のソリューションが穏やかに言えば最適ではないことに同意するでしょう。結局のところ、canvas、svg、silverlightがあります。ついにフラッシュ。これらの各ソリューションは、このタスクでより速く動作します。したがって、これは単なるデモンストレーションであり、楽しみのために作成されたものではありません。

参照資料

私の意見では、CSS3用の最高の線形勾配ジェネレーター

さまざまなCSS3スタイルジェネレーターの束

DnDを整理するためのJavascriptライブラリ

さて、例。

ご清聴ありがとうございました。皆様のご活躍をお祈りします）

CSS3とjavascriptを使用して日没を制御する

頭

体

参照資料

More articles: