最近完了した30日間のLearn Jqueryコースとマトリックスコード形式の画像の生成に関する記事に触発されて、私はjsをベースボードのすぐ上のレベルにアップグレードし、招待状を獲得して、何か面白いことをしようと決心しました。欲望から地下のように、ハブラーのような洗練されたコミュニティに。
したがって、実験的なタイトルは、私のお気に入りの「スターウォーズ」シリーズの紹介タイトルに選ばれました。 インターネットサーフィンの過程で、他の誰かのベストプラクティスを求めて、最初は何も見つかりませんでした。 そうでなければ、アイデアはそれが始まる前に終わるでしょう。
アニメーションを作成するために、Jquery（この作業全体の前提条件のために驚くことではありません）と素晴らしいCSS3 transform3dプロパティが選択されました。 それらは、クロスブラウザマッチングのために松葉杖を探してグーグル検索ラインに長く失敗したにもかかわらず、選ばれました。 1つのエンジン（webkit）のフレームワーク内であっても不可能だった場合でも、異なるブラウザーで同一の作業を実現します。 Chromeは、画面の下端にキャプションを表示することを完全に拒否し、Safariはすべてを正しく表示する一方で、アニメーションの途中でのみキャプションを表示します。 Firefoxは著しく遅くなりますが、アニメーションも正しく表示されます。
すぐに予約しますが、さまざまな許可に合わせてカスタマイズする時間も希望もありませんでした。 したがって、すべてが私の作業モニター1600x900で計算されました。 何かが間違った場所に飛び出しても、私を責めないでください。
htmlマークアップから始めましょう
<!DOCTYPE html> <html> <head> <title>Star Wars Opening Crawl</title> <link rel="stylesheet" href="style.css" type="text/css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript"> JS… </script> </head> <body> <h3 id="intro">A long time ago, in a galaxy far,<br /> far away...</h3> <audio id="music" preload="auto" autobuffer controls> <source src="http://dl.dropbox.com/u/16979719/sw_music.ogg"> </audio> <img src="starwars-logo.png" width="100%"/> <div id="crawl"> <div id="text"> … </div> </div> <div id="theend">THE END</div> <div id="bg"></div> // , </body> </html>
特別なことは何もありません...
Js
function startIntro(){ $('#intro').fadeOut(1000); setTimeout(function (){ $('body').css('background', 'url(background.png)') // var music = document.getElementById('music') if(music.canPlayType) // audio. Safari JS music.play() $('#logodiv').fadeIn(500); setTimeout(startCrawl, 1000); }, 1500) } function startCrawl(){ $('#logodiv').hide("scale",{}, 15000); // JQuery UI setTimeout(function(){ $('#text').show() var now = 800; var translateY = setInterval( function(){ // animation, transform . if($.browser.mozilla) var prefix = '-moz-' else var prefix = '-webkit-' $('#text').css( prefix + 'transform','rotateX(55deg) translateY('+now+'px) translateZ(300px)'); now = now - 2; if(now == -1800){ // , clearInterval(translateY); $('#text').fadeOut(2000) $('#theend').delay(2000).fadeIn(2000); } }, 50); }, 9000) } $(function(){ setTimeout(function(){ $('#intro').fadeIn(1000); // Long time ago... }, 500) setTimeout(startIntro, 6000); })
すべてのJSは、最も一般的なjqueryメソッドでフレーバー付けされた定期的なタイマーのセットです。 先ほど言ったように、私はJSの知識の明るい道に入ったばかりなので、たわごとを蹴らないでください。
ベアJQueryはscaleプロパティの操作方法を認識していないため、JQuery UIが接続されて画像の縮小がアニメーション化され、エフェクトでスケールを使用できるようになりました。
CSS
ここで興味深いのはほんの一部です。
#crawl { width: 1000px; margin: auto; -webkit-perspective: 800px; -webkit-perspective-origin: center 350px; -moz-perspective: 800px; -moz-perspective-origin: center 350px; } #text { display: none; margin: auto; width: 600px; text-align: justify; -webkit-transform: rotateX(55deg) translateY(800px) translateZ(300px); -webkit-backface-visibility: visible; -moz-transform: rotateX(55deg) translateY(800px) translateZ(300px); -moz-backface-visibility: visible; }
（-prefix-）変換プロパティの値は、科学分析法を使用して検出されました。
rotateXは、X軸に対する（つまり、モニターの水平面に対する）要素の傾斜を示します。translateYはY軸に沿ったオフセットを決定し、 translateZはZ軸に関するオフセットを決定すると推測できます。
perspectiveは遠近感の深さを決定し、 perpective-originはテキストに対する観察者の位置を示します。 これらのプロパティは、操作するノードの親要素に対して指定されます。
実施例 *
* Chromeは画面の下部にキャプションを表示することを全面的に拒否し、Safariはすべてを正しく表示する一方で、アニメーションの途中でのみキャプションを表示します。 Firefoxは著しく遅くなりますが、アニメーションも正しく表示されます。
素材をグーグルで処理する過程で、jsのない純粋なcssでのタイトルの実装に出会いました。 ここに
このすべてのビジネスの調和、コードの改善、便利な松葉杖などに関するアドバイスを聞きたいです。
PSオーディオ要素を使用したSafariの動作についても書きたいと思います。 正直に言うと、私はしばらくフリーズして、コンソールで見ました：
「TypeError： 'undefined'は関数ではありません（ 'document.getElementsTagName（' audio '）'を評価しています）。
オーディオ要素の仕様とGoogleの間をさまよいながら、彼はシステムにQuickTimeがインストールされていないとSafariはオーディオをサポートしないことを明らかにしました。 ここにスタンドアロンアプリケーションがあります。