| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| @keyframes sun-intro { |
| from { |
| transform: scale(0); |
| } |
| to { |
| transform: scale(1.5); |
| } |
| } |
| |
| @keyframes fern-intro { |
| from { |
| transform: translateY(1080px); |
| } |
| to { |
| transform: none; |
| } |
| } |
| |
| .sun-layer { |
| position: absolute; left: 50%; top: 50%; |
| animation: sun-intro 14s 5s both; |
| } |
| .fern-layer { |
| position: absolute; |
| left: 50%; top: 15%; width: 800px; height: 800px; |
| animation: fern-intro 10s 9s ease-out both; |
| } |
| .intro-layer { |
| position: absolute; |
| margin: 0; |
| left: 0px; |
| top: 0px; |
| width: 100%; |
| height: 100%; |
| } |
| </style> |
| |
| <script type="text/javascript" src="layer_fern.js"></script> |
| <script type="text/javascript" src="layer_intro.js"></script> |
| <script type="text/javascript" src="layer_sun.js"></script> |
| |
| <script> |
| window.addEventListener('load', function() { |
| var introLayers = |
| document.getElementsByClassName('intro-layer'); |
| for (var i = 0; i < introLayers.length; ++i) { |
| InitializeIntroLayer(introLayers.item(i)); |
| } |
| |
| var flyingLinesLayers = |
| document.getElementsByClassName('flying-lines-layer'); |
| var NUM_LINES = 30; |
| for (var i = 0; i < flyingLinesLayers.length; ++i) { |
| InitializeFlyingLinesLayer(flyingLinesLayers.item(i), NUM_LINES); |
| } |
| |
| var sunLayers = |
| document.getElementsByClassName('sun-layer'); |
| for (var i = 0; i < sunLayers.length; ++i) { |
| InitializeSunLayer(sunLayers.item(i)); |
| } |
| |
| var fernLayers = |
| document.getElementsByClassName('fern-layer'); |
| for (var i = 0; i < fernLayers.length; ++i) { |
| InitializeFernLayer(fernLayers.item(i)); |
| } |
| }); |
| </script> |
| </head> |
| <body style="background: rgb(0,0,0);"> |
| <div class="sun-layer"></div> |
| <div class="fern-layer"></div> |
| <div class="intro-layer"></div> |
| </body> |
| </html> |
