-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
81 lines (69 loc) · 2.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>IMOMOCHI</title>
<link rel="icon" href="img/favicon.png" type="image/x-image">
<link rel="apple-touch-icon" href="img/favicon.png" sizes="180x180">
<link rel="stylesheet" href="./style.css">
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous">
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css">
</head>
<body>
<header id="header">
<img id="logo" src="img/icon.png" />
</header>
<header id="hover-header">
<span id="name">IMOMOCHI</span>
<nav class="menu">
<a href="#buy" class="buy" id="blue_button">
<span id="blue_button_text">購入</span>
</a>
</nav>
</header>
<div class="content">
<div id="title_img_box">
<video autoplay muted playsinline style="display: none;" id="title_movie_pc">
<source src="img/imomochi_title.webm" type="video/webm" />
<source src="img/imomochi_title.mp4" type="video/mp4" />
<p>unsupported</p>
</video>
<video autoplay muted playsinline style="display: none;" id="title_movie_sp">
<source src="img/imomochi_title_smart.webm" type="video/webm" />
<source src="img/imomochi_title_smart.mp4" type="video/mp4" />
<p>unsupported</p>
</video>
</div>
<div class="hover-area"></div>
<div id="anim01_img_box">
<img id="anim01_img" src="img/anim01/1.webp" /> <!--初期画像。置き換わる部分-->
</div>
<div id="anim01_img_padding" class="padding"></div>
<div id="anim02_img_box">
<img id="anim02_img" src="img/anim02/2.webp" /> <!--初期画像。置き換わる部分-->
</div>
<div id="anim02_img_padding" class="padding"></div>
</div>
<section id="buy" class="hide-area"><!--モーダル表示エリアのHTML。id名にリンク先と同じ名前を指定。非表示にするためhide-areaというクラス名も指定。-->
<h2>購入</h2>
<p class="buy_text"></p>
</section>
</body>
<script>const is_mobile = (window.matchMedia && window.matchMedia("(max-width: 520px)").matches)</script>
<script>
if (is_mobile){
$("#title_movie_sp").css("display", "block");
}else{
$("#title_movie_pc").css("display", "block");
}
</script>
<script src="anim01.js"></script>
<script src="anim02.js"></script>
<script src="header.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/js/modaal.min.js"></script>
<script src="modal.js"></script>
</html>