以下是 jquery ui制作html5网站游戏代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery ui����html5��վ��Ϸ</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="script/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="script/detect-browser-device.js"></script>
<noscript>
<div id="javascript-banner-container">
<div id="javascript-banner">
<div id="javascript-banner-left"></div>
<div id="javascript-banner-middle">
<div id="javascript-banner-text-a">PLEASE TURN ON YOUR</div>
<div id="javascript-banner-text-b">JAVASCRIPT</div>
</div>
<div id="javascript-banner-right"></div>
</div>
</div>
</noscript>
<div id="content" class="content-noscroll">
<div id="preloader" class="displaynone">
<script type="text/javascript" src="script/preloader-transparent-or-displaynone.js"></script>
<div id="preloader-banner-container">
<div id="preloader-banner">
<div id="preloader-banner-left"></div>
<div id="preloader-banner-middle">
<div id="preloader-banner-text-a">LOADING</div>
<div id="preloader-dots" class="preloader-dots-animation"></div>
</div>
<div id="preloader-banner-right"></div>
</div>
</div>
</div>
<script type="text/javascript" src="script/preloader.js"></script>
<div id="page"></div>
<div id="container" class="displaynone">
<script type="text/javascript" src="script/container-transparent-or-displaynone.js"></script>
<div id="layer-vertical-1" class="layer-vertical">
<div id="cloud-5" class="cloud"></div>
<div id="cloud-6" class="cloud"></div>
<div id="cloud-7" class="cloud"></div>
<div id="cloud-8" class="cloud"></div>
<div id="cloud-9" class="cloud"></div>
</div>
<div id="layer-vertical-2" class="layer-vertical">
<div id="ground-and-grass-container-2">
<div class="ground"></div>
<div class="grass"></div>
<div id="waterfall-1" class="waterfall"></div>
<div id="waterfall-2" class="waterfall"></div>
</div>
</div>
<!--layer-vertical-3 is at the bottom. it will be in front of layer horizontal, so the button on the banner in layer vertical will not be block by layer horizontal-->
<div id="layer-horizontal-1" class="layer-horizontal">
<div id="cloud-1" class="cloud"></div>
<div id="cloud-2" class="cloud"></div>
<div id="cloud-3" class="cloud"></div>
<div id="cloud-4" class="cloud"></div>
<div id="sea-layer-horizontal-1" class="sea">
<div class="sea-seal"></div>
</div>
<div id="coral-big-1" class="coral-big"></div>
<div id="coral-big-2" class="coral-big"></div>
</div>
<div id="layer-horizontal-2" class="layer-horizontal">
<div id="mountain-1" class="mountain"></div>
<div id="mountain-2" class="mountain"></div>
<div id="coral-1" class="coral-a"></div>
<div id="coral-2" class="coral-b"></div>
<div id="coral-3" class="coral-a"></div>
<div id="crane-1" class="crane"></div>
<div id="hangar">
<div id="hangar-door"></div>
<div id="hangar-window"></div>
<div id="hangar-roof"></div>
</div>
<div id="crane-2" class="crane"></div>
</div>
<div id="layer-horizontal-3" class="layer-horizontal">
<div id="plants-container">
<div id="plant-text-1" class="plant-text">MASTER</div>
<div id="plant-text-2" class="plant-text">EXPERT</div>
<div id="plant-text-3" class="plant-text">PROFICIENT</div>
<div id="plant-text-4" class="plant-text">FAMILIAR</div>
<div id="plant-text-5" class="plant-text">BEGINNER</div>
<div id="plant-line-1" class="plant-line"></div>
<div id="plant-line-2" class="plant-line"></div>
<div id="plant-line-3" class="plant-line"></div>
<div id="plant-line-4" class="plant-line"></div>
<div id="plant-line-5" class="plant-line"></div>
<div id="plant-1" class="plant">
<div class="plant-stalk"></div>
<div class="plant-head-leaves"></div>
</div>
<div id="plant-2" class="plant">
<div class="plant-stalk"></div>
<div class="plant-head-leaves"></div>
</div>
<div id="plant-3" class="plant">
<div class="plant-stalk"></div>
<div class="plant-head-leaves"></div>
</div>
<div id="plant-4" class="plant">
<div class="plant-stalk"></div>
<div class="plant-head-leaves"></div>
</div>
<div id="plant-ribbon-container">
<div id="plant-ribbon-1" class="plant-ribbon">
<div class="plant-ribbon-left"></div>
<div class="plant-ribbon-middle">DESIGN</div>
<div class="plant-ribbon-right"></div>
</div>
<div id="plant-ribbon-2" class="plant-ribbon">
<div class="plant-ribbon-left"></div>
<div class="plant-ribbon-middle">ILLUSTRATION</div>
<div class="plant-ribbon-right"></div>
</div>
<div id="plant-ribbon-3" class="plant-ribbon">
<div class="plant-ribbon-left"></div>
<div class="plant-ribbon-middle">CODE</div>
<div class="plant-ribbon-right"></div>
</div>
<div id="plant-ribbon-4" class="plant-ribbon">
<div class="plant-ribbon-left"></div>
<div class="plant-ribbon-middle">ANIMATION</div>
<div class="plant-ribbon-right"></div>
</div>
</div>
<div class="ribbon-container">
<div class="ribbon-relative">
<div class="ribbon-left"></div>
<div class="ribbon-middle">Multidisciplinary Designer</div>
<div class="ribbon-right"></div>
</div>
</div>
</div>
<div id="elevation-1" class="elevation">
<div class="ground"></div>
<div class="grass"></div>
</div>
<div id="tree-9" class="tree-bright-a"></div>
<div id="tree-10" class="tree-dark-c"></div>
<div id="title-about"></div>
<div id="tree-7" class="tree-dark-a"></div>
<div id="tree-8" class="tree-bright-a"></div>
<div id="gate-1" class="gate">
<div id="gate-text-1" class="gate-text">LEVEL 1</div>
</div>
<div id="gate-2" class="gate">
<div id="gate-text-2" class="gate-text">LEVEL 2</div>
</div>
<div id="nba-container">
<div id="tree-20" class="tree-bright-b"></div>
<div id="tree-21" class="tree-dark-d"></div>
<div id="tree-22" class="tree-bright-b"></div>
<div id="tree-23" class="tree-dark-b"></div>
<div id="tree-24" class="tree-bright-e"></div>
<div id="tree-25" class="tree-dark-b"></div>
<div id="nba-rim-container">
<div id="nba-rim"></div>
</div>
<div id="nba-board-1" class="nba-board-blue">
<div class="nba-text-container">
<div class="nba-text">N</div>
</div>
</div>
<div id="nba-board-2" class="nba-board-blue">
<div class="nba-text-container">
<div class="nba-text">B</div>
</div>
</div>
<div id="nba-board-3" class="nba-board-blue">
<div class="nba-text-container">
<div class="nba-text">A</div>
</div>
</div>
<div id="nba-board-4" class="nba-board-red">
<div class="nba-text-container">
<div class="nba-text">F</div>
</div>
</div>
<div id="nba-board-5" class="nba-board-red">
<div class="nba-text-container">
<div class="nba-text">A</div>
</div>
</div>
<div id="nba-board-6" class="nba-board-red">
<div class="nba-text-container">
<div class="nba-text">N</div>
</div>
</div>
<div id="nba-player-container">
<div id="nba-player">
<div id="nba-player-frame"></div>
<div id="nba-player-eyes"></div>
</div>
</div>
<div id="nba-ball"></div>
<div class="ribbon-container">
<div class="ribbon-relative">
<div class="ribbon-left"></div>
<div class="ribbon-middle">Sports Fan</div>
<div class="ribbon-right"></div>
</div>
</div>
</div>
<div id="buildings-container">
<div id="tree-11" class="tree-bright-b"></div>
<div id="tree-12" class="tree-dark-b"></div>
<div id="tree-13" class="tree-bright-b"></div>
<div id="tree-14" class="tree-dark-b"></div>
<div id="tree-15" class="tree-bright-b"></div>
<div id="tree-16" class="tree-dark-b"></div>
<div id="tree-17" class="tree-bright-b"></div>
<div id="tree-18" class="tree-dark-b"></div>
<div id="tree-19" class="tree-bright-b"></div>
<div id="building-1" class="building">
<div class="building-enemy-face-a">
<div class="building-enemy-face-a-eyes"></div>
</div>
<div id="building-leg-container-1" class="building-leg-container-a">
<div id="building-1-leg-frame" class="building-leg-frame-a"></div>
</div>
</div>
<div id="building-2" class="building">
<div class="building-enemy-face-b">
<div class="building-enemy-face-b-eyes"></div>
</div>
<div id="building-leg-container-2" class="building-leg-container-b">
<div id="building-2-leg-frame" class="building-leg-frame-b"></div>
</div>
</div>
<div id="building-3" class="building">
<div class="building-enemy-face-a">
<div class="building-enemy-face-a-eyes"></div>
</div>
<div id="building-leg-container-3" class="building-leg-container-a">
<div id="building-3-leg-frame" class="building-leg-frame-a"></div>
</div>
</div>
<div class="ribbon-container">
<div class="ribbon-relative">
<div class="ribbon-left"></div>
<div class="ribbon-middle">Live and Work in New York City</div>
<div class="ribbon-right"></div>
</div>
</div>
</div>
<div id="elevation-2" class="elevation">
<div class="ground"></div>
<div class="grass"></div>
</div>
<div id="ground-and-grass-container-1">
<div class="ground"></div>
<div class="grass"></div>
</div>
<div id="splash-container">
<div id="scroll-or-swipe-text-container-1" class="scroll-or-swipe-text-container">Scroll down mouse OR press keyboard's down-arrow</div>
<div id="scroll-or-swipe-text-container-2" class="scroll-or-swipe-text-container">Swipe from right to left</div>
<div id="tree-5" class="tree-bright-d"></div>
<div id="tree-6" class="tree-dark-b"></div>
<div id="title-robby"></div>
<div id="title-leonardi"></div>
<div id="tree-1" class="tree-dark-c"></div>
<div id="tree-2" class="tree-bright-e"></div>
<div id="tree-3" class="tree-dark-b"></div>
<div id="tree-4" class="tree-dark-a"></div>
<div class="ribbon-container">
<div class="ribbon-relative">
<div class="ribbon-left"></div>
<div class="ribbon-middle">Interactive Resume of</div>
<div class="ribbon-right"></div>
</div>
</div>
</div>
<div id="sea-wave-1" class="sea-wave"></div>
<div id="sea-1" class="sea">
<div id="title-skills" class="title-skills-class"></div>
<div id="algae-1" class="algae-a"></div>
<div id="algae-2" class="algae-b"></div>
<div id="algae-3" class="algae-a"></div>
<div id="algae-4" class="algae-b"></div>
<div id="algae-5" class="algae-b"></div>
<div id="algae-6" class="algae-a"></div>
<div id="algae-7" class="algae-a"></div>
<div id="algae-8" class="algae-b"></div>
<div id="skill-1-container">
<div class="skill-measurement-1 skill-measurement">
<div class="skill-measurement-header">BEGINNER</div>
<div class="skill-measurement-line"></div>
</div>
<div class="skill-measurement-2 skill-measurement">
<div class="skill-measurement-header">FAMILIAR</div>
<div class="skill-measurement-line"></div>
</div>
<div class="skill-measurement-3 skill-measurement">
<div class="skill-measurement-header">PROFICIENT</div>
<div class="skill-measurement-line"></div>
</div>
<div class="skill-measurement-4 skill-measurement">
<div class="skill-measurement-header">EXPERT</div>
<div class="skill-measurement-line"></div>
</div>
<div class="skill-measurement-5 skill-measurement">
<div class="skill-measurement-header">MASTER</div>
<div class="skill-measurement-line"></div>
</div>
<div id="fish-text-container">
<div id="fish-ribbon-container-1" class="sea-ribbon-container">
<div class="sea-ribbon-left"></div>
<div class="sea-ribbon-middle">PHOTOSHOP</div>
<div class="sea-ribbon-right"></div>
</div>
<div id="fish-ribbon-container-2" class="sea-ribbon-container">
<div class="sea-ribbon-left"></div>
<div class="sea-ribbon-middle">ILLUSTRATOR</div>
<div class="sea-ribbon-right"></div>
</div>
<div id="fish-ribbon-container-3" class="sea-ribbon-container">
<div class="sea-ribbon-left"></div>
<div class="sea-ribbon-middle">DREAMWEAVER</div>
<div class="sea-ribbon-right"></div>
</div>
<div id="fish-ribbon-container-4" class="sea-ribbon-container">
<div class="sea-ribbon-left"></div>
<div class="sea-ribbon-middle">FLASH</div>
<div class="sea-ribbon-right"></div>
</div>
</div>
<div id="fishes-container">
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
<div class="fish">
<div class="fish-eyes"></div>
</div>
</div>
</div>
<div id="skill-2-container">
<div class="skill-measurement-1 skill-measurement">
<div class="skill-measurement-header">BEGINNER</div>
<div class="skill-measurement-line"></div>
</div>
<div class="skill-measurement-2 skill-measurement">
<div class="skill-measurement-header">FAMILIAR</div>
<div class="skill-measurement-line"></div>
</div>
<div class="skill-measurement-3 skill-measurement">
<div class="skill-measurement-header">PROFICIENT</div>
<div class="skill-measurement-line"></div>
</div>
<div class="skill-measurement-4 skill-measurement">
<div class="skill-measurement-header">EXPERT</div>
<div class="skill-measurement-line"></div>
</div>
<div class="skill-measurement-5 skill-measurement">
<div class="skill-measurement-header">MASTER</div>
<div class="skill-measurement-line"></div>
</div>
<div id="crab-text-container">
<div id="crab-ribbon-container-1" class="sea-ribbon-container">
<div class="sea-ribbon-left"></div>
<div class="sea-ribbon-middle">HTML</div>
<div class="sea-ribbon-right"></div>
</div>
<div id="crab-ribbon-container-2" class="sea-ribbon-container">
<div class="sea-ribbon-left"></div>
<div class="sea-ribbon-middle">CSS</div>
<div class="sea-ribbon-right"></div>
</div>
<div id="crab-ribbon-container-3" class="sea-ribbon-container">
<div class="sea-ribbon-left"></div>
<div class="sea-ribbon-middle">JAVASCRIPT</div>
<div class="sea-ribbon-right"></div>
</div>
<div id="crab-ribbon-container-4" class="sea-ribbon-container">
<div class="sea-ribbon-left"></div>
<div class="sea-ribbon-middle">JQUERY</div>
<div class="sea-ribbon-right"></div>
</div>
</div>
<div id="crabs-container">
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
<div class="crab">
<div class="crab-eyes"></div>
</div>
</div>
</div>
<div id="skill-3-container">
<div class="skill-measurement-1 skill-measurement">
<div class="skill-measurement-header">BEGINNER</div>
<div class="skill-measurement-line"></div>
</div>
<div class="skill-measurement-2 skill-measurement">
<div class="skill-measurement-header">FAMILIAR</div>
<div class="skill-measurement-line"></div>
</div>
<div class="skill-measurement-3 skill-measurement">
<div class="skill-measurement-header">PROFICIENT</div>
<div class="skill-measurement-line"></div>
</div>
<div class="skill-measurement-4 skill-measurement">
<div class="skill-measurement-header">EXPERT</div>
<div class="skill-measurement-line"></div>
</div>
<div class="skill-measurement-5 skill-measurement">
<div class="skill-measurement-header">MASTER</div>
<div class="skill-measurement-line"></div>
</div>
<div id="turtle-text-container">
<div id="turtle-ribbon-container-1" class="sea-ribbon-container">
<div class="sea-ribbon-left"></div>
<div class="sea-ribbon-middle">3D MAX</div>
<div class="sea-ribbon-right"></div>
</div>
<div id="turtle-ribbon-container-2" class="sea-ribbon-container">
<div class="sea-ribbon-left"></div>
<div class="sea-ribbon-middle">BLENDER 3D</div>
<div class="sea-ribbon-right"></div>
</div>
<div id="turtle-ribbon-container-3" class="sea-ribbon-container">
<div class="sea-ribbon-left"></div>
<div class="sea-ribbon-middle">CINEMA 4D</div>
<div class="sea-ribbon-right"></div>
</div>
<div id="turtle-ribbon-container-4" class="sea-ribbon-container">
<div class="sea-ribbon-left"></div>
<div class="sea-ribbon-middle">AFTER EFFECTS</div>
<div class="sea-ribbon-right"></div>
</div>
</div>
<div id="turtles-container">
<div class="turtle">
<div class="turtle-eyes"></div>
</div>
<div class="turtle">
<div class="turtle-eyes"></div>
</div>
<div class="turtle">
<div class="turtle-eyes"></div>
</div>
<div class="turtle">
<div class="turtle-eyes"></div>
</div>
<div class="turtle">
<div class="turtle-eyes"></div>
</div>
<div class="turtle">
<div class="turtle-eyes"></div>
</div>
<div class="turtle">
<div class="turtle-eyes"></div>
</div>
<div class="turtle">
<div class="turtle-eyes"></div>
</div>
<div class="turtle">
<div class="turtle-eyes"></div>
</div>
</div>
</div>
<div id="bubble-container">
<div id="bubble"></div>
</div>
</div>
<div id="sea-floor"></div>
<div id="ribbon-2-1" class="ribbon-absolute">
<div class="ribbon-left"></div>
<div class="ribbon-middle">Graphic and Web Software</div>
<div class="ribbon-right"></div>
</div>
<div id="ribbon-2-2" class="ribbon-absolute">
<div class="ribbon-left"></div>
<div class="ribbon-middle">Scripting and Programming Language</div>
<div class="ribbon-right"></div>
</div>
<div id="ribbon-2-3" class="ribbon-absolute">
<div class="ribbon-left"></div>
<div class="ribbon-middle">3D and Video Software</div>
<div class="ribbon-right"></div>
</div>
<div id="panel-and-floor-container">
<div id="panel"></div>
<div id="floor"></div>
</div>
<div id="title-experience"></div>
<div id="boxes"></div>
<div id="experience-1-container">
<div class="chain-block-and-string-container">
<div class="chain-block-string"></div>
<div class="chain-block"></div>
</div>
<div id="experience-text-container-1" class="experience-text-container">
<div class="experience-text-a">May 2005 - February 2006</div>
<div class="experience-text-b">AOL</div>
<div class="experience-text-d">Designed online advertising to promote many entertainment programs in AOL music website.</div>
</div>
<div id="robot">
<div id="robot-body"></div>
<div id="robot-hand-left">
<div class="robot-hand-a"></div>
<div class="robot-hand-b"></div>
<div class="robot-hand-c"></div>
<div class="robot-hand-d"></div>
</div>
<div id="robot-hand-right">
<div class="robot-hand-a"></div>
<div class="robot-hand-b"></div>
<div class="robot-hand-c"></div>
<div class="robot-hand-d"></div>
</div>
<div id="piechart-aol" class="piechart">
<div class="piechart-back"></div>
<div id="piechart-aol-text-graphic-1" class="piechart-text-c">GRAPHIC</div>
<div id="piechart-aol-text-graphic-2" class="piechart-text-d">100%</div>
</div>
</div>
<div class="ribbon-container">
<div class="ribbon-relative">
<div class="ribbon-left"></div>
<div class="ribbon-middle">Working Experience 1</div>
<div class="ribbon-right"></div>
</div>
</div>
</div>
<div id="elevation-3" class="elevation">
<div class="elevation-box"></div>
<div class="elevation-floor"></div>
</div>
<div id="experience-2-container">
<div class="chain-block-and-string-container">
<div class="chain-block-string"></div>
<div class="chain-block"></div>
</div>
<div id="experience-text-container-2" class="experience-text-container">
<div class="experience-text-a">April 2006 - April 2010</div>
<div class="experience-text-b">INCOGNITO DIGITAL</div>
<div class="experience-text-c">Designed and developed diverse online advertising projects such as rich media, banner, landing page, and microsite.</div>
</div>
<div id="squid">
<div id="squid-hand-open-1" class="squid-hand-open"></div>
<div id="squid-hand-open-2" class="squid-hand-open"></div>
<div id="squid-hand-open-3" class="squid-hand-open"></div>
<div id="squid-hand-open-4" class="squid-hand-open"></div>
<div id="squid-hand-close-1" class="squid-hand-close"></div>
<div id="squid-hand-close-2" class="squid-hand-close"></div>
<div id="squid-hand-close-3" class="squid-hand-close"></div>
<div id="squid-hand-close-4" class="squid-hand-close"></div>
<div id="squid-body"></div>
<div id="piechart-incognito" class="piechart">
<div class="piechart-back"></div>
<div id="piechart-incognito-front"></div>
<div id="piechart-incognito-text-graphic-1" class="piechart-text-a">GRAPHIC</div>
<div id="piechart-incognito-text-graphic-2" class="piechart-text-b">15%</div>
<div id="piechart-incognito-text-animation-1" class="piechart-text-c">ANIMATION</div>
<div id="piechart-incognito-text-animation-2" class="piechart-text-d">70%</div>
<div id="piechart-incognito-text-code-1" class="piechart-text-a">CODE</div>
<div id="piechart-incognito-text-code-2" class="piechart-text-b">15%</div>
</div>
</div>
<div class="ribbon-container">
<div class="ribbon-relative">
<div class="ribbon-left"></div>
<div class="ribbon-middle">Working Experience 2</div>
<div class="ribbon-right"></div>
</div>
</div>
</div>
<div id="elevation-4" class="elevation">
<div class="elevation-box"></div>
<div class="elevation-floor"></div>
</div>
<div id="experience-3-container">
<div class="chain-block-and-string-container">
<div class="chain-block-string"></div>
<div class="chain-block"></div>
</div>
<div id="experience-text-container-3" class="experience-text-container">
<div class="experience-text-a">August 2010 - Now</div>
<div class="experience-text-b">FOX NEWS</div>
<div class="experience-text-e">Design and develop website content such as static, animated, and interactive graphics for foxnews.com.</div>
</div>
<div id="alien">
<div id="alien-body"></div>
<div id="alien-steer"></div>
<div id="alien-ship"></div>
<div id="piechart-foxnews" class="piechart">
<div class="piechart-back"></div>
<div id="piechart-foxnews-front"></div>
<div id="piechart-foxnews-text-graphic-1" class="piechart-text-c">GRAPHIC</div>
<div id="piechart-foxnews-text-graphic-2" class="piechart-text-d">70%</div>
<div id="piechart-foxnews-text-animation-1" class="piechart-text-a">ANIMATION</div>
<div id="piechart-foxnews-text-animation-2" class="piechart-text-b">15%</div>
<div id="piechart-foxnews-text-code-1" class="piechart-text-a">CODE</div>
<div id="piechart-foxnews-text-code-2" class="piechart-text-b">15%</div>
</div>
</div>
<div class="ribbon-container">
<div class="ribbon-relative">
<div class="ribbon-left"></div>
<div class="ribbon-middle">Working Experience 3</div>
<div class="ribbon-right"></div>
</div>
</div>
</div>
<div id="gate-3" class="gate">
<div id="gate-text-3" class="gate-text">LEVEL 3</div>
</div>
<div id="title-awards-and"></div>
<div id="title-publication"></div>
<div id="gate-4" class="gate">
<div id="gate-text-4" class="gate-text">LEVEL 4</div>
</div>
<div id="dock-column"></div>
<div id="sea-wave-2" class="sea-wave"></div>
<div id="sea-2" class="sea"></div>
<div id="dock-floor"></div>
</div>
<div id="layer-vertical-3" class="layer-vertical">
<div id="banners-container">
<div class="banner">
<div class="banner-top-a"></div>
<div class="banner-middle-a">
<div class="banner-text-a">October 21, 2013</div>
<div class="banner-line"></div>
<div class="banner-text-b">CSS DESIGN AWARDS</div>
<div class="banner-line"></div>
<div class="banner-text-c">Winner</div>
<div class="banner-button">
<a href="#/" target="_blank">
<img src="image/banner-button.png"/>
</a>
</div>
</div>
<div class="banner-bottom-a"></div>
</div>
<div class="banner">
<div class="banner-top-b"></div>
<div class="banner-middle-b">
<div class="banner-text-a">October 18, 2013</div>
<div class="banner-line"></div>
<div class="banner-text-b">CSS WINNER</div>
<div class="banner-line"></div>
<div class="banner-text-c">Winner of the Day</div>
<div class="banner-button">
<a href="#/" target="_blank">
<img src="image/banner-button.png"/>
</a>
</div>
</div>
<div class="banner-bottom-b"></div>
</div>
<!--<div class="banner">
<div class="banner-top-b"></div>
<div class="banner-middle-b">
<div class="banner-text-a">April 10, 2013</div>
<div class="banner-line"></div>
<div class="banner-text-b">NET MAGAZINE</div>
<div class="banner-line"></div>
<div class="banner-text-c">Top 10 Best Online Portfolio</div>
<div class="banner-button">
<a href="#" target="_blank">
<img src="image/banner-button.png"/>
</a>
</div>
</div>
<div class="banner-bottom-b"></div>
</div>-->
<div class="banner">
<div class="banner-top-a"></div>
<div class="banner-middle-a">
<div class="banner-text-a">September 20, 2012</div>
<div class="banner-line"></div>
<div class="banner-text-b">HOW INTERACTIVE DESIGN</div>
<div class="banner-line"></div>
<div class="banner-text-c">Site of the Day</div>
<div class="banner-button">
<a href="#" target="_blank">
<img src="image/banner-button.png"/>
</a>
</div>
</div>
<div class="banner-bottom-a"></div>
</div>
<div class="banner">
<div class="banner-top-b"></div>
<div class="banner-middle-b">
<div class="banner-text-a">September 10, 2012</div>
<div class="banner-line"></div>
<div class="banner-text-b">CREATIVE BLOQ</div>
<div class="banner-line"></div>
<div class="banner-text-c">Web design inspiration - 35 examples of CSS</div>
<div class="banner-button">
<a href="#" target="_blank">
<img src="image/banner-button.png"/>
</a>
</div>
</div>
<div class="banner-bottom-b"></div>
</div>
<div class="banner">
<div class="banner-top-a"></div>
<div class="banner-middle-a">
<div class="banner-text-a">September 1, 2012</div>
<div class="banner-line"></div>
<div class="banner-text-b">WEB DESIGNER MAGAZINE</div>
<div class="banner-line"></div>
<div class="banner-text-c">Issue 200 - Portfolio Section</div>
</div>
<div class="banner-bottom-a"></div>
</div>
<div class="banner">
<div class="banner-top-b"></div>
<div class="banner-middle-b">
<div class="banner-text-a">July 6, 2012</div>
<div class="banner-line"></div>
<div class="banner-text-b">ONE EXTRA PIXEL</div>
<div class="banner-line"></div>
<div class="banner-text-c">Javascript Tutorial</div>
<div class="banner-button">
<a href="#/" target="_blank">
<img src="image/banner-button.png"/>
</a>
</div>
</div>
<div class="banner-bottom-b"></div>
</div>
<div class="banner">
<div class="banner-top-a"></div>
<div class="banner-middle-a">
<div class="banner-text-a">August 1, 2012</div>
<div class="banner-line"></div>
<div class="banner-text-b">NET MAGAZINE</div>
<div class="banner-line"></div>
<div class="banner-text-c">Issue 230 - CSS Gallery Showcase</div>
</div>
<div class="banner-bottom-a"></div>
</div>
<div class="banner">
<div class="banner-top-b"></div>
<div class="banner-middle-b">
<div class="banner-text-a">May 28, 2012</div>
<div class="banner-line"></div>
<div class="banner-text-b">CSS GARDEN</div>
<div class="banner-line"></div>
<div class="banner-text-c">Featured Site</div>
<div class="banner-button">
<a href="#" target="_blank">
<img src="image/banner-button.png"/>
</a>
</div>
</div>
<div class="banner-bottom-b"></div>
</div>
<div class="banner">
<div class="banner-top-a"></div>
<div class="banner-middle-a">
<div class="banner-text-a">April 30, 2012</div>
<div class="banner-line"></div>
<div class="banner-text-b">WEB INDEX GALLERY</div>
<div class="banner-line"></div>
<div class="banner-text-c">Featured Site</div>
<div class="banner-button">
<a href="#" target="_blank">
<img src="image/banner-button.png"/>
</a>
</div>
</div>
<div class="banner-bottom-a"></div>
</div>
</div>
</div>
<div id="fireworks-container">
<div id="firework-container-1" class="firework-container">
<div class="firework"></div>
</div>
<div id="firework-container-2" class="firework-container">
<div class="firework"></div>
</div>
<div id="firework-container-3" class="firework-container">
<div class="firework"></div>
</div>
<div id="firework-container-4" class="firework-container">
<div class="firework"></div>
</div>
<div id="firework-container-5" class="firework-container">
<div class="firework"></div>
</div>
<div id="firework-container-6" class="firework-container">
<div class="firework"></div>
</div>
</div>
<div id="robby-container">
<div id="robby">
<div id="robby-slides"></div>
<div id="robby-eyes-close"></div>
</div>
</div>
<div id="balloon"></div>
<div id="contact-container">
<div id="contact-center">
<div id="title-contact"></div>
<div id="contact-box">
<div id="contact-box-email">
<input type="text" name="email-address" id="email-address" maxlength="75"/>
</div>
<div id="contact-box-subject">
<input type="text" name="email-subject" id="email-subject" maxlength="150"/>
</div>
<div id="contact-box-message">
<textarea name="email-message" id="email-message"></textarea>
</div>
</div>
<div id="contact-button">
<input type="image" src="image/contact-button.png" value="submit" id="send-email" name="send-email"/>
</div>
</div>
<div id="social-container">
<div id="social-top"></div>
<div id="social-middle">
<div id="social-facebook" class="social-icon">
<a href="#" target="_blank">
<img src="image/social-facebook.png"/>
</a>
</div>
<div id="social-twitter" class="social-icon">
<a href="#" target="_blank">
<img src="image/social-twitter.png"/>
</a>
</div>
<div id="social-dribbble" class="social-icon">
<a href="#" target="_blank">
<img src="image/social-dribbble.png"/>
</a>
</div>
</div>
<div id="social-bottom"></div>
</div>
<div class="contact-confirmation-container">
<div class="contact-confirmation">
<div class="contact-confirmation-rectangle"></div>
<div class="contact-confirmation-triangle"></div>
<div class="contact-confirmation-title-b">ERROR</div>
<div class="contact-confirmation-text-b">Please enter a valid email address!</div>
</div>
</div>
<div class="contact-confirmation-container">
<div class="contact-confirmation">
<div class="contact-confirmation-rectangle"></div>
<div class="contact-confirmation-triangle"></div>
<div class="contact-confirmation-title-b">ERROR</div>
<div class="contact-confirmation-text-b">Please fill out all of the information!</div>
</div>
</div>
<div class="contact-confirmation-container">
<div class="contact-confirmation">
<div class="contact-confirmation-rectangle"></div>
<div class="contact-confirmation-triangle"></div>
<div class="contact-confirmation-text-d">Sending...</div>
</div>
</div>
<div class="contact-confirmation-container">
<div class="contact-confirmation">
<div class="contact-confirmation-rectangle"></div>
<div class="contact-confirmation-triangle"></div>
<div class="contact-confirmation-title-b">ERROR</div>
<div class="contact-confirmation-text-c">Something wrong. Please try again!</div>
</div>
</div>
<div class="contact-confirmation-container">
<div class="contact-confirmation">
<div class="contact-confirmation-rectangle"></div>
<div class="contact-confirmation-triangle"></div>
<div class="contact-confirmation-title-a">THANK YOU</div>
<div class="contact-confirmation-text-a">Your message has been sent. I will get back to you as soon as possible!</div>
</div>
</div>
<div id="contact-cloud-top"></div>
<div id="contact-cloud-bottom"></div>
<div id="contact-cloud-middle">
<div id="contact-cloud-seal-top"></div>
<div id="contact-cloud-seal-bottom"></div>
</div>
</div>
<!--<div id="detect-container">
<div id="detect-name-1" class="detect-name">container height</div>
<div id="detect-value-1" class="detect-value"></div>
<div id="detect-name-2" class="detect-name">layer vertical 3 height</div>
<div id="detect-value-2" class="detect-value"></div>
<br />
</div>-->
</div>
</div>
<script type="text/javascript" src="script/email.js"></script>
<script type="text/javascript" src="script/main.js"></script>
</body>
</html>JS代码(main.js):
var contentDiv = document.getElementById("content");
var pageDiv = document.getElementById("page");
var robbyContainerDiv = document.getElementById("robby-container");
var robbyDiv = document.getElementById("robby");
var robbyFramesDiv = document.getElementById("robby-slides");
var robbyEyesCloseDiv = document.getElementById("robby-eyes-close");
var blinkRobbyEyesTimer;
var bannersContainerDiv = document.getElementById("banners-container");
var isPreloadShiftUpAnimationFinish = false;
var canFinishShiftUpHorizontalLayersAfterEverythingLoaded = true;
var splashContainerDiv = document.getElementById("splash-container");
var balloonDiv = document.getElementById("balloon");
var groundAndGrassContainer1Div = document.getElementById("ground-and-grass-container-1");
var elevation1Div = document.getElementById("elevation-1");
var elevation2Div = document.getElementById("elevation-2");
var layerHorizontalArray = new Array();
var layerVerticalArray = new Array();
var gapBetweenContactCloudAndBannersContainer = 400;
var layerHorizontalSpeedArray = new Array();
var layerVerticalSpeedArray = new Array();
var sea1Div = document.getElementById("sea-1");
var seaFloorDiv = document.getElementById("sea-floor");
var seaFloorFrontObjectArray = new Array();
var seaFloorBackObjectArray = new Array();
var about1ContainerDiv = document.getElementById("plants-container");
var plantLine1Div = document.getElementById("plant-line-1");
var plantLine2Div = document.getElementById("plant-line-2");
var plantArray = new Array();
var plantTargetTopObjectArray = new Array();
plantTargetTopObjectArray.push(plantLine1Div,plantLine1Div,plantLine2Div,plantLine2Div);
var canAnimatePlantInformation;
var about2ContainerDiv = document.getElementById("buildings-container");
var buildingTargetLeft1 = 0;
var buildingTargetLeft2 = 305;
var buildingTargetLeft3 = 710;
var buildingEarlyPosition1 = 795;
var buildingEarlyPosition2 = 1100;
var buildingEarlyPosition3 = 1505;
var buildingArray = new Array();
var buildingTargetLeftArray = new Array();
buildingTargetLeftArray.push(buildingTargetLeft1,buildingTargetLeft2,buildingTargetLeft3);
var buildingEarlyPositionArray = new Array();
buildingEarlyPositionArray.push(buildingEarlyPosition1,buildingEarlyPosition2,buildingEarlyPosition3);
var buildingLegArray = new Array();
var canAnimateBuildingInformation;
var buildingCounter = 0;
var buildingLegsTimer;
var buildingBlinkTimer;
var buildingEnemyFaceEyeArray = new Array();
var buildingLegContainerArray = new Array();
var buildingLegContainer1Div = document.getElementById("building-leg-container-1");
var buildingLegContainer2Div = document.getElementById("building-leg-container-2");
var buildingLegContainer3Div = document.getElementById("building-leg-container-3");
var buildingLegFrameArray = new Array();
var building1LegFrameDiv = document.getElementById("building-1-leg-frame");
var building2LegFrameDiv = document.getElementById("building-2-leg-frame");
var building3LegFrameDiv = document.getElementById("building-3-leg-frame");
var experience1ContainerDiv = document.getElementById("experience-1-container");
var experience2ContainerDiv = document.getElementById("experience-2-container");
var experience3ContainerDiv = document.getElementById("experience-3-container");
var experienceTextContainerArray = new Array();
var chainBlockAndStringContainerArray = new Array();
var experienceTextContainerDistanceFromFloor = 185;
var robotDiv = document.getElementById("robot");
var animateRobotHandsTimer;
var spinRobotHandsTimer;
var changeRobotHandsCounter = 0;
var robotHandLeftDiv = document.getElementById("robot-hand-left");
var robotHandRightDiv = document.getElementById("robot-hand-right");
var robotHandChildrenLength = $(robotHandLeftDiv).children().length;
var squidDiv = document.getElementById("squid");
var squidHandCloseArray = new Array();
var squidHandOpenArray = new Array();
var animateSquidHandsTimer;
var moveSquidHandsTimer;
var openAndCloseSquidHandsCounter = 0;
var alienDiv = document.getElementById("alien");
var animateAlienHandsTimer;
var alienSteerDiv = document.getElementById("alien-steer");
var alienSteerAngle = 0;
var alienSteerPreviousAngle;
var alienSteerAngleLimit = 15;
var alienSteerAngleIncrement = 5;
var canAnimateBossInformation;
var canAnimateRobotInformation;
var canAnimateSquidInformation;
var canAnimateAlienInformation;
var piechartAolTextGraphic1Div = document.getElementById("piechart-aol-text-graphic-1");
var piechartAolTextGraphic2Div = document.getElementById("piechart-aol-text-graphic-2");
var piechartIncognitoFrontDiv = document.getElementById("piechart-incognito-front");
var piechartIncognitoTextGraphic1Div = document.getElementById("piechart-incognito-text-graphic-1");
var piechartIncognitoTextGraphic2Div = document.getElementById("piechart-incognito-text-graphic-2");
var piechartIncognitoTextAnimation1Div = document.getElementById("piechart-incognito-text-animation-1");
var piechartIncognitoTextAnimation2Div = document.getElementById("piechart-incognito-text-animation-2");
var piechartIncognitoTextCode1Div = document.getElementById("piechart-incognito-text-code-1");
var piechartIncognitoTextCode2Div = document.getElementById("piechart-incognito-text-code-2");
var piechartFoxnewsFrontDiv = document.getElementById("piechart-foxnews-front");
var piechartFoxnewsTextGraphic1Div = document.getElementById("piechart-foxnews-text-graphic-1");
var piechartFoxnewsTextGraphic2Div = document.getElementById("piechart-foxnews-text-graphic-2");
var piechartFoxnewsTextAnimation1Div = document.getElementById("piechart-foxnews-text-animation-1");
var piechartFoxnewsTextAnimation2Div = document.getElementById("piechart-foxnews-text-animation-2");
var piechartFoxnewsTextCode1Div = document.getElementById("piechart-foxnews-text-code-1");
var piechartFoxnewsTextCode2Div = document.getElementById("piechart-foxnews-text-code-2");
var bubbleDiv = document.getElementById("bubble");
var bubbleTimer;
var shiftUpLayerHorizontalDistance;
var shiftUpLayerHorizontalTimer;
var shiftDownLayerHorizontalTimer;
var shiftUpDownLayerHorizontalIncrement = 40;
var shiftUpDownLayerHorizontalInterval = 40;
var seaAnimalSwimDistance = 900;
var blinkSeaAnimalsTimer;
var skill1ContainerDiv = document.getElementById("skill-1-container");
var fishArray = new Array();
var fishEyeArray = new Array();
var canAnimateFishInformation;
var isFishStillAnimating = false;
var fishAnimateNumber = 0;
var numberOfFishInEachRowArray = new Array();
numberOfFishInEachRowArray.push(5,5,4,4);
var skill2ContainerDiv = document.getElementById("skill-2-container");
var crabArray = new Array();
var crabEyeArray = new Array();
var canAnimateCrabInformation;
var isCrabStillAnimating = false;
var crabAnimateNumber = 0;
var numberOfCrabInEachRowArray = new Array();
numberOfCrabInEachRowArray.push(5,5,4,3);
var skill3ContainerDiv = document.getElementById("skill-3-container");
var turtleArray = new Array();
var turtleEyeArray = new Array();
var canAnimateTurtleInformation;
var isTurtleStillAnimating = false;
var turtleAnimateNumber = 0;
var numberOfTurtleInEachRowArray = new Array();
numberOfTurtleInEachRowArray.push(3,2,2,2);
var pageVerticalPosition = 0;
var pageVerticalPositionOnTouch = 0;
var previousPageVerticalPosition = 0;
var deltaPageVerticalPosition = 0;
var isRobbySwimming = false;
var isRobbyJumping;
var isRobbyFalling;
var isRobbyBelowSeaLevel = false;
var swimUpHeight;
var layersMovement;
var elevationArray = new Array();
var elevationNumberBelowRobby = null;
var robbyRightEdge;
var robbyLeftEdge;
var distanceBetweenRobbyAndBalloon = 150;
//robby center to balloon centervar robbyMaxHorizontalDistance;
var counter = 0;
var switcher = 1;
//either 1 or -1var robbyStaticFrame = 0;
var robbyStartRunFrame = 1;
var robbyStopRunFrame = 2;
var robbyStartSwimFrame = 3;
var robbyStopSwimFrame = 4;
var robbySwimDownFrame = 5var robbyStartJumpFrame = 6;
var robbyStopJumpFrame = 7;
var robbyOneFrameWidth = 200;
var shiftRobbyFrameTimeInterval = 200;
var canAnimateRobbyRunSwim;
var robbyStartFrame;
var robbyStopFrame;
var shiftRobbyFrameTimer;
var pageVerticalPositionWhenAnimateRobby1;
var pageVerticalPositionWhenAnimateRobby2;
var minimumVerticalDistanceToTriggerRobbySwimDownFrame = 100;
var nbaBoardArray = new Array();
var about3ContainerDiv = document.getElementById("nba-container");
var nbaPlayerDiv = document.getElementById("nba-player");
var nbaPlayerContainerDiv = document.getElementById("nba-player-container");
var nbaPlayerFrameDiv = document.getElementById("nba-player-frame");
var nbaRimContainerDiv = document.getElementById("nba-rim-container");
var nbaBallDiv = document.getElementById("nba-ball");
var canAnimateNbaInformation;
var nbaBoardsCounter;
var nbaBoardsAnimationTimer;
var nbaPlayerCounter;
var nbaPlayerTimer;
var nbaPlayerEyesDiv = document.getElementById("nba-player-eyes");
var blinkNbaPlayerTimer;
var contactContainerDiv = document.getElementById("contact-container");
var socialContainerDiv = document.getElementById("social-container");
var canAnimateSocialContainer;
var happyRobbyTimer;
var isRobbyHappy = false;
var scrollOrSwipeTextContainer1Div = document.getElementById("scroll-or-swipe-text-container-1");
var scrollOrSwipeTextContainer2Div = document.getElementById("scroll-or-swipe-text-container-2");
var canHideScrollOrSwipeTextContainer = true;
var scrollOrSwipeTextContainerTimer;
var canAnimateScrollOrSwipeTextContainer = true;
var contactConfirmationContainerArray = new Array();
var emailAddressDiv = document.getElementById("email-address");
var emailSubjectDiv = document.getElementById("email-subject");
var emailMessageDiv = document.getElementById("email-message");
var isContactConfirmationContainerVisible = true;
var waterfall1Div = document.getElementById("waterfall-1");
var waterfall2Div = document.getElementById("waterfall-2");
var waterfallTimer;
var touchStartX = 0;
var touchCurrentX = 0;
var touchEndX = 0;
var fireworksContainerDiv = document.getElementById("fireworks-container");
var fireworkArray = new Array();
var fireworkSvgArray = new Array();
var cArray = new Array();
var drawFireworkTimer;
var drawFireworkCounter = 0;
var fireworkRowNumber = 8;
var fireworkColumnNumber = 16;
var fireworkLayerNumber = 0;
var fireworkDotRadius = 5;
var fireworkCenterX;
var fireworkCenterY;
var fireworkOneRadiusDistance;
var fireworkOneRotationAngle;
var drawOneLayerOfFireworkTimer;
var canDrawManyFireworks = true;
disableIsRobbyJumpingAndFalling();
var landInformationContainerArray = new Array();
landInformationContainerArray.push(about1ContainerDiv,about2ContainerDiv,about3ContainerDiv,experience1ContainerDiv,experience2ContainerDiv,experience3ContainerDiv);
var seaInformationContainerArray = new Array();
seaInformationContainerArray.push(skill1ContainerDiv,skill2ContainerDiv,skill3ContainerDiv);
setAllNbaCounter();
var canScrollOrSwipe;
disableScrollOrSwipe();
//so browser will not jump to last position when refresh$(window).on('beforeunload',function(){
$(window).scrollTop(0);
}
);
window.onload = function(){
if (deviceName != "computer"){
initTouchEvents();
}
storeDivs();
setFrontLayerVerticalHeight();
setBannersContainerVerticalPosition();
shiftUpPreloader();
//function in preloader.jsshowContainer();
initVariablesAfterShowContainer();
//so the div width will be detectedshiftUpHorizontalLayersAfterEverythingLoaded();
disableAnimateRobbyRunSwim();
resetVariables();
setPageHeight();
setLayerSpeed();
positionVerticalLayersHorizontally();
positionBalloonAndRobbyContainerHorizontally();
positionBalloonVertically();
positionContactContainer();
positionFireworksContainer();
resetFunctions();
positionSplashContainer();
setRobbyLeftAndRightEdge();
positionContactConfirmationContainer();
hideContactConfirmationContainer();
hideRobbyEyesClose();
animateRobbyEyes();
animateWaterfall();
positionSeaFloorObjectsVertically();
openSquidHands();
hideBubble();
setRobotHandsToDefault();
createFireworkSvg();
appendFireworkSvgToContainer();
}
window.onscroll = function (e){
if (canScrollOrSwipe == true) //to avoid user swipe when window is still resizing after screen orientation changed on table{
detectPageVerticalPosition();
runTheseFunctionsAfterScrollOrSwipe();
}
}
window.onresize = function (e){
setFrontLayerVerticalHeight();
setBannersContainerVerticalPosition();
setPageHeight();
detectPageVerticalPosition();
orientRobby();
setLayerSpeed();
moveLayers();
//before blinkRobbyEyes(),positionBalloonAndRobbyContainerHorizontally(),animateRobbyRunSwim(),shiftRobbyFrame(),positionContactConfirmationContainer()setRobbyLeftAndRightEdge();
shiftUpDownHorizontalLayersOnResize();
animateInformationAndEnemiesElements();
positionSplashContainer();
positionRobbyContainerVertically();
positionBalloonVertically();
positionSocialContainer();
positionPlants();
hideContactConfirmationContainer();
positionContactConfirmationContainer();
positionExperienceTextContainer();
positionChainBlockAndStringContainer();
positionSeaFloorObjectsVertically();
enableScrollOrSwipe();
printResizeText();
}
//use orientation change function below to handle so orientation screen bug in android$(window).on('orientationchange',orientationChangeHandler);
function orientationChangeHandler(e){
disableScrollOrSwipe();
setTimeout(function(){
$(window).trigger('resize');
}
,500);
}
function enableScrollOrSwipe(){
canScrollOrSwipe = true;
}
function disableScrollOrSwipe(){
canScrollOrSwipe = false;
}
function initVariablesAfterShowContainer() //give variables value based on width height div etc{
fireworkCenterX = 0.5 * fireworkArray[0].offsetWidth;
fireworkCenterY = 0.5 * fireworkArray[0].offsetHeight;
fireworkOneRadiusDistance = (fireworkCenterY - fireworkDotRadius) / fireworkRowNumber;
fireworkOneRotationAngle = 2 * Math.PI / fireworkColumnNumber;
}
function resetVariables(){
pageVerticalPosition = 0;
canAnimatePlantInformation = true;
canAnimateBuildingInformation = true;
if (isFishStillAnimating == false){
canAnimateFishInformation = true;
}
if (isCrabStillAnimating == false){
canAnimateCrabInformation = true;
}
if (isTurtleStillAnimating == false){
canAnimateTurtleInformation = true;
}
canAnimateRobotInformation = true;
canAnimateSquidInformation = true;
canAnimateAlienInformation = true;
canAnimateNbaInformation = true;
canAnimateSocialContainer = true;
canDrawManyFireworks = true;
}
function resetFunctions(){
positionPlants();
positionBuildings();
if (isFishStillAnimating == false){
positionSeaAnimals(fishArray,numberOfFishInEachRowArray,150,100);
}
if (isCrabStillAnimating == false){
positionSeaAnimals(crabArray,numberOfCrabInEachRowArray,150,100);
}
if (isTurtleStillAnimating == false){
positionSeaAnimals(turtleArray,numberOfTurtleInEachRowArray,150,100);
}
positionNbaElements();
positionExperience1Elements();
positionExperience2Elements();
positionExperience3Elements();
positionSocialContainer();
positionExperienceTextContainer();
positionChainBlockAndStringContainer();
resetFireworkSvg();
}
function initTouchEvents(){
document.addEventListener("touchstart",handleStart,false);
document.addEventListener("touchmove",handleMove,false);
document.addEventListener("touchend",handleEnd,false);
}
function handleStart(e){
//disable preventDefault() on touchstart so url will still be clickable//e.preventDefault();
touchStartX = e.targetTouches[0].pageX;
pageVerticalPositionOnTouch = pageVerticalPosition;
}
function handleMove(e){
e.preventDefault();
touchCurrentX = e.targetTouches[0].pageX;
if (canScrollOrSwipe == true) //to avoid user swipe when window is still resizing after screen orientation changed on table{
detectPageVerticalPosition();
runTheseFunctionsAfterScrollOrSwipe();
}
}
function handleEnd(e){
e.preventDefault();
touchEndX = e.changedTouches[0].pageX;
}
function runTheseFunctionsAfterScrollOrSwipe(){
orientRobby();
checkRobbyJumpFallSwim();
moveLayers();
shiftUpDownHorizontalLayers();
animateInformationAndEnemiesElements();
animateRobbyRunSwim();
hideScrollOrSwipeTextContainer();
hideContactConfirmationContainer();
deviceFunctionScrollSwipe();
printScrollSwipeText();
}
function deviceFunctionScrollSwipe(){
if (deviceName != "computer"){
if (layersMovement == "vertical"){
positionHorizontalLayersToHaveSameRightPosition();
}
}
}
function showContainer(){
containerDiv.setAttribute("class","");
}
function shiftUpHorizontalLayersAfterEverythingLoaded(){
for (var i=0;
i<layerHorizontalArray.length;
i++){
$(layerHorizontalArray[i]).stop().animate({
top:"0px"}
,1000,function(){
finishShiftUpHorizontalLayersAfterEverythingLoaded()}
);
}
}
function finishShiftUpHorizontalLayersAfterEverythingLoaded(){
if (canFinishShiftUpHorizontalLayersAfterEverythingLoaded == true){
canFinishShiftUpHorizontalLayersAfterEverythingLoaded = false;
isPreloadShiftUpAnimationFinish = true;
makePageScrollable();
shiftDownRobbyContainer();
animateScrollOrSwipeTextContainer();
}
}
function shiftDownRobbyContainer(){
setRobbyJumpDownAndFallFrame();
$(robbyContainerDiv).stop().animate({
bottom:"20%"}
,500,function(){
setRobbyStaticFrame();
enableAnimateRobbyRunSwim()}
);
//to make robby run animation work from beginning in internet explorer 8if ((browserName == "internet explorer") && (browserVersion <= 8)){
enableAnimateRobbyRunSwim();
}
}
function makePageScrollable(){
contentDiv.setAttribute("class","");
enableScrollOrSwipe();
}
function setFrontLayerVerticalHeight(){
layerVerticalArray[layerVerticalArray.length - 1].style.height = (2 * containerDiv.offsetHeight) + bannersContainerDiv.offsetHeight + gapBetweenContactCloudAndBannersContainer + "px";
}
function setBannersContainerVerticalPosition(){
bannersContainerDiv.style.bottom = containerDiv.offsetHeight + "px";
}
function setPageHeight(){
pageDiv.style.height = layerHorizontalArray[layerHorizontalArray.length - 1].offsetWidth - containerDiv.offsetWidth + layerVerticalArray[layerVerticalArray.length - 1].offsetHeight + distanceBetweenRobbyAndBalloon + "px";
}
function setLayerSpeed(){
//empty array firstwhile (layerHorizontalSpeedArray.length > 0){
layerHorizontalSpeedArray.pop();
}
while (layerVerticalSpeedArray.length > 0){
layerVerticalSpeedArray.pop();
}
//fill arrayfor (var i=0;
i<layerHorizontalArray.length;
i++){
var layerHorizontalSpeed = (layerHorizontalArray[i].offsetWidth - containerDiv.offsetWidth) / (layerHorizontalArray[layerHorizontalArray.length - 1].offsetWidth - containerDiv.offsetWidth);
layerHorizontalSpeedArray.push(layerHorizontalSpeed);
}
for (var i=0;
i<layerVerticalArray.length;
i++){
var layerVerticalSpeed = (layerVerticalArray[i].offsetHeight - containerDiv.offsetHeight) / (layerVerticalArray[layerVerticalArray.length - 1].offsetHeight - containerDiv.offsetHeight);
layerVerticalSpeedArray.push(layerVerticalSpeed);
}
}
function detectPageVerticalPosition(){
previousPageVerticalPosition = pageVerticalPosition;
if (deviceName == "computer"){
if (browserName == "internet explorer"){
pageVerticalPosition = document.documentElement.scrollTop;
}
else{
pageVerticalPosition = pageYOffset;
}
}
else //mobile{
pageVerticalPosition = pageVerticalPositionOnTouch + (touchStartX - touchCurrentX);
if (pageVerticalPosition < 0){
pageVerticalPosition = 0;
}
if (pageVerticalPosition > pageDiv.offsetHeight - containerDiv.offsetHeight){
pageVerticalPosition = pageDiv.offsetHeight - containerDiv.offsetHeight;
}
}
deltaPageVerticalPosition = pageVerticalPosition - previousPageVerticalPosition;
if (pageVerticalPosition <= 0){
resetVariables();
resetFunctions();
}
}
function moveLayers(){
setLayersMovement();
if (layersMovement == "horizontal"){
//move layer horizontalfor (var i=0;
i<layerHorizontalArray.length;
i++){
layerHorizontalArray[i].style.left = (-1 * layerHorizontalSpeedArray[i] * pageVerticalPosition) + "px";
}
positionLayerHorizontalToBottom();
clearHappyRobbyTimer();
positionVerticalLayersHorizontally();
//move vertical layers to follow horizontal layer movement}
if (layersMovement == "vertical"){
//shift layer vertical positionfor (var i=0;
i<layerVerticalArray.length;
i++){
layerVerticalArray[i].style.bottom = (-1 * layerVerticalSpeedArray[i] * (pageVerticalPosition - (layerHorizontalArray[layerHorizontalArray.length - 1].offsetWidth - containerDiv.offsetWidth))) + "px";
}
positionVerticalLayersAtLeftMost();
//make layer vertical position has same left positionpositionHorizontalLayersToHaveSameRightPosition();
//make layer horizontal position has same right positionpositionHorizontalLayersVertically();
clearShiftRobbyFrameTimer();
//make robby stand still when he is inside balloonclearHappyRobbyTimer();
}
if (layersMovement == "not moving 1"){
positionVerticalLayersAtLeftMost();
positionVerticalLayersToHaveSameTopPosition();
positionHorizontalLayersAtBottomMost();
positionHorizontalLayersToHaveSameRightPosition();
clearHappyRobbyTimer();
}
if (layersMovement == "not moving 2"){
positionVerticalLayersAtLeftMost();
positionVerticalLayersToHaveSameTopPosition();
positionHorizontalLayersAtBottomMost();
positionHorizontalLayersToHaveSameRightPosition();
animateSocialContainer();
happyRobby();
drawManyFireworks();
}
positionBalloonAndRobbyContainerHorizontally();
positionContactContainer();
positionFireworksContainer();
}
function positionVerticalLayersAtLeftMost(){
for (var i=0;
i<layerVerticalArray.length;
i++){
layerVerticalArray[i].style.left = "0px";
}
}
function positionHorizontalLayersToHaveSameRightPosition(){
for (var i=0;
i<layerHorizontalArray.length;
i++){
layerHorizontalArray[i].style.left = containerDiv.offsetWidth - layerHorizontalArray[i].offsetWidth + "px";
}
}
function positionHorizontalLayersVertically(){
for (var i=0;
i<layerHorizontalArray.length;
i++){
//layerHorizontalArray[i].style.top = layerVerticalArray[i].offsetTop + layerVerticalArray[i].offsetHeight - containerDiv.offsetHeight + "px";
layerHorizontalArray[i].style.top = layerVerticalArray[layerVerticalArray.length - 1].offsetTop + layerVerticalArray[layerVerticalArray.length - 1].offsetHeight - containerDiv.offsetHeight + "px";
}
}
function positionHorizontalLayersAtBottomMost(){
for (var i=0;
i<layerHorizontalArray.length;
i++){
layerHorizontalArray[i].style.top = layerVerticalArray[layerVerticalArray.length - 1].offsetHeight - containerDiv.offsetHeight + "px";
}
}
function setRobbyLeftAndRightEdge(){
var distanceBetweenRobbyDivEdgeToHisFeet = 65;
robbyRightEdge = 0.5 * (containerDiv.offsetWidth + robbyDiv.offsetWidth) - distanceBetweenRobbyDivEdgeToHisFeet;
robbyLeftEdge = 0.5 * (containerDiv.offsetWidth - robbyDiv.offsetWidth) + distanceBetweenRobbyDivEdgeToHisFeet;
}
function positionVerticalLayersToHaveSameTopPosition(){
for (var i=0;
i<layerVerticalArray.length;
i++){
layerVerticalArray[i].style.bottom = containerDiv.offsetHeight - layerVerticalArray[i].offsetHeight + "px";
}
}
function positionVerticalLayersBottomToHorizontalLayersBottom(){
for (var i=0;
i<layerVerticalArray.length;
i++){
layerVerticalArray[i].style.bottom = (-1 * layerHorizontalArray[i].offsetTop) + "px";
}
}
function shiftUpDownHorizontalLayers(){
if (((previousPageVerticalPosition < sea1Div.offsetLeft - robbyLeftEdge) || (previousPageVerticalPosition > sea1Div.offsetLeft + sea1Div.offsetWidth - robbyRightEdge))&&((pageVerticalPosition >= sea1Div.offsetLeft - robbyLeftEdge) && (pageVerticalPosition <= sea1Div.offsetLeft + sea1Div.offsetWidth - robbyRightEdge))){
isRobbySwimming = true;
shiftUpLayerHorizontal();
shiftRobbyToSeaFloor();
createBubble();
}
if (((previousPageVerticalPosition >= sea1Div.offsetLeft - robbyLeftEdge) && (previousPageVerticalPosition <= sea1Div.offsetLeft + sea1Div.offsetWidth - robbyRightEdge))&&((pageVerticalPosition < sea1Div.offsetLeft - robbyLeftEdge) || (pageVerticalPosition > sea1Div.offsetLeft + sea1Div.offsetWidth - robbyRightEdge))){
isRobbySwimming = false;
shiftDownLayerHorizontal();
shiftRobbyToGroundLevel();
clearInterval(bubbleTimer);
clearInterval(blinkSeaAnimalsTimer);
}
}
function shiftUpDownHorizontalLayersOnResize(){
if(((pageVerticalPosition >= sea1Div.offsetLeft - robbyLeftEdge) && (pageVerticalPosition <= sea1Div.offsetLeft + sea1Div.offsetWidth - robbyRightEdge))){
clearInterval(shiftUpLayerHorizontalTimer);
clearInterval(shiftDownLayerHorizontalTimer);
isRobbySwimming = true;
positionLayerHorizontalToTop();
//need to shift up vertical layers too,so the cloud in vertical layers are not entering the seapositionVerticalLayersBottomToHorizontalLayersBottom();
createBubble();
}
if(((pageVerticalPosition < sea1Div.offsetLeft - robbyLeftEdge) || (pageVerticalPosition > sea1Div.offsetLeft + sea1Div.offsetWidth - robbyRightEdge))){
clearInterval(shiftUpLayerHorizontalTimer);
clearInterval(shiftDownLayerHorizontalTimer);
isRobbySwimming = false;
if (layersMovement == "horizontal"){
positionLayerHorizontalToBottom();
positionVerticalLayersBottomToHorizontalLayersBottom();
}
else{
positionHorizontalLayersAtBottomMost();
positionHorizontalLayersToHaveSameRightPosition();
}
clearInterval(bubbleTimer);
clearInterval(blinkSeaAnimalsTimer);
}
}
function setShiftUpLayerHorizontalDistance(){
shiftUpLayerHorizontalDistance = 0.75 * containerDiv.offsetHeight;
}
function shiftUpLayerHorizontal(){
setShiftUpLayerHorizontalDistance();
//shift up horizontal layersclearShiftUpDownLayerHorizontalTimer();
shiftUpLayerHorizontalTimer = setInterval(function(){
moveUpLayerHorizontal()}
,shiftUpDownLayerHorizontalInterval);
disableIsRobbyJumpingAndFalling();
}
function moveUpLayerHorizontal() //robby from ground into sea{
if (layersMovement == "horizontal"){
for (var i=0;
i<layerHorizontalArray.length;
i++){
var layerHorizontalArrayTop = layerHorizontalArray[i].offsetTop - shiftUpDownLayerHorizontalIncrement;
//shift up horizontal layersif (layerHorizontalArrayTop <= -shiftUpLayerHorizontalDistance){
layerHorizontalArrayTop = -shiftUpLayerHorizontalDistance;
layerHorizontalArray[i].style.top = layerHorizontalArrayTop + "px";
clearInterval(shiftUpLayerHorizontalTimer);
}
else{
layerHorizontalArray[i].style.top = layerHorizontalArrayTop + "px";
}
//check if robby already below sea level or notif (robbyContainerDiv.offsetTop > sea1Div.offsetTop + layerHorizontalArray[layerHorizontalArray.length - 1].offsetTop){
isRobbyBelowSeaLevel = true;
}
}
//need to shift up vertical layers too,so the cloud in vertical layers are not entering the seapositionVerticalLayersBottomToHorizontalLayersBottom();
}
else{
clearInterval(shiftUpLayerHorizontalTimer);
positionHorizontalLayersAtBottomMost();
positionHorizontalLayersToHaveSameRightPosition();
isRobbyBelowSeaLevel = false;
}
}
function shiftDownLayerHorizontal(){
//shift down horizontal layersclearShiftUpDownLayerHorizontalTimer();
shiftDownLayerHorizontalTimer = setInterval(function(){
moveDownLayerHorizontal()}
,shiftUpDownLayerHorizontalInterval);
}
function moveDownLayerHorizontal() //robby from sea to ground{
if (layersMovement == "horizontal"){
for (var i=0;
i<layerHorizontalArray.length;
i++){
var layerHorizontalArrayTop = layerHorizontalArray[i].offsetTop + shiftUpDownLayerHorizontalIncrement;
//shift down horizontal layersif (layerHorizontalArrayTop >= 0){
layerHorizontalArrayTop = 0;
layerHorizontalArray[i].style.top = layerHorizontalArrayTop + "px";
clearInterval(shiftDownLayerHorizontalTimer);
}
else{
layerHorizontalArray[i].style.top = layerHorizontalArrayTop + "px";
}
//check if robby already above sea level or notif (robbyContainerDiv.offsetTop < sea1Div.offsetTop + layerHorizontalArray[layerHorizontalArray.length - 1].offsetTop){
isRobbyBelowSeaLevel = false;
}
}
//need to shift down vertical layers backpositionVerticalLayersBottomToHorizontalLayersBottom();
}
else{
clearInterval(shiftDownLayerHorizontalTimer);
positionHorizontalLayersAtBottomMost();
positionHorizontalLayersToHaveSameRightPosition();
isRobbyBelowSeaLevel = false;
}
}
function clearShiftUpDownLayerHorizontalTimer(){
clearInterval(shiftUpLayerHorizontalTimer);
clearInterval(shiftDownLayerHorizontalTimer);
}
function shiftRobbyToGroundLevel(){
$(robbyContainerDiv).stop().animate({
bottom:containerDiv.offsetHeight - groundAndGrassContainer1Div.offsetTop + "px"}
,300,function(){
}
);
}
function shiftRobbyToSeaFloor(){
$(robbyContainerDiv).stop().animate({
bottom:seaFloorDiv.offsetHeight + "px"}
,300,function(){
}
);
}
function positionLayerHorizontalToTop(){
if (isRobbySwimming == true){
setShiftUpLayerHorizontalDistance();
//shift up horizontal layersfor (var i=0;
i<layerHorizontalArray.length;
i++){
layerHorizontalArray[i].style.top = -shiftUpLayerHorizontalDistance + "px";
}
//shift up vertical layers toofor (var i=0;
i<layerVerticalArray.length;
i++){
layerVerticalArray[i].style.bottom = shiftUpLayerHorizontalDistance + "px";
}
}
}
function positionLayerHorizontalToBottom(){
if (isRobbySwimming == false){
//make sure horizontal layers have same vertical position after they are moved verticallyfor (var i=0;
i<layerHorizontalArray.length;
i++){
layerHorizontalArray[i].style.top = "0px";
}
//make layer vertical position has same bottom positionfor (var i=0;
i<layerVerticalArray.length;
i++){
layerVerticalArray[i].style.bottom = "0px";
}
}
}
function checkRobbyJumpFallSwim(){
if (layersMovement == "horizontal"){
if (isRobbySwimming == true){
if (isRobbyBelowSeaLevel == true) //to avoid robby swims above the water level{
robbySwimUp();
}
}
else{
for (var i=0;
i<elevationArray.length;
i++){
robbyJumpUp(i);
robbyFall(i);
}
}
}
}
function robbyJumpUp(i){
//when character move from left to rightif (((previousPageVerticalPosition <= elevationArray[i].offsetLeft - robbyRightEdge) && (pageVerticalPosition > elevationArray[i].offsetLeft - robbyRightEdge))||//when character move from right to left((previousPageVerticalPosition >= elevationArray[i].offsetLeft + elevationArray[i].offsetWidth - robbyLeftEdge) && (pageVerticalPosition < elevationArray[i].offsetLeft + elevationArray[i].offsetWidth - robbyLeftEdge))){
positionRobbyAtGroundLevel();
$(robbyContainerDiv).stop().animate({
bottom:[containerDiv.offsetHeight - groundAndGrassContainer1Div.offsetTop + 300,'easeOutCubic']}
,300,function(){
robbyJumpDown(i)}
);
setRobbyJumpUpFrame();
}
}
function robbyJumpDown(i){
//when character move from left to right and landing on elevationif ((pageVerticalPosition > elevationArray[i].offsetLeft - robbyRightEdge) && (pageVerticalPosition < elevationArray[i].offsetLeft + elevationArray[i].offsetWidth - robbyLeftEdge)){
$(robbyContainerDiv).stop().animate({
bottom:[containerDiv.offsetHeight - elevationArray[i].offsetTop,'easeInCubic']}
,300,function(){
disableIsRobbyJumpingAndFalling();
setRobbyStaticFrame()}
);
setRobbyJumpDownAndFallFrame();
}
}
function robbyFall(i){
//when character move from left to rightif (((previousPageVerticalPosition < elevationArray[i].offsetLeft + elevationArray[i].offsetWidth - robbyLeftEdge) && (pageVerticalPosition >= elevationArray[i].offsetLeft + elevationArray[i].offsetWidth - robbyLeftEdge))||//when character move from right to left((previousPageVerticalPosition > elevationArray[i].offsetLeft - robbyRightEdge) && (pageVerticalPosition <= elevationArray[i].offsetLeft - robbyRightEdge))){
isRobbyFalling = true;
setRobbyJumpDownAndFallFrame();
$(robbyContainerDiv).stop().animate({
bottom:[containerDiv.offsetHeight - groundAndGrassContainer1Div.offsetTop,'easeInCubic']}
,300,function(){
disableIsRobbyJumpingAndFalling();
setRobbyStaticFrame()}
);
}
}
function setRobbyJumpUpFrame(){
clearShiftRobbyFrameTimer();
isRobbyJumping = true;
robbyFramesDiv.style.left = (-1 * robbyStartJumpFrame * robbyOneFrameWidth) + "px";
}
function setRobbyJumpDownAndFallFrame(){
robbyFramesDiv.style.left = (-1 * robbyStopJumpFrame * robbyOneFrameWidth) + "px";
}
function setRobbyStaticFrame(){
robbyFramesDiv.style.left = "0px";
}
function disableIsRobbyJumpingAndFalling(){
isRobbyJumping = false;
isRobbyFalling = false;
}
function robbySwimUp(){
getSwimUpHeight();
if (swimUpHeight > 0){
var swimUpDistance = seaFloorDiv.offsetHeight + swimUpHeight + "px";
var robbySwimUpTime = 3 * swimUpHeight;
var robbySwimDownTime = 6 * swimUpHeight;
$(robbyContainerDiv).stop().animate({
bottom:swimUpDistance}
,robbySwimUpTime,function(){
robbySwimDown(robbySwimDownTime)}
);
}
}
function robbySwimDown(robbySwimDownTime){
$(robbyContainerDiv).stop().animate({
bottom:seaFloorDiv.offsetHeight + "px"}
,robbySwimDownTime,function(){
setRobbyStaticFrame()}
);
if (robbyContainerDiv.offsetTop + robbyContainerDiv.offsetHeight <= containerDiv.offsetHeight - seaFloorDiv.offsetHeight - minimumVerticalDistanceToTriggerRobbySwimDownFrame) //if robby position high enough when swim down{
robbyFramesDiv.style.left = (-1 * robbySwimDownFrame * robbyOneFrameWidth) + "px";
//swim with cape on top}
else{
setRobbyStaticFrame();
}
}
function animateRobbyEyes(){
clearInterval(blinkRobbyEyesTimer);
blinkRobbyEyesTimer = setInterval(function(){
blinkRobbyEyes()}
,4000);
}
function blinkRobbyEyes(){
if (layersMovement != "not moving 2"){
$(robbyEyesCloseDiv).fadeTo(0,1);
$(robbyEyesCloseDiv).stop().delay(300).animate({
opacity:0}
,0,function(){
}
);
}
}
function hideRobbyEyesClose(){
$(robbyEyesCloseDiv).fadeTo(0,0);
}
function getSwimUpHeight(){
swimUpHeight = Math.abs(deltaPageVerticalPosition);
var maxSwimUpHeight = sea1Div.offsetHeight - robbyDiv.offsetHeight;
if (swimUpHeight > maxSwimUpHeight){
swimUpHeight = maxSwimUpHeight;
}
}
function positionVerticalLayersHorizontally(){
for (var i=0;
i<layerVerticalArray.length;
i++){
layerVerticalArray[i].style.left = layerHorizontalArray[i].offsetLeft + layerHorizontalArray[i].offsetWidth - containerDiv.offsetWidth + "px";
}
}
function positionBalloonAndRobbyContainerHorizontally(){
var layerVerticalMovementDistance = (pageVerticalPosition * layerHorizontalSpeedArray[layerHorizontalSpeedArray.length - 1]) - (layerHorizontalArray[layerHorizontalArray.length - 1].offsetWidth - containerDiv.offsetWidth);
var robbyMaxHorizontalDistanceFromCenter = 250;
var balloonMaxHorizontalDistanceFromCenter = 50;
//calculate robbyHorizontalDistancerobbyMaxHorizontalDistance = (0.5 * containerDiv.offsetWidth) + robbyMaxHorizontalDistanceFromCenter;
var robbyHorizontalDistance = (0.5 * containerDiv.offsetWidth) + layerVerticalMovementDistance;
if (robbyHorizontalDistance >= robbyMaxHorizontalDistance){
robbyHorizontalDistance = robbyMaxHorizontalDistance}
//calculate balloonHorizontalDistancevar balloonMaxHorizontalDistance = (0.5 * containerDiv.offsetWidth) + balloonMaxHorizontalDistanceFromCenter;
var balloonHorizontalDistance = (0.5 * (containerDiv.offsetWidth - balloonDiv.offsetWidth)) + layerVerticalMovementDistance;
if (balloonHorizontalDistance >= balloonMaxHorizontalDistance){
balloonHorizontalDistance = balloonMaxHorizontalDistance;
}
if (layersMovement == "vertical"){
//shift balloon to rightballoonDiv.style.left = balloonHorizontalDistance + "px";
//shift robby to rightrobbyContainerDiv.style.left = robbyHorizontalDistance + "px";
}
else if ((layersMovement == "not moving 1") || (layersMovement == "not moving 2")){
//robby start walk on the cloudrobbyContainerDiv.style.left = robbyHorizontalDistance + pageVerticalPosition - (pageDiv.offsetHeight - containerDiv.offsetHeight - distanceBetweenRobbyAndBalloon) + "px";
//reposition balloon for on resizeballoonDiv.style.left = balloonHorizontalDistance + "px";
}
else{
//balloon and robby still in normal positionballoonDiv.style.left = layerHorizontalArray[layerHorizontalArray.length - 1].offsetLeft + layerHorizontalArray[layerHorizontalArray.length - 1].offsetWidth - (0.5 * (containerDiv.offsetWidth + balloonDiv.offsetWidth)) + "px";
robbyContainerDiv.style.left = "50%";
}
}
function positionBalloonVertically() //to fix the bug in android change screen orientation{
balloonDiv.style.bottom = (0.2 * containerDiv.offsetHeight) + "px";
}
function setLayersMovement(){
if (pageVerticalPosition * layerHorizontalSpeedArray[layerHorizontalSpeedArray.length - 1] <= layerHorizontalArray[layerHorizontalArray.length - 1].offsetWidth - containerDiv.offsetWidth){
layersMovement = "horizontal";
}
else if ((pageVerticalPosition >= pageDiv.offsetHeight - containerDiv.offsetHeight - distanceBetweenRobbyAndBalloon) && (pageVerticalPosition < pageDiv.offsetHeight - containerDiv.offsetHeight)){
layersMovement = "not moving 1";
//robby walking from balloon to the finish line}
else if (pageVerticalPosition >= pageDiv.offsetHeight - containerDiv.offsetHeight){
layersMovement = "not moving 2";
//robby at the finish line}
else{
layersMovement = "vertical";
}
}
function orientRobby(){
if (deltaPageVerticalPosition > 0){
robbyFramesDiv.style.top = "0px";
robbyEyesCloseDiv.style.left = "90px";
}
if (deltaPageVerticalPosition < 0){
robbyFramesDiv.style.top = "-200px";
robbyEyesCloseDiv.style.left = "55px";
}
}
function storeDivs(){
var divArray = document.getElementsByTagName("div");
for (var i=0;
i<divArray.length;
i++){
if (divArray[i].getAttribute("class") == "fish"){
fishArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "fish-eyes"){
fishEyeArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "crab"){
crabArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "crab-eyes"){
crabEyeArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "turtle"){
turtleArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "turtle-eyes"){
turtleEyeArray.push(divArray[i]);
}
if ((divArray[i].getAttribute("class") == "nba-board-blue") || (divArray[i].getAttribute("class") == "nba-board-red")){
nbaBoardArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "elevation"){
elevationArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "plant"){
plantArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "building"){
buildingArray.push(divArray[i]);
}
if ((divArray[i].getAttribute("class") == "building-enemy-face-a-eyes") || (divArray[i].getAttribute("class") == "building-enemy-face-b-eyes")){
buildingEnemyFaceEyeArray.push(divArray[i]);
}
if ((divArray[i].getAttribute("class") == "building-leg-frame-a") || (divArray[i].getAttribute("class") == "building-leg-frame-b")){
buildingLegFrameArray.push(divArray[i]);
}
if ((divArray[i].getAttribute("class") == "building-leg-container-a") || (divArray[i].getAttribute("class") == "building-leg-container-b")){
buildingLegContainerArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "contact-confirmation-container"){
contactConfirmationContainerArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "experience-text-container"){
experienceTextContainerArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "chain-block-and-string-container"){
chainBlockAndStringContainerArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "layer-horizontal"){
layerHorizontalArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "layer-vertical"){
layerVerticalArray.push(divArray[i]);
}
if ((divArray[i].getAttribute("class") == "algae-a") || (divArray[i].getAttribute("class") == "algae-b") || (divArray[i].getAttribute("class") == "title-skills-class")){
seaFloorFrontObjectArray.push(divArray[i]);
}
if ((divArray[i].getAttribute("class") == "coral") || (divArray[i].getAttribute("class") == "coral-big")){
seaFloorBackObjectArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "squid-hand-close"){
squidHandCloseArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "squid-hand-open"){
squidHandOpenArray.push(divArray[i]);
}
if (divArray[i].getAttribute("class") == "firework"){
fireworkArray.push(divArray[i]);
}
}
}
function animatePlants(){
for (var i=0;
i<plantArray.length;
i++){
$(plantArray[i]).stop().delay(i * 300).animate({
top:[plantTargetTopObjectArray[i].offsetTop,'easeOutElastic']}
,800,function(){
}
);
}
}
function positionPlants(){
for (var i=0;
i<plantArray.length;
i++){
if (canAnimatePlantInformation == true){
plantArray[i].style.top = "100%";
}
else{
plantArray[i].style.top = plantTargetTopObjectArray[i].offsetTop + "px";
}
}
}
function animateBuildings(){
clearInterval(buildingLegsTimer);
buildingLegsTimer = setInterval(function(){
animateBuildingsLegs()}
,200);
for (var i=0;
i<buildingArray.length;
i++){
$(buildingArray[i]).stop().delay(i * 300).animate({
left:[buildingTargetLeftArray[i],'easeOutCubic']}
,1000,function(){
}
);
}
}
function animateBuildingsLegs(){
buildingCounter = buildingCounter + 1;
for (var i=0;
i<buildingArray.length;
i++){
if (buildingArray[buildingArray.length - 1].offsetLeft == buildingTargetLeftArray[buildingTargetLeftArray.length - 1]) //if last building already stop moving{
buildingLegFrameArray[buildingLegFrameArray.length - 1].style.left = "0px";
clearInterval(buildingLegsTimer);
buildingCounter = 0;
return;
}
else if ((buildingArray[i].offsetLeft > buildingTargetLeftArray[i]) && (buildingArray[i].offsetLeft < buildingEarlyPositionArray[i])) //if building still running{
buildingLegFrameArray[i].style.left = (-1 * buildingLegContainerArray[i].offsetWidth * (buildingCounter % 2)) + "px";
}
else //if building already stop moving{
buildingLegFrameArray[i].style.left = "0px";
}
}
}
function animateBuildingsEyes(){
clearInterval(buildingBlinkTimer);
buildingBlinkTimer = setInterval(function(){
blinkBuildings()}
,4000);
//start to blink building eyes}
function blinkBuildings(){
if ((pageVerticalPosition + (0.5 * containerDiv.offsetWidth) < about2ContainerDiv.offsetLeft) || (pageVerticalPosition + (0.5 * containerDiv.offsetWidth) > about2ContainerDiv.offsetLeft + about2ContainerDiv.offsetWidth)){
clearInterval(buildingBlinkTimer);
}
else{
var buildingRandomNumber = Math.floor(Math.random() * buildingArray.length);
//generate random number between 0-2$(buildingEnemyFaceEyeArray[buildingRandomNumber]).fadeTo(0,1);
$(buildingEnemyFaceEyeArray[buildingRandomNumber]).stop().delay(300).animate({
opacity:0}
,0,function(){
}
);
}
}
function positionBuildings(){
for (var i=0;
i<buildingArray.length;
i++){
buildingArray[i].style.left = buildingEarlyPositionArray[i] + "px";
}
}
function nbaBoardsJump(){
for (var i=0;
i<nbaBoardArray.length;
i++){
$(nbaBoardArray[i]).stop().delay(i * 100).animate({
bottom:[200,'easeOutCubic']}
,300,function(){
nbaBoardsFall()}
);
}
}
function nbaBoardsFall(){
$(nbaBoardArray[nbaBoardsCounter]).stop().animate({
bottom:[0,'easeInCubic']}
,300,function(){
}
);
nbaBoardsCounter = nbaBoardsCounter + 1;
if (nbaBoardsCounter >= nbaBoardArray.length){
nbaBoardsCounter = 0;
//reset nbaBoardsCounter}
}
function positionNbaBoard(){
for (var i=0;
i<nbaBoardArray.length;
i++){
nbaBoardArray[i].style.bottom = "0px";
}
}
function animateNbaBoardsContinuously(){
clearInterval(nbaBoardsAnimationTimer);
nbaBoardsAnimationTimer = setInterval(function(){
nbaBoardsJump()}
,3000);
}
function animateNbaPlayer(){
nbaPlayerRun();
}
function nbaPlayerRun(){
clearInterval(nbaPlayerTimer);
nbaPlayerTimer = setInterval(function(){
animateNbaPlayerRun()}
,200);
$(nbaPlayerContainerDiv).stop().animate({
left:"690px"}
,1000,function(){
nbaPlayerJump()}
);
}
function animateNbaPlayerRun(){
nbaPlayerCounter = nbaPlayerCounter + 1;
shiftNbaPlayerFrame(nbaPlayerCounter % 2);
}
function nbaPlayerJump(){
clearInterval(nbaPlayerTimer);
nbaPlayerCounter = 0;
shiftNbaPlayerFrame(2);
$(nbaPlayerContainerDiv).stop().animate({
left:"570px",bottom:[200,'easeOutCubic']}
,300,function(){
nbaPlayerFall()}
);
}
function nbaPlayerFall(){
shiftNbaPlayerFrame(3);
shakeRim();
bounceBall();
nbaBoardsJump();
animateNbaBoardsContinuously();
$(nbaPlayerContainerDiv).stop().animate({
left:"450px",bottom:[0,'easeInCubic']}
,300,function(){
}
);
}
function shiftNbaPlayerFrame(nbaPlayerFrameNumber){
nbaPlayerFrameDiv.style.left = (-300 * nbaPlayerFrameNumber) + "px";
}
function shakeRim(){
//rim go down first with this function,then bounce up with the moveRimUp function$(nbaRimContainerDiv).stop().animate({
bottom:[-50,'easeOutCubic']}
,100,function(){
moveRimUp()}
);
}
function moveRimUp(){
$(nbaRimContainerDiv).stop().animate({
bottom:[0,'easeOutElastic']}
,500,function(){
}
);
}
function bounceBall(){
$(nbaBallDiv).fadeTo(0,1);
$(nbaBallDiv).stop().animate({
bottom:[0,'easeOutBounce']}
,1200,function(){
}
);
}
function positionNbaElements(){
stopAllNbaAnimation();
setAllNbaCounter();
clearAllNbaTimer();
positionNbaBoard();
positionNbaPlayerContainer();
hideNbaBall();
}
function positionNbaPlayerContainer(){
nbaPlayerContainerDiv.style.left = "1400px";
nbaPlayerContainerDiv.style.bottom = "0px";
}
function hideNbaBall(){
$(nbaBallDiv).fadeTo(0,0);
nbaBallDiv.style.left = "415px";
nbaBallDiv.style.bottom = "250px";
}
function animateNbaPlayerEyes(){
clearInterval(blinkNbaPlayerTimer);
blinkNbaPlayerTimer = setInterval(function(){
blinkNbaPlayer()}
,4000);
}
function blinkNbaPlayer(){
if ((pageVerticalPosition + (0.5 * containerDiv.offsetWidth) < about3ContainerDiv.offsetLeft) || (pageVerticalPosition + (0.5 * containerDiv.offsetWidth) > about3ContainerDiv.offsetLeft + about3ContainerDiv.offsetWidth)){
clearInterval(blinkNbaPlayerTimer);
}
else{
$(nbaPlayerEyesDiv).fadeTo(0,1);
$(nbaPlayerEyesDiv).stop().delay(300).animate({
opacity:0}
,0,function(){
}
);
}
}
function clearAllNbaTimer(){
clearInterval(blinkNbaPlayerTimer);
clearInterval(nbaBoardsAnimationTimer);
clearInterval(nbaPlayerTimer);
}
function setAllNbaCounter(){
nbaBoardsCounter = 0;
nbaPlayerCounter = 0;
}
function stopAllNbaAnimation(){
//stop nba board animationfor (var i=0;
i<nbaBoardArray.length;
i++){
$(nbaBoardArray[i]).stop(true,false);
}
//stop nba player animation$(nbaPlayerContainerDiv).stop(true,false);
}
function positionSeaAnimals(seaAnimalArray,numberOfSeaAnimalInEachRowArray,horizontalDistanceBetweenAnimals,verticalDistanceBetweenAnimals){
var seaAnimalLocalArray = seaAnimalArray;
var numberOfSeaAnimalInEachRowLocalArray = numberOfSeaAnimalInEachRowArray;
var columnDistance = horizontalDistanceBetweenAnimals;
var rowDistance = verticalDistanceBetweenAnimals;
var seaAnimalLocalNumber = 0;
for (var i=0;
i<numberOfSeaAnimalInEachRowLocalArray.length;
i++){
for (var j=0;
j<numberOfSeaAnimalInEachRowLocalArray[i];
j++){
seaAnimalLocalArray[seaAnimalLocalNumber].style.left = seaAnimalSwimDistance + (j * columnDistance) + "px";
seaAnimalLocalArray[seaAnimalLocalNumber].style.top = (i * rowDistance) + "px";
seaAnimalLocalNumber = seaAnimalLocalNumber + 1;
}
}
}
function animateSeaAnimals(seaAnimalArray){
var seaAnimalLocalArray = seaAnimalArray;
if (seaAnimalLocalArray == fishArray){
isFishStillAnimating = true;
}
if (seaAnimalLocalArray == crabArray){
isCrabStillAnimating = true;
}
if (seaAnimalLocalArray == turtleArray){
isTurtleStillAnimating = true;
}
for (var i=0;
i<seaAnimalLocalArray.length;
i++){
$(seaAnimalLocalArray[i]).stop().delay(i * 100).animate({
left:[seaAnimalLocalArray[i].offsetLeft - seaAnimalSwimDistance,'easeOutCubic']}
,600,function(){
disableIsSeaAnimalStillAnimating(seaAnimalLocalArray)}
);
}
}
function disableIsSeaAnimalStillAnimating(seaAnimalArray){
var seaAnimalLocalArray = seaAnimalArray;
if (seaAnimalLocalArray == fishArray){
if (fishAnimateNumber >= seaAnimalLocalArray.length - 1){
isFishStillAnimating = false;
fishAnimateNumber = 0;
}
else{
fishAnimateNumber = fishAnimateNumber + 1;
}
}
if (seaAnimalLocalArray == crabArray){
if (crabAnimateNumber >= seaAnimalLocalArray.length - 1){
isCrabStillAnimating = false;
crabAnimateNumber = 0;
}
else{
crabAnimateNumber = crabAnimateNumber + 1;
}
}
if (seaAnimalLocalArray == turtleArray){
if (turtleAnimateNumber >= seaAnimalLocalArray.length - 1){
isTurtleStillAnimating = false;
turtleAnimateNumber = 0;
}
else{
turtleAnimateNumber = turtleAnimateNumber + 1;
}
}
}
function animateRobbyRunSwim(){
if ((canAnimateRobbyRunSwim == true) && (isRobbyJumping == false) && (isRobbyFalling == false) && (layersMovement != "vertical")){
disableAnimateRobbyRunSwim();
clearInterval(shiftRobbyFrameTimer);
shiftRobbyFrameTimer = setInterval(function(){
shiftRobbyFrame()}
,shiftRobbyFrameTimeInterval);
}
}
function shiftRobbyFrame(){
if (isRobbyFalling == true){
clearShiftRobbyFrameTimer();
setRobbyJumpDownAndFallFrame();
return;
//exit shiftRobbyFrame function now}
else if ((isRobbySwimming == true) && (isRobbyBelowSeaLevel == true)){
robbyStartFrame = robbyStartSwimFrame;
robbyStopFrame = robbyStopSwimFrame;
}
else{
robbyStartFrame = robbyStartRunFrame;
robbyStopFrame = robbyStopRunFrame;
}
robbyFramesDiv.style.left = (-1 * robbyOneFrameWidth * (robbyStartFrame + counter)) + "px";
//(robbyStartFrame + counter) will decide which frame will be shownif (robbyStartFrame + counter + switcher > robbyStopFrame) //time to decrease counter by making counter has a negative value{
switcher = -1 * switcher;
}
if (robbyStartFrame + counter + switcher == robbyStartFrame){
pageVerticalPositionWhenAnimateRobby1 = pageVerticalPosition;
//record previous page vertical position when robby animate}
if (robbyStartFrame + counter + switcher < robbyStartFrame){
pageVerticalPositionWhenAnimateRobby2 = pageVerticalPosition;
//record current page vertical position when robby animateif (pageVerticalPositionWhenAnimateRobby1 == pageVerticalPositionWhenAnimateRobby2) //when user is no longer scrolling{
clearShiftRobbyFrameTimer();
//to make robby hands up right away after pass the finish line (one time animation only)if (layersMovement == "not moving 2"){
robbyHandsUp();
}
return;
//to exit shiftRobbyFrame function now,otherwise counter will be plus one (counter = counter + switcher)}
else //user still scrolling,so increase the counter again by making counter has a positive value{
switcher = -1 * switcher;
}
}
counter = counter + switcher;
}
function clearShiftRobbyFrameTimer(){
clearInterval(shiftRobbyFrameTimer);
if ((isRobbySwimming == false)||((isRobbySwimming == true) && (robbyContainerDiv.offsetTop + robbyContainerDiv.offsetHeight >= containerDiv.offsetHeight - seaFloorDiv.offsetHeight)) //robby at the bottom of the sea){
setRobbyStaticFrame();
}
counter = 0;
switcher = 1;
enableAnimateRobbyRunSwim();
}
function enableAnimateRobbyRunSwim(){
canAnimateRobbyRunSwim = true;
}
function disableAnimateRobbyRunSwim(){
canAnimateRobbyRunSwim = false;
}
function positionChainBlockAndStringContainer(){
for (var i=0;
i<chainBlockAndStringContainerArray.length;
i++){
if (i == 0){
canAnimateBossInformation = canAnimateRobotInformation;
}
if (i == 1){
canAnimateBossInformation = canAnimateSquidInformation;
}
if (i == 2){
canAnimateBossInformation = canAnimateAlienInformation;
}
//position xchainBlockAndStringContainerArray[i].style.left = (0.5 * experienceTextContainerArray[i].offsetWidth) - (0.5 * chainBlockAndStringContainerArray[i].offsetWidth) + "px";
//position yif (canAnimateBossInformation == true){
chainBlockAndStringContainerArray[i].style.bottom = (0.8 * containerDiv.offsetHeight) + experienceTextContainerArray[i].offsetHeight + "px";
}
else{
chainBlockAndStringContainerArray[i].style.bottom = experienceTextContainerDistanceFromFloor + experienceTextContainerArray[i].offsetHeight + "px";
}
}
}
function animateChainBlockAndStringContainer(chainBlockAndStringContainerNumber){
$(chainBlockAndStringContainerArray[chainBlockAndStringContainerNumber]).stop().animate({
bottom:[experienceTextContainerDistanceFromFloor + experienceTextContainerArray[chainBlockAndStringContainerNumber].offsetHeight,'easeOutCubic']}
,1000,function(){
}
);
}
function positionExperienceTextContainer(){
for (var i=0;
i<experienceTextContainerArray.length;
i++){
if (i == 0){
canAnimateBossInformation = canAnimateRobotInformation;
}
if (i == 1){
canAnimateBossInformation = canAnimateSquidInformation;
}
if (i == 2){
canAnimateBossInformation = canAnimateAlienInformation;
}
if (canAnimateBossInformation == true){
experienceTextContainerArray[i].style.bottom = (0.8 * containerDiv.offsetHeight) + "px";
}
else{
experienceTextContainerArray[i].style.bottom = experienceTextContainerDistanceFromFloor + "px";
}
}
}
function animateExperienceTextContainer(experienceTextContainerNumber){
$(experienceTextContainerArray[experienceTextContainerNumber]).stop().animate({
bottom:[experienceTextContainerDistanceFromFloor,'easeOutCubic']}
,1000,function(){
}
);
}
function positionExperience1Elements(){
robotDiv.style.left = experience1ContainerDiv.offsetWidth + "px";
$(piechartAolTextGraphic1Div).fadeTo(0,0);
$(piechartAolTextGraphic2Div).fadeTo(0,0);
}
function positionExperience2Elements(){
squidDiv.style.left = experience2ContainerDiv.offsetWidth + "px";
$(piechartIncognitoTextGraphic1Div).fadeTo(0,0);
$(piechartIncognitoTextGraphic2Div).fadeTo(0,0);
$(piechartIncognitoTextAnimation1Div).fadeTo(0,0);
$(piechartIncognitoTextAnimation2Div).fadeTo(0,0);
$(piechartIncognitoTextCode1Div).fadeTo(0,0);
$(piechartIncognitoTextCode2Div).fadeTo(0,0);
if (!((browserName == "internet explorer") && (browserVersion <= 8))){
$(piechartIncognitoFrontDiv).fadeTo(0,0);
//hide only if browser is not ie8 or below}
}
function positionExperience3Elements(){
alienDiv.style.left = experience3ContainerDiv.offsetWidth + "px";
$(piechartFoxnewsTextGraphic1Div).fadeTo(0,0);
$(piechartFoxnewsTextGraphic2Div).fadeTo(0,0);
$(piechartFoxnewsTextAnimation1Div).fadeTo(0,0);
$(piechartFoxnewsTextAnimation2Div).fadeTo(0,0);
$(piechartFoxnewsTextCode1Div).fadeTo(0,0);
$(piechartFoxnewsTextCode2Div).fadeTo(0,0);
if (!((browserName == "internet explorer") && (browserVersion <= 8))){
$(piechartFoxnewsFrontDiv).fadeTo(0,0);
//hide only if browser is not ie8 or below}
}
function animateInformationAndEnemiesElements(){
if (layersMovement == "horizontal"){
if (isRobbySwimming == false){
for (var i=0;
i<landInformationContainerArray.length;
i++){
if (((previousPageVerticalPosition + (0.5 * containerDiv.offsetWidth) < landInformationContainerArray[i].offsetLeft) || (previousPageVerticalPosition + (0.5 * containerDiv.offsetWidth) > landInformationContainerArray[i].offsetLeft + landInformationContainerArray[i].offsetWidth))&&((pageVerticalPosition + (0.5 * containerDiv.offsetWidth) > landInformationContainerArray[i].offsetLeft) && (pageVerticalPosition + (0.5 * containerDiv.offsetWidth) < landInformationContainerArray[i].offsetLeft + landInformationContainerArray[i].offsetWidth))){
//plantsif (landInformationContainerArray[i] == about1ContainerDiv){
if (canAnimatePlantInformation == true){
animatePlants();
canAnimatePlantInformation = false;
}
}
//buildingsif (landInformationContainerArray[i] == about2ContainerDiv){
animateBuildingsEyes();
if (canAnimateBuildingInformation == true){
animateBuildings();
canAnimateBuildingInformation = false;
}
}
//nbaif (landInformationContainerArray[i] == about3ContainerDiv){
animateNbaPlayerEyes();
if (canAnimateNbaInformation == true){
animateNbaPlayer();
canAnimateNbaInformation = false;
}
}
//robotif (landInformationContainerArray[i] == experience1ContainerDiv){
if (canAnimateRobotInformation == false) //if true,animateRobotHands will be execute after robot finish move from left to right{
animateRobotHands();
}
else{
animateRobot();
animateExperienceTextContainer(0);
animateChainBlockAndStringContainer(0);
canAnimateRobotInformation = false;
}
}
//squidif (landInformationContainerArray[i] == experience2ContainerDiv){
if (canAnimateSquidInformation == false) //if true,animateSquidHands will be execute after squid finish move from left to right{
animateSquidHands();
}
else{
animateSquid();
animateExperienceTextContainer(1);
animateChainBlockAndStringContainer(1);
canAnimateSquidInformation = false;
}
}
//alienif (landInformationContainerArray[i] == experience3ContainerDiv){
if (canAnimateAlienInformation == false) //if true,animateAlienHand will be execute after alien finish move from left to right{
animateAlienHand();
}
else{
animateAlien();
animateExperienceTextContainer(2);
animateChainBlockAndStringContainer(2);
canAnimateAlienInformation = false;
}
}
}
}
}
//sea animalsif (isRobbySwimming == true){
for (var i=0;
i<seaInformationContainerArray.length;
i++){
if (((previousPageVerticalPosition + (0.5 * containerDiv.offsetWidth) < sea1Div.offsetLeft + seaInformationContainerArray[i].offsetLeft) || (previousPageVerticalPosition + (0.5 * containerDiv.offsetWidth) > sea1Div.offsetLeft + seaInformationContainerArray[i].offsetLeft + seaInformationContainerArray[i].offsetWidth))&&((pageVerticalPosition + (0.5 * containerDiv.offsetWidth) > sea1Div.offsetLeft + seaInformationContainerArray[i].offsetLeft) && (pageVerticalPosition + (0.5 * containerDiv.offsetWidth) < sea1Div.offsetLeft + seaInformationContainerArray[i].offsetLeft + seaInformationContainerArray[i].offsetWidth))){
//fishif (seaInformationContainerArray[i] == skill1ContainerDiv){
makeSeaAnimalsBlinking(fishEyeArray);
if (canAnimateFishInformation == true){
animateSeaAnimals(fishArray);
canAnimateFishInformation = false;
}
}
//crabif (seaInformationContainerArray[i] == skill2ContainerDiv){
makeSeaAnimalsBlinking(crabEyeArray);
if (canAnimateCrabInformation == true){
animateSeaAnimals(crabArray);
canAnimateCrabInformation = false;
}
}
//turtleif (seaInformationContainerArray[i] == skill3ContainerDiv){
makeSeaAnimalsBlinking(turtleEyeArray);
if (canAnimateTurtleInformation == true){
animateSeaAnimals(turtleArray);
canAnimateTurtleInformation = false;
}
}
}
}
}
}
}
function animateRobot(){
$(robotDiv).stop().animate({
left:"380px"}
,1000,function(){
animatePiechartAolText();
animateRobotHands()}
);
}
function animateRobotHands(){
//animate robot hand right away for one time onlyspinRobotHands();
//animate robot hand continuouslyclearInterval(animateRobotHandsTimer);
animateRobotHandsTimer = setInterval(function(){
spinRobotHands()}
,4000);
}
function spinRobotHands(){
clearInterval(spinRobotHandsTimer);
spinRobotHandsTimer = setInterval(function(){
changeRobotHands()}
,100);
}
function changeRobotHands(){
if (changeRobotHandsCounter >= robotHandChildrenLength){
changeRobotHandsCounter = 0;
clearInterval(spinRobotHandsTimer);
setRobotHandsToDefault();
if ((pageVerticalPosition + (0.5 * containerDiv.offsetWidth) < experience1ContainerDiv.offsetLeft) || (pageVerticalPosition + (0.5 * containerDiv.offsetWidth) > experience1ContainerDiv.offsetLeft + experience1ContainerDiv.offsetWidth)){
clearInterval(animateRobotHandsTimer);
}
}
else{
for (var i=0;
i<robotHandChildrenLength;
i++){
if (i == changeRobotHandsCounter){
setRobotHandsToOpaque(i);
}
else{
setRobotHandsToTransparent(i);
}
}
}
changeRobotHandsCounter = changeRobotHandsCounter + 1;
}
function setRobotHandsToDefault(){
for (var i=0;
i<robotHandChildrenLength;
i++){
if (i == 0){
setRobotHandsToOpaque(i);
}
else{
setRobotHandsToTransparent(i);
}
}
}
function setRobotHandsToOpaque(robotHandNumber){
//use javascript instead jquery to avoid opacity glitch since this trigger by a very quick timerrobotHandLeftDiv.children[robotHandNumber].style.opacity = 1;
robotHandLeftDiv.children[robotHandNumber].style.filter = "alpha(opacity=" + 100 + ")";
robotHandRightDiv.children[robotHandNumber].style.opacity = 1;
robotHandRightDiv.children[robotHandNumber].style.filter = "alpha(opacity=" + 100 + ")";
}
function setRobotHandsToTransparent(robotHandNumber){
//use javascript instead jquery to avoid opacity glitch since this trigger by a very quick timerrobotHandLeftDiv.children[robotHandNumber].style.opacity = 0;
robotHandLeftDiv.children[robotHandNumber].style.filter = "alpha(opacity=" + 0 + ")";
robotHandRightDiv.children[robotHandNumber].style.opacity = 0;
robotHandRightDiv.children[robotHandNumber].style.filter = "alpha(opacity=" + 0 + ")";
}
function animateSquid(){
$(squidDiv).stop().animate({
left:"430px"}
,1000,function(){
animatePiechartIncognitoFront();
animateSquidHands()}
);
}
function animateSquidHands(){
//animate squid hand right away for one timemoveSquidHands();
//animate squid hand continuouslyclearInterval(animateSquidHandsTimer);
animateSquidHandsTimer = setInterval(function(){
moveSquidHands()}
,4000);
}
function moveSquidHands(){
clearInterval(moveSquidHandsTimer);
moveSquidHandsTimer = setInterval(function(){
openAndCloseSquidHands()}
,200);
}
function openAndCloseSquidHands(){
if (openAndCloseSquidHandsCounter >= 8){
openAndCloseSquidHandsCounter = 0;
clearInterval(moveSquidHandsTimer);
openSquidHands();
if ((pageVerticalPosition + (0.5 * containerDiv.offsetWidth) < experience2ContainerDiv.offsetLeft) || (pageVerticalPosition + (0.5 * containerDiv.offsetWidth) > experience2ContainerDiv.offsetLeft + experience2ContainerDiv.offsetWidth)){
clearInterval(animateSquidHandsTimer);
}
}
else{
if (openAndCloseSquidHandsCounter % 2 == 0){
openSquidHands();
}
else{
closeSquidHands();
}
}
openAndCloseSquidHandsCounter = openAndCloseSquidHandsCounter + 1;
}
function openSquidHands(){
//use javascript instead jquery to avoid opacity glitch since this trigger by a very quick timerfor (var i=0;
i<squidHandOpenArray.length;
i++){
squidHandOpenArray[i].style.opacity = 1;
squidHandOpenArray[i].style.filter = "alpha(opacity=" + 100 + ")";
}
for (var i=0;
i<squidHandCloseArray.length;
i++){
squidHandCloseArray[i].style.opacity = 0;
squidHandCloseArray[i].style.filter = "alpha(opacity=" + 0 + ")";
}
}
function closeSquidHands(){
//use javascript instead jquery to avoid opacity glitch since this trigger by a very quick timerfor (var i=0;
i<squidHandOpenArray.length;
i++){
squidHandOpenArray[i].style.opacity = 0;
squidHandOpenArray[i].style.filter = "alpha(opacity=" + 0 + ")";
}
for (var i=0;
i<squidHandCloseArray.length;
i++){
squidHandCloseArray[i].style.opacity = 1;
squidHandCloseArray[i].style.filter = "alpha(opacity=" + 100 + ")";
}
}
function animateAlienHand(){
clearInterval(animateAlienHandsTimer);
animateAlienHandsTimer = setInterval(function(){
rotateAlienHands()}
,100);
}
function rotateAlienHands(){
alienSteerPreviousAngle = alienSteerAngle;
alienSteerAngle = alienSteerAngle + alienSteerAngleIncrement;
if (alienSteerAngle > alienSteerPreviousAngle) //steering wheel rotate to right{
if (alienSteerAngle > alienSteerAngleLimit){
alienSteerAngleIncrement = -1 * alienSteerAngleIncrement;
alienSteerAngleLimit = -1 * alienSteerAngleLimit;
}
}
else //steering wheel rotate to left{
if (alienSteerAngle < alienSteerAngleLimit){
alienSteerAngleIncrement = -1 * alienSteerAngleIncrement;
alienSteerAngleLimit = -1 * alienSteerAngleLimit;
}
}
if ((alienSteerAngle == 0) && ((pageVerticalPosition + (0.5 * containerDiv.offsetWidth) < experience3ContainerDiv.offsetLeft) || (pageVerticalPosition + (0.5 * containerDiv.offsetWidth) > experience3ContainerDiv.offsetLeft + experience3ContainerDiv.offsetWidth))) //check is it time to stop moving steering wheel{
clearInterval(animateAlienHandsTimer);
alienSteerDiv.style.webkitTransform = 'rotate(0deg)';
alienSteerDiv.style.MozTransform = 'rotate(0deg)';
alienSteerDiv.style.OTransform = 'rotate(0deg)';
alienSteerDiv.style.msTransform = 'rotate(0deg)';
alienSteerDiv.style.transform = 'rotate(0deg)';
}
else{
alienSteerDiv.style.webkitTransform = 'rotate(' +alienSteerAngle + 'deg)';
alienSteerDiv.style.MozTransform = 'rotate(' +alienSteerAngle + 'deg)';
alienSteerDiv.style.OTransform = 'rotate(' +alienSteerAngle + 'deg)';
alienSteerDiv.style.msTransform = 'rotate(' +alienSteerAngle + 'deg)';
alienSteerDiv.style.transform = 'rotate(' +alienSteerAngle + 'deg)';
}
}
function animateAlien(){
$(alienDiv).stop().animate({
left:"500px"}
,1000,function(){
animatePiechartFoxnewsFront();
animateAlienHand()}
);
}
function animatePiechartIncognitoFront(){
if ((browserName == "internet explorer") && (browserVersion <= 8)){
animatePiechartIncognitoText();
//no pie chart animation,only text animation}
else{
$(piechartIncognitoFrontDiv).stop().animate({
opacity:1}
,500,function(){
animatePiechartIncognitoText()}
);
//animate piechart}
}
function animatePiechartFoxnewsFront(){
if ((browserName == "internet explorer") && (browserVersion <= 8)){
animatePiechartFoxnewsText();
//no pie chart animation,only text animation}
else{
$(piechartFoxnewsFrontDiv).stop().animate({
opacity:1}
,500,function(){
animatePiechartFoxnewsText()}
);
//animate piechart}
}
function animatePiechartAolText(){
animatePiechartAolTextGraphic();
}
function animatePiechartAolTextGraphic(){
$(piechartAolTextGraphic1Div).stop().animate({
opacity:1}
,1000,function(){
}
);
$(piechartAolTextGraphic2Div).stop().animate({
opacity:1}
,1000,function(){
}
);
}
function animatePiechartIncognitoText(){
animatePiechartIncognitoTextCode();
animatePiechartIncognitoTextGraphic();
animatePiechartIncognitoTextAnimation();
}
function animatePiechartIncognitoTextCode(){
$(piechartIncognitoTextCode1Div).stop().animate({
opacity:1}
,1000,function(){
}
);
$(piechartIncognitoTextCode2Div).stop().animate({
opacity:1}
,1000,function(){
}
);
}
function animatePiechartIncognitoTextGraphic(){
$(piechartIncognitoTextGraphic1Div).stop().delay(300).animate({
opacity:1}
,1000,function(){
}
);
$(piechartIncognitoTextGraphic2Div).stop().delay(300).animate({
opacity:1}
,1000,function(){
}
);
}
function animatePiechartIncognitoTextAnimation(){
$(piechartIncognitoTextAnimation1Div).stop().delay(600).animate({
opacity:1}
,1000,function(){
}
);
$(piechartIncognitoTextAnimation2Div).stop().delay(600).animate({
opacity:1}
,1000,function(){
}
);
}
function animatePiechartFoxnewsText(){
animatePiechartFoxnewsTextGraphic();
animatePiechartFoxnewsTextAnimation();
animatePiechartFoxnewsTextCode();
}
function animatePiechartFoxnewsTextCode(){
$(piechartFoxnewsTextCode1Div).stop().animate({
opacity:1}
,1000,function(){
}
);
$(piechartFoxnewsTextCode2Div).stop().animate({
opacity:1}
,1000,function(){
}
);
}
function animatePiechartFoxnewsTextAnimation(){
$(piechartFoxnewsTextAnimation1Div).stop().delay(300).animate({
opacity:1}
,1000,function(){
}
);
$(piechartFoxnewsTextAnimation2Div).stop().delay(300).animate({
opacity:1}
,1000,function(){
}
);
}
function animatePiechartFoxnewsTextGraphic(){
$(piechartFoxnewsTextGraphic1Div).stop().delay(600).animate({
opacity:1}
,1000,function(){
}
);
$(piechartFoxnewsTextGraphic2Div).stop().delay(600).animate({
opacity:1}
,1000,function(){
}
);
}
function createBubble(){
clearInterval(bubbleTimer);
bubbleTimer = setInterval(function(){
animateBubble()}
,3000);
}
function animateBubble(){
var robbyToSeaSurfaceDistance = robbyContainerDiv.offsetTop - (sea1Div.offsetTop - shiftUpLayerHorizontalDistance);
positionBubble(robbyToSeaSurfaceDistance);
showBubble();
$(bubbleDiv).stop().animate({
top:"0px"}
,2 * robbyToSeaSurfaceDistance,function(){
hideBubble()}
);
}
function hideBubble(){
$(bubbleDiv).fadeTo(0,0);
}
function showBubble(){
$(bubbleDiv).fadeTo(0,1);
}
function positionBubble(robbyToSeaSurfaceDistance){
bubbleDiv.style.left = pageVerticalPosition + (0.5 * containerDiv.offsetWidth) - sea1Div.offsetLeft + "px";
bubbleDiv.style.top = robbyToSeaSurfaceDistance + "px";
}
function blinkSeaAnimals(seaAnimalEyeArray){
var seaAnimalLocalEyeArray = seaAnimalEyeArray;
var selectedSeaAnimalEyeArray = new Array();
var seaAnimalBlinkMaxNumber = Math.ceil(Math.random() * 5);
//at most there are 5 sea animals blink at the same timefor (var i=0;
i<seaAnimalBlinkMaxNumber;
i++) //select the animals that will blink,and put them in array{
var selectedSeaAnimalNumber = Math.floor(Math.random() * seaAnimalEyeArray.length);
selectedSeaAnimalEyeArray.push(seaAnimalLocalEyeArray[selectedSeaAnimalNumber]);
}
for (var i=0;
i<selectedSeaAnimalEyeArray.length;
i++){
$(selectedSeaAnimalEyeArray[i]).fadeTo(0,1);
$(selectedSeaAnimalEyeArray[i]).stop().delay(300).animate({
opacity:0}
,0,function(){
}
);
}
}
function makeSeaAnimalsBlinking(seaAnimalEyeArray){
clearInterval(blinkSeaAnimalsTimer);
blinkSeaAnimalsTimer = setInterval(function(){
blinkSeaAnimals(seaAnimalEyeArray)}
,3000);
}
function positionContactContainer(){
contactContainerDiv.style.top = layerVerticalArray[layerVerticalArray.length - 1].offsetTop + "px";
contactContainerDiv.style.left = layerVerticalArray[layerVerticalArray.length - 1].offsetLeft + "px";
}
function positionFireworksContainer(){
fireworksContainerDiv.style.top = layerVerticalArray[layerVerticalArray.length - 1].offsetTop + "px";
fireworksContainerDiv.style.left = layerVerticalArray[layerVerticalArray.length - 1].offsetLeft + "px";
}
function positionSocialContainer(){
if (canAnimateSocialContainer == true) //social container is still hiding behind cloud{
setSocialContainerOpacity(0);
socialContainerDiv.style.top = "80%";
}
else //social container already on top{
socialContainerDiv.style.top = "0px";
}
}
function animateSocialContainer(){
if (canAnimateSocialContainer == true){
$(socialContainerDiv).stop().animate({
top:[0,'easeOutCubic']}
,1000,function(){
}
);
setSocialContainerOpacity(1);
canAnimateSocialContainer = false;
}
}
function setSocialContainerOpacity(socialContainerOpacity) //custome social container and icon set opacity for internet explorer 8{
if (socialContainerOpacity > 1){
socialContainerOpacity = 1;
}
if (socialContainerOpacity < 0){
socialContainerOpacity = 0;
}
var socialContainerChildrenLength = $(socialContainerDiv).children().length;
for (var i=0;
i<socialContainerChildrenLength;
i++){
$(socialContainerDiv.children[i]).fadeTo(0,socialContainerOpacity);
}
var socialMiddleChildren = $(socialContainerDiv.children[1]).children().length;
for (var i=0;
i<socialMiddleChildren;
i++){
$(socialContainerDiv.children[1].children[i]).fadeTo(0,socialContainerOpacity);
}
}
function happyRobby(){
if (isRobbyHappy == false){
clearInterval(happyRobbyTimer);
happyRobbyTimer = setInterval(function(){
robbyHandsUp()}
,3000);
//repeating robby hands upisRobbyHappy = true;
}
}
function clearHappyRobbyTimer(){
if (isRobbyHappy == true){
clearInterval(happyRobbyTimer);
isRobbyHappy = false;
}
}
function robbyHandsUp(){
robbyFramesDiv.style.left = "-1600px";
setTimeout(function(){
setRobbyStaticFrame()}
,1000);
//robby hands down after 1 sec}
function positionSplashContainer(){
splashContainerDiv.style.left = (0.5 * (containerDiv.offsetWidth - splashContainerDiv.offsetWidth)) + "px";
}
function positionRobbyContainerVertically(){
if (isPreloadShiftUpAnimationFinish == true){
$(robbyContainerDiv).stop(true,false);
//to stop robby animation,especially when swimmingsetRobbyStaticFrame();
if (isRobbySwimming == true) //robby in sea{
positionRobbyAtSeaFloorLevel();
}
else{
checkElevationNumberBelowRobby();
if (elevationNumberBelowRobby != null) //robby on top of elevation{
robbyContainerDiv.style.bottom = containerDiv.offsetHeight - elevationArray[elevationNumberBelowRobby].offsetTop + "px";
}
else{
positionRobbyAtGroundLevel();
}
}
}
}
function positionRobbyAtGroundLevel(){
robbyContainerDiv.style.bottom = (0.2 * containerDiv.offsetHeight) + "px";
}
function positionRobbyAtSeaFloorLevel(){
robbyContainerDiv.style.bottom = seaFloorDiv.offsetHeight + "px";
}
function checkElevationNumberBelowRobby(){
for (var i=0;
i<elevationArray.length;
i++){
if ((pageVerticalPosition < elevationArray[i].offsetLeft + elevationArray[i].offsetWidth - robbyLeftEdge) && (pageVerticalPosition > elevationArray[i].offsetLeft - robbyRightEdge)){
elevationNumberBelowRobby = i;
break;
}
else{
elevationNumberBelowRobby = null;
}
}
}
function animateWaterfall(){
clearInterval(waterfallTimer);
waterfallTimer = setInterval(function(){
switchWaterfallTexture()}
,1000);
}
function switchWaterfallTexture(){
$(waterfall2Div).fadeTo(0,0);
$(waterfall2Div).stop().delay(500).animate({
opacity:1}
,0,function(){
}
);
}
function positionSeaFloorObjectsVertically(){
for (var i=0;
i<seaFloorFrontObjectArray.length;
i++){
if (seaFloorFrontObjectArray[i].offsetHeight > sea1Div.offsetHeight){
seaFloorFrontObjectArray[i].style.bottom = (-1 * (seaFloorFrontObjectArray[i].offsetHeight - sea1Div.offsetHeight)) + "px";
}
else{
seaFloorFrontObjectArray[i].style.bottom = "0px";
}
}
for (var i=0;
i<seaFloorBackObjectArray.length;
i++){
if (seaFloorBackObjectArray[i].offsetHeight > sea1Div.offsetHeight){
seaFloorBackObjectArray[i].style.bottom = ((-0.7 * containerDiv.offsetHeight) - (seaFloorBackObjectArray[i].offsetHeight - sea1Div.offsetHeight)) + "px";
}
else{
seaFloorBackObjectArray[i].style.bottom = "-70%";
}
}
}
function animateScrollOrSwipeTextContainer(){
if (canAnimateScrollOrSwipeTextContainer == true) //to protect so it is not call twice in internet explorer 8{
canAnimateScrollOrSwipeTextContainer = false;
clearInterval(scrollOrSwipeTextContainerTimer);
scrollOrSwipeTextContainerTimer = setInterval(function(){
turnOnAndOffScrollOrSwipeTextContainer()}
,1000);
}
}
function turnOnAndOffScrollOrSwipeTextContainer(){
if (deviceName == "computer"){
$(scrollOrSwipeTextContainer1Div).fadeTo(0,1);
$(scrollOrSwipeTextContainer1Div).stop().delay(500).animate({
opacity:0}
,0,function(){
}
);
}
else{
$(scrollOrSwipeTextContainer2Div).fadeTo(0,1);
$(scrollOrSwipeTextContainer2Div).stop().delay(500).animate({
opacity:0}
,0,function(){
}
);
}
}
function hideScrollOrSwipeTextContainer(){
if (canHideScrollOrSwipeTextContainer == true){
clearInterval(scrollOrSwipeTextContainerTimer);
fadeOutScrollOrSwipeTextContainer();
canHideScrollOrSwipeTextContainer = false;
}
}
function fadeOutScrollOrSwipeTextContainer(){
$(scrollOrSwipeTextContainer1Div).fadeTo(0,0);
$(scrollOrSwipeTextContainer2Div).fadeTo(0,0);
}
function positionContactConfirmationContainer(){
for (var i=0;
i<contactConfirmationContainerArray.length;
i++){
if ((layersMovement == "not moving 1") || (layersMovement == "not moving 2")){
contactConfirmationContainerArray[i].style.left = robbyContainerDiv.offsetLeft + "px";
}
else{
contactConfirmationContainerArray[i].style.left = robbyMaxHorizontalDistance + "px";
}
contactConfirmationContainerArray[i].style.top = 0.8 * containerDiv.offsetHeight - 370 + "px";
}
}
function hideContactConfirmationContainer(){
if (isContactConfirmationContainerVisible == true){
for (var i=0;
i<contactConfirmationContainerArray.length;
i++){
var contactConfirmationChildrenLength = $(contactConfirmationContainerArray[i]).children().children().length;
for (var j=0;
j<contactConfirmationChildrenLength;
j++){
$(contactConfirmationContainerArray[i].children[0].children[j]).fadeTo(0,0);
}
}
isContactConfirmationContainerVisible = false;
}
}
function showContactConfirmationContainer(contactConfirmationContainerNumber){
var contactConfirmationChildrenLength = $(contactConfirmationContainerArray[contactConfirmationContainerNumber]).children().children().length;
for (var j=0;
j<contactConfirmationChildrenLength;
j++){
$(contactConfirmationContainerArray[contactConfirmationContainerNumber].children[0].children[j]).fadeTo(0,1);
}
isContactConfirmationContainerVisible = true;
}
function focusEmail() //called from email.js{
emailAddressDiv.focus();
}
function focusSubject() //called from email.js{
emailSubjectDiv.focus();
}
function focusMessage() //called from email.js{
emailMessageDiv.focus();
}
function clearAllInputField(){
emailAddressDiv.value = "";
emailSubjectDiv.value = "";
emailMessageDiv.value = "";
}
function createFireworkSvg(){
if (!((browserName == "internet explorer") && (browserVersion <= 8))){
for (var i=0;
i<fireworkArray.length;
i++){
var fireworkSvg = document.createElementNS("http://www.w3.org/2000/svg","svg");
fireworkSvg.setAttribute("version","1.2");
fireworkSvg.setAttribute("baseProfile","tiny");
fireworkSvg.setAttribute("width","100%");
fireworkSvg.setAttribute("height","100%");
fireworkSvgArray.push(fireworkSvg);
}
}
}
function appendFireworkSvgToContainer(){
if (!((browserName == "internet explorer") && (browserVersion <= 8))){
for (var i=0;
i<fireworkArray.length;
i++){
fireworkArray[i].appendChild(fireworkSvgArray[i]);
}
}
}
function drawManyFireworks(){
if (!((browserName == "internet explorer") && (browserVersion <= 8))){
if (canDrawManyFireworks == true){
clearInterval(drawFireworkTimer);
drawFireworkTimer = setInterval(function(){
drawFirework()}
,1000);
canDrawManyFireworks = false;
}
}
}
function drawFirework(){
if (drawFireworkCounter >= fireworkArray.length) //finish draw firework{
drawFireworkCounter = 0;
clearInterval(drawFireworkTimer);
}
else{
clearInterval(drawOneLayerOfFireworkTimer);
drawOneLayerOfFireworkTimer = setInterval(function(){
drawOneLayerOfFirework()}
,40);
}
}
function drawOneLayerOfFirework(){
if (fireworkLayerNumber < fireworkRowNumber){
fireworkLayerNumber = fireworkLayerNumber + 1;
for (var i=0;
i<fireworkColumnNumber;
i++){
var c = document.createElementNS("http://www.w3.org/2000/svg","circle");
c.setAttribute("cx",String(fireworkCenterX + (Math.cos(i * fireworkOneRotationAngle) * (fireworkLayerNumber * fireworkOneRadiusDistance))));
c.setAttribute("cy",String(fireworkCenterY + (Math.sin(i * fireworkOneRotationAngle) * (fireworkLayerNumber * fireworkOneRadiusDistance))));
c.setAttribute("r",fireworkDotRadius);
c.setAttribute("fill","#ffffff");
fireworkSvgArray[drawFireworkCounter].appendChild(c);
}
}
else{
fireworkLayerNumber = 0;
clearInterval(drawOneLayerOfFireworkTimer);
makeFireworkDisappear(drawFireworkCounter);
drawFireworkCounter = drawFireworkCounter + 1;
}
}
function makeFireworkDisappear(fireworkNumber){
$(fireworkArray[fireworkNumber]).fadeTo(1000,0);
}
function resetFireworkSvg(){
for (var i=0;
i<fireworkArray.length;
i++){
$(fireworkSvgArray[i]).empty();
//delete every childrens (dots) inside firework svg$(fireworkArray[i]).fadeTo(0,1);
}
}
function printResizeText(){
//document.getElementById("detect-value-1").innerHTML = containerDiv.offsetHeight;
//document.getElementById("detect-value-2").innerHTML = layerVerticalArray[layerVerticalArray.length - 1].offsetHeight;
}
function printScrollSwipeText(){
}
CSS代码(style.css):
a{text-decoration:none;}
#algae-1{left:100px;}
#algae-2{left:800px;}
#algae-3{left:2100px;}
#algae-4{left:2200px;}
#algae-5{left:3500px;}
#algae-6{left:3680px;}
#algae-7{left:4900px;}
#algae-8{left:5000px;}
.algae-a{position:absolute;bottom:0px;width:80px;height:270px;background-image:url(image/algae-a.png);}
.algae-b{position:absolute;bottom:0px;width:162px;height:252px;background-image:url(image/algae-b.png);}
#alien{position:absolute;left:500px;bottom:30px;width:400px;height:636px;}
#alien-body{position:absolute;left:0px;top:0px;width:400px;height:515px;background-image:url(image/alien-body.png);}
#alien-ship{position:absolute;left:0px;top:515px;width:400px;height:121px;background-image:url(image/alien-ship.png);}
#alien-steer{position:absolute;left:90px;top:430px;width:220px;height:170px;background-image:url(image/alien-steer.png);}
#balloon{position:absolute;/*bottom:20%;*/
width:400px;height:700px;background-image:url(image/balloon.png);}
.banner{margin-bottom:60px;}
.banner-button{position:relative;width:152px;height:32px;}
.banner-line{position:relative;width:440px;height:1px;background-color:#ffffff;margin-bottom:12px;}
.banner-text-a{position:relative;width:440px;font-family:frankfurter-medium-plain;color:#ffffff;font-size:24px;margin-bottom:12px;}
.banner-text-b{position:relative;width:440px;font-family:frankfurter-plain;color:#ffffff;font-size:70px;line-height:60px;margin-bottom:12px;}
.banner-text-c{position:relative;width:440px;font-family:frankfurter-medium-plain;color:#ffffff;font-size:18px;margin-bottom:12px;}
.banner-bottom-a{position:relative;left:20px;width:480px;height:56px;margin-top:-1px;/*to cover 1 line gap between div in safari*/
background-image:url(image/banner-bottom-a.png);}
.banner-bottom-b{position:relative;left:20px;width:480px;height:56px;margin-top:-1px;/*to cover 1 line gap between div in safari*/
background-image:url(image/banner-bottom-b.png);}
#banners-container{position:absolute;left:15%;width:520px;}
.banner-middle-a{position:relative;left:20px;width:440px;padding:20px;background-color:#f7941d;overflow:hidden;}
.banner-middle-b{position:relative;left:20px;width:440px;padding:20px;background-color:#f26d7d;overflow:hidden;}
.banner-top-a{position:relative;width:520px;height:23px;margin-bottom:-1px;/*to cover 1 line gap between div in safari*/
background-image:url(image/banner-top-a.png);}
.banner-top-b{position:relative;width:520px;height:23px;margin-bottom:-1px;/*to cover 1 line gap between div in safari*/
background-image:url(image/banner-top-b.png);}
body{margin:0px;background-color:#00bff3;}
#boxes{position:absolute;left:13900px;bottom:20%;width:700px;height:100px;background-image:url(image/box.png);}
#bubble{position:relative;left:-50%;width:16px;height:16px;background-image:url(image/bubble.png);}
#bubble-container{position:absolute;}
.building{position:absolute;}
#building-1{left:0px;bottom:0px;width:190px;height:500px;background-image:url(image/building-a.png);}
#building-2{left:305px;bottom:0px;width:275px;height:495px;background-image:url(image/building-b.png);}
#building-3{left:710px;bottom:0px;width:190px;height:500px;background-image:url(image/building-c.png);}
.building-enemy-face-a{position:absolute;left:25px;top:395px;width:65px;height:65px;background-image:url(image/enemy-face-a.png);}
.building-enemy-face-a-eyes{position:absolute;left:5px;top:10px;width:55px;height:25px;opacity:0;filter:alpha(opacity=0);background-image:url(image/enemy-face-a-eyes.png);}
.building-enemy-face-b{position:absolute;left:80px;top:375px;width:80px;height:80px;background-image:url(image/enemy-face-b.png);}
.building-enemy-face-b-eyes{position:absolute;left:7px;top:15px;width:66px;height:30px;opacity:0;filter:alpha(opacity=0);background-image:url(image/enemy-face-b-eyes.png);}
#buildings-container{position:absolute;left:4980px;bottom:20%;width:900px;height:80%;}
.building-leg-container-a{position:absolute;overflow:hidden;left:0px;top:470px;width:190px;height:30px;}
.building-leg-container-b{position:absolute;overflow:hidden;left:70px;top:465px;width:150px;height:30px;}
.building-leg-frame-a{position:absolute;left:0px;top:0px;width:380px;height:30px;background-image:url(image/building-a-leg-frame.png);}
.building-leg-frame-b{position:absolute;left:0px;top:0px;width:300px;height:30px;background-image:url(image/building-b-leg-frame.png);}
.chain-block{position:absolute;bottom:0px;width:100px;height:90px;background-image:url(image/chain-block.png);}
.chain-block-string{position:absolute;left:28px;bottom:60px;width:44px;height:100%;background-image:url(image/chain-block-string.png);}
.chain-block-and-string-container{position:absolute;width:100px;height:100%;}
.coral-a{position:absolute;width:200px;height:150px;bottom:-70%;background-image:url(image/coral-a.png);}
.coral-b{position:absolute;width:200px;height:150px;bottom:-70%;background-image:url(image/coral-b.png);}
#coral-1{left:4800px;}
#coral-2{left:5800px;}
#coral-3{left:6800px;}
.coral-big{position:absolute;}
#coral-big-1{left:1300px;bottom:-70%;width:300px;height:400px;background-image:url(image/coral-big-a.png);}
#coral-big-2{left:1700px;bottom:-70%;width:650px;height:500px;background-image:url(image/coral-big-b.png);}
#contact-box{position:absolute;top:120px;margin-left:-840px;width:940px;height:420px;background-image:url(image/contact-box.png);}
#contact-box-email{position:absolute;left:570px;top:20px;width:350px;height:30px;background-image:url(image/contact-box-hole-a.png);}
#contact-box-email input{font-family:Arial;font-size:14px;color:#ffffff;width:340px;margin:5px;border:none;background-color:transparent;}
#contact-box-email input:focus{outline:none;}
#contact-box-subject{position:absolute;left:570px;top:65px;width:350px;height:30px;background-image:url(image/contact-box-hole-a.png);}
#contact-box-subject input{font-family:Arial;font-size:14px;color:#ffffff;width:340px;margin:5px;border:none;background-color:transparent;}
#contact-box-subject input:focus{outline:none;}
#contact-box-message{position:absolute;left:570px;top:110px;width:350px;height:170px;background-image:url(image/contact-box-hole-b.png);}
#contact-box-message textarea{font-family:Arial;font-size:14px;color:#ffffff;width:340px;height:160px;margin:5px;border:none;overflow:hidden;/*no scroll bar*/
resize:none;/*hide the resize corner handle*/
background-color:transparent;}
#contact-box-message textarea:focus{outline:none;}
#contact-button{position:absolute;top:440px;margin-left:-210px;width:355px;height:100px;}
#contact-center{position:absolute;height:540px;left:50%;bottom:20%;}
#contact-cloud-bottom{position:absolute;left:0px;top:100%;width:100%;height:21px;background-image:url(image/contact-cloud-bottom.png);}
#contact-cloud-middle{position:absolute;left:0px;top:80%;width:100%;height:20%;background-color:#ffffff;}
#contact-cloud-seal-bottom /*to cover 1 line gap between div in safari*/
{position:absolute;width:100%;height:2px;bottom:-1px;background-color:#ffffff;}
#contact-cloud-seal-top /*to cover 1 line gap between div in safari*/
{position:absolute;width:100%;height:2px;top:-1px;background-color:#ffffff;}
#contact-cloud-top{position:absolute;left:0px;bottom:20%;width:100%;height:21px;background-image:url(image/contact-cloud-top.png);}
.contact-confirmation-container{position:absolute;}
.contact-confirmation{position:relative;width:260px;height:190px;left:-50%;}
.contact-confirmation-rectangle{position:absolute;width:260px;height:170px;background-color:#333333;}
.contact-confirmation-title-a{position:absolute;left:30px;top:26px;font-family:frankfurter-plain;color:#c69c6d;font-size:35px;}
.contact-confirmation-title-b{position:absolute;left:30px;top:26px;font-family:frankfurter-plain;color:#c69c6d;font-size:48px;}
.contact-confirmation-text-a{position:absolute;left:30px;top:70px;width:200px;font-family:frankfurter-medium-plain;font-size:19px;line-height:22px;color:#aaaaaa;}
.contact-confirmation-text-b{position:absolute;left:30px;top:82px;width:200px;font-family:frankfurter-medium-plain;font-size:24px;line-height:24px;color:#aaaaaa;}
.contact-confirmation-text-c{position:absolute;left:30px;top:82px;width:200px;font-family:frankfurter-medium-plain;font-size:25px;line-height:25px;color:#aaaaaa;}
.contact-confirmation-text-d{position:absolute;left:72px;top:68px;font-family:frankfurter-medium-plain;font-size:25px;color:#aaaaaa;}
.contact-confirmation-triangle{position:absolute;left:120px;top:170px;width:20px;height:20px;background-image:url(image/contact-confirmation-triangle.png);}
#contact-container{position:absolute;width:100%;height:100%;}
.content-noscroll{position:absolute;width:100%;height:100%;overflow:hidden;}
.cloud{position:absolute;width:180px;height:120px;background-image:url(image/cloud.png);}
#cloud-1{left:100px;top:20%;}
#cloud-2{left:600px;top:5%;}
#cloud-3{left:1300px;top:30%;}
#cloud-4{left:1900px;top:20%;}
#cloud-5{left:10%;bottom:550px;}
#cloud-6{left:25%;bottom:1200px;}
#cloud-7{left:70%;bottom:1400px;}
#cloud-8{left:40%;bottom:1800px;}
#cloud-9{left:80%;bottom:2000px;}
#container{position:fixed;left:0px;top:0px;width:100%;height:100%;overflow:hidden;}
.crab{position:absolute;width:130px;height:89px;overflow:hidden;background-image:url(image/crab.png);}
.crab-eyes{position:absolute;left:31px;top:41px;width:38px;height:19px;opacity:0;filter:alpha(opacity=0);background-image:url(image/crab-eyes.png);}
#crab-ribbon-container-1{top:0px;}
#crab-ribbon-container-2{top:100px;}
#crab-ribbon-container-3{top:200px;}
#crab-ribbon-container-4{top:300px;}
#crabs-container{position:absolute;left:270px;top:50px;width:730px;height:489px;}
#crab-text-container{position:absolute;top:79px;right:760px;width:480px;height:440px;}
.crane{position:absolute;bottom:20%;width:110px;height:80%;background-image:url(image/crane.png);background-position:0% 100%;}
#crane-1{left:7750px;}
#crane-2{left:9000px;}
#detect-container{position:absolute;background-color:#000000;padding:10px;display:inline-block;opacity:0.8;filter:alpha(opacity=80);}
.detect-name{font-family:arial;color:#ffffff;font-size:14px;font-weight:bold;margin-right:10px;}
.detect-value{font-family:arial;color:#ffffff;font-size:14px;}
.displaynone{display:none;}
#dock-floor{position:absolute;left:19530px;top:80%;width:2970px;height:50px;background-image:url(image/dock-floor.png);}
#dock-column{position:absolute;left:19530px;top:80%;width:2970px;height:20%;background-image:url(image/dock-column.png);}
#elevation-1{left:4380px;bottom:20%;width:400px;height:120px;}
#elevation-2{left:6080px;bottom:20%;width:400px;height:120px;}
#elevation-3{left:16040px;bottom:20%;width:400px;height:150px;}
#elevation-4{left:17840px;bottom:20%;width:400px;height:150px;}
.elevation{position:absolute;}
.elevation-box{position:absolute;width:100%;height:100px;bottom:0px;background-image:url(image/box.png);}
.elevation-floor{position:absolute;width:100%;height:50px;background-image:url(image/floor.png);}
.enemy-face-frame-a{position:absolute;left:0px;top:0px;width:130px;height:65px;background-image:url(image/enemy-face-frame-a.png);}
.enemy-face-frame-b{position:absolute;left:0px;top:0px;width:160px;height:80px;background-image:url(image/enemy-face-frame-b.png);}
#experience-1-container{position:absolute;left:14840px;bottom:20%;width:1000px;height:80%;}
#experience-2-container{position:absolute;left:16640px;bottom:20%;width:1000px;height:80%;}
#experience-3-container{position:absolute;left:18440px;bottom:20%;width:900px;height:80%;}
.experience-text-a{position:relative;width:100%;margin-bottom:20px;font-family:frankfurter-medium-plain;color:#ffffff;font-size:35px;line-height:35px;}
.experience-text-b{position:relative;width:100%;margin-bottom:20px;font-family:frankfurter-plain;color:#ffffff;font-size:60px;line-height:54px;}
.experience-text-c{position:relative;width:100%;margin-bottom:20px;font-family:Arial;color:#ffffff;font-size:18px;}
.experience-text-d{position:relative;width:75%;margin-bottom:20px;font-family:Arial;color:#ffffff;font-size:18px;}
.experience-text-e{position:relative;width:85%;margin-bottom:20px;font-family:Arial;color:#ffffff;font-size:18px;}
.experience-text-container{position:absolute;bottom:185px;width:510px;background-color:#444444;padding:40px;border-style:solid;border-width:10px;border-color:#777777;}
#email-button{position:absolute;width:485px;height:230px;background-image:url(image/email-button.png);}
.face-left{-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);-ms-filter:fliph;/*ie*/
filter:fliph;/*ie*/
}
.face-right{-moz-transform:scaleX(1);-webkit-transform:scaleX(1);-o-transform:scaleX(1);transform:scaleX(1);}
#fence{position:absolute;width:740px;height:100px;background-image:url(image/fence.png);}
.firework{position:relative;left:-50%;top:-50%;width:500px;height:500px;background-color:transparent;}
.firework-container{position:absolute;width:500px;height:500px;}
#firework-container-1{left:90%;top:30%;}
#firework-container-2{left:10%;top:20%;}
#firework-container-3{left:50%;top:10%;}
#firework-container-4{left:90%;top:50%;}
#firework-container-5{left:30%;top:15%;}
#firework-container-6{left:90%;top:30%;}
#fireworks-container{position:absolute;width:100%;height:100%;}
.fish{position:absolute;width:125px;height:93px;overflow:hidden;background-image:url(image/fish.png);}
.fish-eyes{position:absolute;left:18px;top:45px;width:39px;height:18px;opacity:0;filter:alpha(opacity=0);background-image:url(image/fish-eyes.png);}
#fishes-container{position:absolute;left:270px;top:50px;width:725px;height:493px;}
#fish-ribbon-container-1{top:0px;}
#fish-ribbon-container-2{top:100px;}
#fish-ribbon-container-3{top:200px;}
#fish-ribbon-container-4{top:300px;}
#fish-text-container{position:absolute;top:83px;right:760px;width:480px;height:440px;}
#floor{position:absolute;width:100%;height:50px;background-image:url(image/floor.png);}
@font-face{font-family:'frankfurter-medium-plain';src:url('font/frankfurter-medium-plain.eot');src:url('font/frankfurter-medium-plain.eot?#iefix') format('embedded-opentype'),url('font/frankfurter-medium-plain.woff') format('woff'),url('font/frankfurter-medium-plain.ttf') format('truetype'),url('font/frankfurter-medium-plain.svg#frankfurter-medium-plain') format('svg');font-weight:normal;font-style:normal;}
@font-face{font-family:'frankfurter-plain';src:url('font/frankfurter-plain.eot');src:url('font/frankfurter-plain.eot?#iefix') format('embedded-opentype'),url('font/frankfurter-plain.woff') format('woff'),url('font/frankfurter-plain.ttf') format('truetype'),url('font/frankfurter-plain.svg#frankfurter-plain') format('svg');font-weight:normal;font-style:normal;}
@font-face{font-family:'lobster';src:url('font/lobster-1.4.eot');src:url('font/lobster-1.4.eot?#iefix') format('embedded-opentype'),url('font/lobster-1.4.woff') format('woff'),url('font/lobster-1.4.ttf') format('truetype'),url('font/lobster-1.4.svg#lobster') format('svg');font-weight:normal;font-style:normal;}
@font-face{font-family:'poster-sans-bold';src:url('font/poster-sans-bold.eot');src:url('font/poster-sans-bold.eot?#iefix') format('embedded-opentype'),url('font/poster-sans-bold.woff') format('woff'),url('font/poster-sans-bold.ttf') format('truetype'),url('font/poster-sans-bold.svg#poster-sans-bold') format('svg');font-weight:normal;font-style:normal;}
.foundation{position:absolute;top:80%;height:90%;background-image:url(image/foundation.png);}
#foundation-1{left:13320px;width:6220px;}
.gate{position:absolute;bottom:20%;width:320px;height:300px;background-image:url(image/gate.png);}
#gate-1{left:2100px;}
#gate-2{left:7780px;}
#gate-3{left:13320px;}
#gate-4{left:19530px;}
.gate-text{position:absolute;top:14px;font-family:frankfurter-plain;color:#ffffff;font-size:60px;}
#gate-text-1{left:37px;}
#gate-text-2{left:32px;}
#gate-text-3{left:32px;}
#gate-text-4{left:29px;}
.grass{position:absolute;width:100%;height:50px;background-image:url(image/grass.png);}
.ground{position:absolute;width:100%;height:100%;background-image:url(image/ground.png);}
#ground-and-grass-container-1{position:absolute;left:0px;top:80%;width:8100px;height:90%;}
#ground-and-grass-container-2{position:absolute;right:0%;bottom:0%;width:1160px;height:2000px;}
img{border-style:none;}
#javascript-banner{position:relative;left:-50%;margin-top:-115px;width:600px;height:230px;}
#javascript-banner-container{position:absolute;left:50%;top:50%;}
#javascript-banner-left{position:absolute;left:0px;top:0px;width:80px;height:230px;background-image:url(image/javascript-banner-left.png);}
#javascript-banner-middle{position:absolute;left:79px;top:0px;width:440px;height:190px;background-color:#F7941D;}
#javascript-banner-right{position:absolute;left:518px;top:0px;width:80px;height:230px;background-image:url(image/javascript-banner-right.png);}
#javascript-banner-text-a{position:relative;font-family:frankfurter-plain;color:#ffffff;font-size:39px;text-align:center;margin-top:37px;}
#javascript-banner-text-b{position:relative;font-family:frankfurter-plain;color:#ffffff;font-size:72px;text-align:center;margin-top:-12px;}
.layer-horizontal{position:absolute;left:0px;top:100%;height:100%;}
#layer-horizontal-1{width:4000px;}
#layer-horizontal-2{width:12000px;}
#layer-horizontal-3{width:22500px;}
.layer-vertical{position:absolute;bottom:0px;width:100%;}
#layer-vertical-1{height:3500px;}
#layer-vertical-2{height:6000px;}
#layer-vertical-3{/*height is set by javascript*/
}
.mountain{position:absolute;bottom:20%;width:800px;height:400px;background-image:url(image/mountain.png);}
#mountain-1{left:1000px;}
#mountain-2{left:2800px;}
#nba-ball{position:absolute;left:415px;bottom:250px;width:70px;height:70px;background-image:url(image/nba-ball.png);}
#nba-board-1{left:0px;bottom:0px;}
#nba-board-2{left:120px;bottom:0px;}
#nba-board-3{left:240px;bottom:0px;}
#nba-board-4{left:550px;bottom:0px;}
#nba-board-5{left:670px;bottom:0px;}
#nba-board-6{left:790px;bottom:0px;}
.nba-board-blue{position:absolute;width:110px;height:140px;background-image:url(image/nba-board-blue.png);}
.nba-board-red{position:absolute;width:110px;height:140px;background-image:url(image/nba-board-red.png);}
#nba-container{position:absolute;left:6680px;bottom:20%;width:900px;height:80%;}
#nba-player{position:relative;left:-50%;overflow:hidden;width:300px;height:280px;}
#nba-player-eyes{position:absolute;left:92px;top:75px;width:66px;height:30px;opacity:0;filter:alpha(opacity=0);background-image:url(image/enemy-face-b-eyes.png);}
#nba-player-container{position:absolute;left:50%;bottom:0px;}
#nba-player-frame{position:absolute;left:0px;top:0px;width:1200px;height:280px;background-image:url(image/nba-player.png);}
#nba-rim-container{position:absolute;left:310px;bottom:0px;width:280px;height:500px;}
#nba-rim{position:absolute;width:280px;height:550px;background-image:url(image/nba-rim.png);}
.nba-text{position:relative;top:-17px;font-family:frankfurter-plain;color:#ffffff;font-size:120px;margin-left:-50%;}
.nba-text-container{position:absolute;left:50%;}
#hangar{position:absolute;left:8030px;bottom:20%;width:800px;height:530px;background-color:#555555;}
#hangar-door{position:absolute;left:100px;bottom:0px;width:600px;height:290px;background-color:#333333;}
#hangar-roof{position:absolute;width:100%;height:40px;background-color:#aaaaaa;}
#hangar-window{position:absolute;left:100px;top:90px;width:600px;height:100px;background-image:url(image/hangar-window.png);}
#page{left:0px;top:0px;width:100%;}
#panel{position:absolute;top:60px;width:100%;height:100%;background-image:url(image/panel.png);}
#panel-and-floor-container{position:absolute;left:13320px;top:80%;width:6210px;height:90%;background-color:#444444;overflow:hidden;}
.piechart{position:absolute;width:300px;height:300px;overflow:hidden;}
#piechart-aol{left:160px;top:30px;}
#piechart-aol-text-graphic-1{left:98px;top:98px;}
#piechart-aol-text-graphic-2{left:100px;top:150px;}
.piechart-back{position:absolute;left:0px;top:0px;width:300px;height:300px;background-image:url(image/piechart-back.png);}
#piechart-foxnews{left:50px;top:130px;}
#piechart-foxnews-front{position:absolute;left:0px;top:0px;width:300px;height:300px;background-image:url(image/piechart-foxnews-front.png);}
#piechart-foxnews-text-graphic-1{left:25px;top:98px;}
#piechart-foxnews-text-graphic-2{left:42px;top:150px;}
#piechart-foxnews-text-animation-1{left:191px;top:155px;}
#piechart-foxnews-text-animation-2{left:218px;top:193px;}
#piechart-foxnews-text-code-1{left:220px;top:67px;}
#piechart-foxnews-text-code-2{left:221px;top:105px;}
#piechart-incognito{left:135px;top:20px;}
#piechart-incognito-front{position:absolute;left:0px;top:0px;width:300px;height:300px;background-image:url(image/piechart-foxnews-front.png);}
#piechart-incognito-text-graphic-1{left:202px;top:155px;}
#piechart-incognito-text-graphic-2{left:216px;top:194px;}
#piechart-incognito-text-animation-1{left:10px;top:97px;}
#piechart-incognito-text-animation-2{left:46px;top:148px;}
#piechart-incognito-text-code-1{left:220px;top:67px;}
#piechart-incognito-text-code-2{left:221px;top:106px;}
.piechart-text-a{position:absolute;font-family:poster-sans-bold;color:#ffffff;font-size:36px;}
.piechart-text-b{position:absolute;font-family:frankfurter-medium-plain;color:#ffffff;font-size:30px;}
.piechart-text-c{position:absolute;font-family:poster-sans-bold;color:#ffffff;font-size:50px;}
.piechart-text-d{position:absolute;font-family:frankfurter-medium-plain;color:#ffffff;font-size:40px;}
.plant{position:absolute;width:160px;height:100%;}
.plant-head-leaves{position:absolute;width:160px;height:250px;background-image:url(image/plant-head-leaves.png);}
.plant-stalk{position:absolute;left:77px;top:95px;width:6px;height:100%;background-color:#a67c52;}
#plant-1{left:180px;top:65%;}
#plant-2{left:360px;top:65%;}
#plant-3{left:540px;top:52%;}
#plant-4{left:720px;top:52%;}
#plants-container{position:absolute;left:3280px;bottom:20%;width:900px;height:80%;}
.plant-line{position:absolute;width:100%;height:1px;background-color:#ffffff;}
#plant-line-1{bottom:65%;}
#plant-line-2{bottom:52%;}
#plant-line-3{bottom:39%;}
#plant-line-4{bottom:26%;}
#plant-line-5{bottom:13%;}
.plant-ribbon{position:absolute;}
#plant-ribbon-container{position:absolute;width:1200px;height:40px;bottom:70%;}
#plant-ribbon-1{left:196px;}
#plant-ribbon-2{left:338px;}
#plant-ribbon-3{left:566px;}
#plant-ribbon-4{left:712px;}
.plant-ribbon-left{position:relative;float:left;width:20px;height:40px;margin-right:-1px;/*to cover 1 line gap between div in safari*/
background-image:url(image/plant-ribbon-left.png);}
.plant-ribbon-middle{position:relative;float:left;height:34px;padding-top:6px;padding-left:2px;padding-right:2px;background-color:#f7941d;font-family:frankfurter-plain;color:#ffffff;font-size:24px;}
.plant-ribbon-right{position:relative;float:left;width:20px;height:40px;margin-left:-1px;/*to cover 1 line gap between div in safari*/
background-image:url(image/plant-ribbon-right.png);}
#plant-text-1{bottom:66%;}
#plant-text-2{bottom:53%;}
#plant-text-3{bottom:40%;}
#plant-text-4{bottom:27%;}
#plant-text-5{bottom:14%;}
.plant-text{position:absolute;left:0px;font-family:frankfurter-medium-plain;color:#ffffff;font-size:20px;}
#preloader{position:absolute;left:0px;bottom:0px;width:100%;height:100%;}
#preloader-banner{position:relative;left:-50%;margin-top:-115px;width:600px;height:230px;}
#preloader-banner-container{position:absolute;left:50%;top:50%;}
#preloader-banner-left{position:absolute;left:0px;top:0px;width:80px;height:230px;background-image:url(image/preloader-banner-left.png);}
#preloader-banner-middle{position:absolute;left:79px;top:0px;width:440px;height:190px;background-color:#f26d7d;}
#preloader-banner-right{position:absolute;left:518px;top:0px;width:80px;height:230px;background-image:url(image/preloader-banner-right.png);}
#preloader-banner-text-a{position:relative;font-family:frankfurter-plain;color:#ffffff;font-size:72px;text-align:center;margin-top:29px;}
#preloader-banner-text-b{position:relative;font-family:frankfurter-plain;color:#ffffff;font-size:39px;text-align:center;margin-top:-12px;}
#preloader-dots{position:absolute;left:194px;top:130px;width:53px;height:9px;}
.preloader-dots-animation{background-image:url(image/preloader-dots-animation.gif);}
.preloader-dots-static{background-image:url(image/preloader-dots-static.png);}
#robby{position:relative;left:-50%;width:200px;height:175px;overflow:hidden;}
#robby-container{position:absolute;left:50%;bottom:100%;}
#robby-eyes-close{position:absolute;top:35px;left:90px;width:55px;height:25px;background-image:url(image/robby-eyes-close.png);}
#robby-slides{position:absolute;left:0px;top:0px;width:1800px;height:400px;background-image:url(image/robby-slides.png);}
#ribbon-2-1{left:9390px;top:80%;}
#ribbon-2-2{left:10735px;top:80%;}
#ribbon-2-3{left:12240px;top:80%;}
.ribbon-absolute{position:absolute;}
.ribbon-container{position:absolute;width:100%;height:75px;top:5%;text-align:center;/*to center div,combine with display:inline-block*/
}
.ribbon-left{position:relative;float:left;width:55px;height:75px;margin-right:-1px;/*to cover 1 line gap between div in safari*/
background-image:url(image/ribbon-left.png);}
.ribbon-middle{position:relative;float:left;height:50px;background-color:#ed1c24;font-family:lobster;color:#ffffff;font-size:36px;text-align:center;}
.ribbon-right{position:relative;float:left;width:55px;height:75px;margin-left:-1px;/*to cover 1 line gap between div in safari*/
background-image:url(image/ribbon-right.png);}
.ribbon-relative{display:inline-block;/*to center div,combine with text-align:center*/
}
#robot{position:absolute;left:380px;bottom:53px;width:620px;height:492px;}
#robot-body{position:absolute;left:60px;top:0px;width:500px;height:399px;background-image:url(image/robot-body.png);}
.robot-hand-a{position:absolute;left:0px;width:160px;height:137px;background-image:url(image/robot-hand-a.png);}
.robot-hand-b{position:absolute;left:20px;width:120px;height:137px;background-image:url(image/robot-hand-b.png);}
.robot-hand-c{position:absolute;left:60px;width:40px;height:137px;background-image:url(image/robot-hand-c.png);}
.robot-hand-d{position:absolute;left:20px;width:120px;height:137px;background-image:url(image/robot-hand-d.png);}
#robot-hand-left{position:absolute;left:0px;top:355px;width:160px;height:137px;}
#robot-hand-right{position:absolute;left:460px;top:355px;width:160px;height:137px;}
.sea{position:absolute;top:90%;}
#sea-1{left:8100px;width:5220px;height:80%;}
#sea-2{left:19530px;width:2970px;height:10%;background-color:#0072bc;}
.sea-seal{position:absolute;top:-1px;width:100%;height:2px;background-color:#0072bc;}
#sea-layer-horizontal-1{left:0px;width:100%;height:85%;background-color:#0072bc;}
#sea-floor{position:absolute;left:0px;top:170%;width:22500px;height:5%;background-color:#c69c6d;}
.sea-ribbon-container{position:absolute;height:40px;right:0%;}
.sea-ribbon-left{position:relative;float:left;width:20px;height:40px;margin-right:-1px;/*to cover 1 line gap between div in safari*/
background-image:url(image/sea-ribbon-left.png);}
.sea-ribbon-middle{position:relative;float:left;height:34px;padding-top:6px;padding-left:2px;padding-right:2px;background-color:#f26d7d;font-family:frankfurter-plain;color:#ffffff;font-size:24px;}
.sea-ribbon-right{position:relative;float:left;width:20px;height:40px;margin-left:-1px;/*to cover 1 line gap between div in safari*/
background-image:url(image/sea-ribbon-right.png);}
.sea-wave{position:absolute;bottom:10%;height:6px;background-image:url(image/sea-wave.png);}
#sea-wave-1{left:8100px;width:5220px;}
#sea-wave-2{left:19530px;width:2970px;}
#skill-1-container{position:absolute;left:1020px;bottom:0px;width:1000px;height:90%;}
#skill-2-container{position:absolute;left:2420px;bottom:0px;width:1000px;height:90%;}
#skill-3-container{position:absolute;left:3820px;bottom:0px;width:1000px;height:90%;}
.skill-measurement{position:absolute;bottom:0px;height:100%;}
.skill-measurement-1{left:270px;}
.skill-measurement-2{left:420px;}
.skill-measurement-3{left:570px;}
.skill-measurement-4{left:720px;}
.skill-measurement-5{left:870px;}
.skill-measurement-header{position:absolute;padding-top:6px;padding-left:10px;padding-right:10px;padding-bottom:5px;background-color:#00bff3;font-family:frankfurter-medium-plain;color:#0072bc;font-size:18px;}
.skill-measurement-line{position:absolute;width:1px;height:100%;background-color:#00bff3;}
.scroll-or-swipe-text-container{position:absolute;bottom:-120px;width:100%;height:50px;font-family:frankfurter-medium-plain;color:#ffffff;font-size:30px;text-align:center;opacity:0;filter:alpha(opacity=0);}
#social-bottom{position:relative;left:20px;width:80px;height:21px;margin-top:-1px;/*to cover 1 line gap between div in safari*/
background-image:url(image/social-bottom.png);}
#social-container{position:absolute;width:120px;left:85%;}
#social-middle{position:relative;left:20px;width:70px;padding-top:20px;padding-left:10px;padding-bottom:10px;background-color:#ed1c24;}
#social-top{position:relative;width:120px;height:23px;margin-bottom:-1px;/*to cover 1 line gap between div in safari*/
background-image:url(image/social-top.png);}
.social-icon{position:relative;width:60px;height:60px;margin-bottom:10px;}
#splash-container{position:absolute;bottom:20%;width:1300px;height:548px;}
#squid{position:absolute;left:430px;bottom:10px;width:570px;height:600px;}
#squid-body{position:absolute;left:60px;top:0px;width:450px;height:544px;background-image:url(image/squid-body.png);}
.squid-hand-close{position:absolute;}
#squid-hand-close-1{left:0px;top:399px;width:80px;height:83px;background-image:url(image/squid-hand-close-a.png);}
#squid-hand-close-2{left:100px;top:510px;width:82px;height:81px;background-image:url(image/squid-hand-close-b.png);}
#squid-hand-close-3{left:388px;top:510px;width:82px;height:81px;background-image:url(image/squid-hand-close-c.png);}
#squid-hand-close-4{left:490px;top:399px;width:80px;height:83px;background-image:url(image/squid-hand-close-d.png);}
.squid-hand-open{position:absolute;}
#squid-hand-open-1{left:0px;top:394px;width:85px;height:100px;background-image:url(image/squid-hand-open-a.png);}
#squid-hand-open-2{left:94px;top:502px;width:96px;height:97px;background-image:url(image/squid-hand-open-b.png);}
#squid-hand-open-3{left:380px;top:502px;width:96px;height:97px;background-image:url(image/squid-hand-open-c.png);}
#squid-hand-open-4{left:485px;top:394px;width:85px;height:100px;background-image:url(image/squid-hand-open-d.png);}
#title-about{position:absolute;left:2280px;bottom:20%;width:800px;height:400px;background-image:url(image/title-about.png);}
#title-awards-and{position:absolute;left:19710px;bottom:20%;width:1060px;height:420px;background-image:url(image/title-awards-and.png);}
#title-contact{position:absolute;top:0px;margin-left:-1040px;width:1080px;height:540px;background-image:url(image/title-contact.png);}
#title-experience{position:absolute;left:13500px;bottom:20%;width:1140px;height:400px;background-image:url(image/title-experience.png);}
#title-leonardi{position:absolute;left:200px;bottom:0px;width:880px;height:300px;background-image:url(image/title-leonardi.png);}
#title-publication{position:absolute;left:19910px;bottom:20%;width:1180px;height:300px;background-image:url(image/title-publication.png);}
#title-robby{position:absolute;left:0px;bottom:0px;width:840px;height:420px;background-image:url(image/title-robby.png);}
#title-skills{position:absolute;left:0px;bottom:0px;width:820px;height:400px;background-image:url(image/title-skills.png);}
.transparent{opacity:0;filter:alpha(opacity=0);}
#tree-1{left:0px;bottom:0px;}
#tree-2{left:100px;bottom:0px;}
#tree-3{left:240px;bottom:0px;}
#tree-4{left:880px;bottom:0px;}
#tree-5{left:920px;bottom:0px;}
#tree-6{left:1060px;bottom:0px;}
#tree-7{left:2650px;bottom:20%;}
#tree-8{left:2750px;bottom:20%;}
#tree-9{left:3010px;bottom:20%;}
#tree-10{left:2850px;bottom:20%;}
#tree-11{left:-100px;bottom:0px;}
#tree-12{left:20px;bottom:0px;}
#tree-13{left:140px;bottom:0px;}
#tree-14{left:260px;bottom:0px;}
#tree-15{left:380px;bottom:0px;}
#tree-16{left:500px;bottom:0px;}
#tree-17{left:620px;bottom:0px;}
#tree-18{left:740px;bottom:0px;}
#tree-19{left:860px;bottom:0px;}
#tree-20{left:-100px;bottom:0px;}
#tree-21{left:0px;bottom:0px;}
#tree-22{left:160px;bottom:0px;}
#tree-23{left:600px;bottom:0px;}
#tree-24{left:700px;bottom:0px;}
#tree-25{left:860px;bottom:0px;}
.tree-bright-a{position:absolute;width:140px;height:95px;background-image:url(image/tree-bright-a.png);}
.tree-bright-b{position:absolute;width:140px;height:185px;background-image:url(image/tree-bright-b.png);}
.tree-bright-c{position:absolute;width:200px;height:240px;background-image:url(image/tree-bright-c.png);}
.tree-bright-d{position:absolute;width:200px;height:300px;background-image:url(image/tree-bright-d.png);}
.tree-bright-e{position:absolute;width:200px;height:430px;background-image:url(image/tree-bright-e.png);}
.tree-dark-a{position:absolute;width:140px;height:95px;background-image:url(image/tree-dark-a.png);}
.tree-dark-b{position:absolute;width:140px;height:185px;background-image:url(image/tree-dark-b.png);}
.tree-dark-c{position:absolute;width:200px;height:240px;background-image:url(image/tree-dark-c.png);}
.tree-dark-d{position:absolute;width:200px;height:300px;background-image:url(image/tree-dark-d.png);}
.tree-dark-e{position:absolute;width:200px;height:430px;background-image:url(image/tree-dark-e.png);}
.turtle{position:absolute;width:125px;height:75px;overflow:hidden;background-image:url(image/turtle.png);}
.turtle-eyes{position:absolute;left:3px;top:27px;width:39px;height:18px;opacity:0;filter:alpha(opacity=0);background-image:url(image/turtle-eyes.png);}
#turtle-ribbon-container-1{top:0px;}
#turtle-ribbon-container-2{top:100px;}
#turtle-ribbon-container-3{top:200px;}
#turtle-ribbon-container-4{top:300px;}
#turtles-container{position:absolute;left:270px;top:50px;width:725px;height:475px;}
#turtle-text-container{position:absolute;top:65px;right:760px;width:480px;height:440px;}
.waterfall{position:absolute;left:150px;top:0px;width:860px;height:100%;}
#waterfall-1{background-image:url(image/waterfall-a.png);}
#waterfall-2{background-image:url(image/waterfall-b.png);}
.window{position:absolute;width:190px;height:110px;background-image:url(image/window.png);}
分享到QQ
分享到微博
微信扫一扫
