API tools faq
paste
Advertisement
HoR_somesaki

HollyBlue_Open

HoR_somesaki
Mar 14th, 2019
273
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.68 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <!-- Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.    
  8.     <!-- Required meta tags -->
  9.     <meta charset="utf-8">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  11.    
  12.     <!-- Bootstrap CSS -->
  13.     <link rel="stylesheet" href="css/bootstrap.css">
  14.     <link rel="stylesheet" href="css/aoi-main.css">
  15.  
  16.     <!--jQuery RWD地圖-->
  17.     <script src="jQuery/jQuery-rwdImageMaps-master/jquery.rwdImageMaps.js"></script>
  18.    
  19.     <!--jQuery Slider-->
  20.     <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
  21.     <link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
  22.     <link href="jQueryAssets/jquery.ui.slider.min.css" rel="stylesheet" type="text/css">
  23.     <script src="jQueryAssets/jquery-1.11.1.min.js"></script>
  24.     <script src="jQueryAssets/jquery.ui-1.10.4.slider.min.js"></script>
  25.    
  26. <title>青色之旅</title>
  27. </head>
  28. <body style="opacity: 0" >
  29. <div class="container-fluid" style="margin: 0px;padding: 0xp;height: 100vh">
  30.     <!--開場動畫-->
  31.     <!----><div id="open">
  32.         <div class="row align-items-center justify-content-center" style="height: 100vh;">
  33.         <div class="row justify-content-center">
  34.             <div zclass="col-9 col-sm-6 col-md-6 col-lg-8">
  35.                 <img id="logo" class="img-fluid" src="美術/UI/開頭動畫/LOGO動畫(透明).gif" width="1300" height="900" alt=""/>
  36.             </div>
  37.             <div class="col-9 row justify-content-center"><div id="lo_bt" onClick="start()"></div></div>
  38.         </div>
  39.         </div>
  40.         <div class="row justify-content-center" style="height: 100vh;">
  41.             <img id="clock" src="美術/UI/開頭動畫/開頭靜止.png" width="1530" height="1730" alt=""/>
  42.         </div>                       
  43.     </div>
  44.     <div id="up_paper"></div>
  45.     <div id="dw_paper"></div>
  46.    
  47.     <!--內容-->
  48.     <div class="row justify-content-center align-items-center" style="margin: 0px;padding: 0xp;height: 100vh">
  49.     <div id="ar_wall"></div>
  50.     <div>
  51.       <iframe src="chap1.html" id="ehon" frameborder="0"></iframe>
  52.     </div>
  53.     </div>
  54. </div>
  55.  
  56. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  57. <script type="text/javascript" src="js/aoi-mainj.js"></script>
  58. <script src="jQuery/jQuery-rwdImageMaps-master/jquery.rwdImageMaps.js"></script>
  59. <!--jQuery RWD地圖-->
  60. $(document).ready(function(e) {
  61.     $('img[usemap]').rwdImageMaps();
  62. });
  63.  
  64. /*開頭布置*/
  65. $(window).one('mousemove', function(e){
  66.     myMedia.play();
  67. });
  68. /*停頓以後顯示*/ 
  69. setTimeout(function (){loshow.style.visibility = "visible";},1500);
  70. setTimeout(function (){l_bt.style.visibility = "visible";},3500);  
  71.    
  72. var ehon = document.getElementById("ehon");
  73. var icw = document.getElementById("icwindow");
  74. var ar_wall = document.getElementById("ar_wall");
  75. /*開頭動畫*/
  76. var open = document.getElementById("open");
  77. var l_bt = document.getElementById("lo_bt");
  78. var loshow = document.getElementById("logo");
  79. var cl = document.getElementById("clock");
  80. var upa = document.getElementById("up_paper");
  81. var dpa = document.getElementById("dw_paper");
  82.  
  83. var l;
  84. var load = 0;
  85. var loading = false;
  86.    
  87. function start(){
  88.     mySound.volume = 1;
  89.     mySound.play();
  90.     $("#open").animate({marginTop:"-100vh"},800);
  91.     setTimeout(function(){
  92.         cl.src = "美術/UI/開頭動畫/開頭時鐘APNG.png";
  93.     },600);
  94.     setTimeout(function(){
  95.         $("#myMedia").animate({volume:"0"},2000);
  96.     },6000);
  97.     setTimeout(function(){
  98.         C1Media.volume = 0;
  99.         C1Media.play();
  100.         $("#C1Media").animate({volume:0.5},2000);
  101.     },8000);
  102.     setTimeout(function(){$("#up_paper").animate({marginTop:"-44.5vh"},1000);},6800);
  103.     setTimeout(function(){$("#dw_paper").animate({top:"100vh"},1000);},6800);
  104.     setTimeout(function(){open.style.display = "none"},8500);
  105.     setTimeout(function(){ehon.style.visibility = "visible";},2000);
  106.     setTimeout(function(){iconS.style.visibility = "visible";},2000);
  107. }  
  108.  
  109. /*配樂控制*/   
  110. var myMedia = document.createElement('audio');
  111. var C1Media = document.createElement('audio');
  112.  
  113. myMedia.id = "myMedia";
  114. C1Media.id = "C1Media";
  115. playAudioOP('音樂/BGM/開頭BGM.mp3', 0.5);
  116. playAudioC1('音樂/BGM/第一章(healing4).mp3', 0.5);
  117.    
  118. function playAudioOP(fileName, myVolume) {
  119.     myMedia.src = fileName;
  120.     myMedia.setAttribute('loop', 'loop');
  121.     setVolume(myVolume);
  122. }
  123. function playAudioC1(fileName, myVolume) {
  124.     C1Media.src = fileName;
  125.     C1Media.setAttribute('loop', 'loop');
  126.     setVolume(myVolume);
  127. }
  128. function setVolume(myVolume) {
  129.     var C1Media = document.getElementById('C1Media');
  130.     C1Media.volume = myVolume;
  131. }  
  132.    
  133. /*網頁逐漸浮現*/
  134. $(document).ready(function(){
  135.     $("body").animate({opacity:"1.0"},500);
  136.     return true;
  137. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!