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
39
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119 |
<html>
<head>
<title></title>
<style>
html, body { height:100%; }
/* すべての写真を格納するdiv定義 */
#pcontainer { position:relative;width:100%; height:100%; }
/* 各スライドdivの背景画像設定 */
#photo1 { background-image: url(images/1.jpg); }
#photo2 { background-image: url(images/2.jpg); }
#photo3 { background-image: url(images/3.jpg); }
#photo4 { background-image: url(images/4.jpg); }
#photo5 { background-image: url(images/5.jpg); }
/* 表示画面サイズ幅が640px以下で画像切り替え */
@media screen and (max-width: 640px) {
#photo1 { background-image: url(images/s1.jpg); }
#photo2 { background-image: url(images/s2.jpg); }
#photo3 { background-image: url(images/s3.jpg); }
#photo4 { background-image: url(images/s4.jpg); }
#photo5 { background-image: url(images/s5.jpg); }
}
/* 全スライド共通のstyleとanimationの設定 */
.frame {
width:100%; height:100%; position:absolute;top:0;left:0;
background-size:cover;
opacity:0;
animation:imgTrans 30s infinite;
-webkit-animation:imgTrans 30s infinite;
}
/* 各スライドのanimationに時間的ずれを設定 */
#photo2 { animation-delay: 6s;-webkit-animation-delay: 6s; }
#photo3 { animation-delay:12s;-webkit-animation-delay:12s; }
#photo4 { animation-delay:18s;-webkit-animation-delay:18s; }
#photo5 { animation-delay:24s;-webkit-animation-delay:24s; }
/* メモ表示の共通したstyleとanimationの設定 */
.memo {
display:inline-block;
max-width:300px;width:85%;
background-color: rgba( 255, 255, 255, 0.6 );
padding:10px;
position:absolute;
bottom:10%;
left:5%;
font-size:14px;
opacity:0;
animation:txtTrans 30s infinite;
-webkit-animation:txtTrans 30s infinite;
}
/* 各メモのanimationに時間的ずれを設定 */
#photo2 .memo { animation-delay: 6s;-webkit-animation-delay: 6s; }
#photo3 .memo { animation-delay:12s;-webkit-animation-delay:12s; }
#photo4 .memo { animation-delay:18s;-webkit-animation-delay:18s; }
#photo5 .memo { animation-delay:24s;-webkit-animation-delay:24s; }
/* 一時停止ボタンとプレイボタンの表示とanimation制御の定義 */
#pause_btn:checked ~ #pcontainer .frame { animation-play-state:paused;-webkit-animation-play-state:paused; }
#pause_btn:checked ~ #pcontainer .frame span { animation-play-state:paused;-webkit-animation-play-state:paused; }
#pause_btn:checked ~ #pause img { display:none; }
#pause_btn:checked ~ #play img { display:block; }
#play_btn:checked ~ #pcontainer .frame { animation-play-state:running;-webkit-animation-play-state:running; }
#play_btn:checked ~ #pcontainer .frame span { animation-play-state:running;-webkit-animation-play-state:running; }
/* 一時停止ボタンとプレイボタンのstyleの定義 */
.r_btn { display:none; }
#play img { display:none; }
label { position:absolute;left:50%;bottom:5%;margin-left:-30px; }
label img { max-width:60px; width:70%;}
label img:hover { cursor:pointer; }
/* スライドのFadeIn,FadeOutのanimation設定 */
@keyframes imgTrans {
0% { opacity:0; }
5% { opacity:1; }
18% { opacity:1; }
22% { opacity:0; }
100% { opacity:0; }
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
5% { opacity:1; }
18% { opacity:1; }
22% { opacity:0; }
100% { opacity:0; }
}
/* メモ表示のanimation設定 */
@keyframes txtTrans {
0% { opacity:0; bottom: 5%; }
5% { opacity:1; bottom:15%; }
18% { opacity:1; bottom:15%; }
22% { opacity:1; bottom:15%; }
100% { opacity:0; bottom: 5%; }
}
@-webkit-keyframes txtTrans {
0% { opacity:0; bottom: 5%; }
5% { opacity:1; bottom:15%; }
18% { opacity:1; bottom:15%; }
22% { opacity:1; bottom:15%; }
100% { opacity:0; bottom: 5%; }
}
</style>
</head>
<body>
<input type="radio" id="play_btn" class="r_btn" name="btn" />
<input type="radio" id="pause_btn" class="r_btn" name="btn" />
<div id="pcontainer">
<div id="photo1" class="frame"><span class="memo"><strong>針ノ木岳の朝焼け 新越山荘から撮影</strong><br
/><br />
朝、雲海に浮かぶ浅間山を赤く染めて日の出を迎える。やがて、彼方に富士山、八ヶ岳が雲海に浮かんで見え、針ノ木岳が赤く染まる。新越山荘は今日の好天気を期待させる朝を迎えた。
</span></div>
<div id="photo2" class="frame"><span class="memo"><strong>針ノ木岳を背に 岩小屋沢岳への登り</strong><br
/><br />
岩小屋沢岳のピークまでは、一旦下って登り返すわけであるが、ここでの登りの辛さはほとんど覚えていない。それほど周りの景色を堪能したということだろう。</span></div>
<div id="photo3" class="frame"><span class="memo"><strong>雲海のかなたに剣岳の雄姿</strong><br
/><br />
６時５分、新越山荘を出発。尾根の東側のゆるやかな登りを登りつめ稜線に出た所で、見えた、やりました、雲海の向こうに立山連峰と剱岳がその秀麗な姿を見せている。新越山荘に宿泊したことが大正解の大成功。これだけ近くからの迫力ある剣・立山はここからしか見られない。</span></div>
<div id="photo4" class="frame"><span class="memo"><strong>樹林越しに鹿島槍ヶ岳方面を望む</strong><br
/><br />
岩小屋沢岳からの道のりでも楽しい眺望が続き、だんだん低木越しになる山並みを楽しみながら進んだ。しかし、眺望が効かなくなった種池山荘への最後の登りは結構しんどい思いをした。種池山荘着が午前９時。</span></div>
<div id="photo5" class="frame"><span class="memo"><strong>爺岳登山路から岩小屋沢岳方面を望む</strong><br
/><br />
種池山荘からピストンする人と、冷池山荘に行き交う人で小石の散らばった歩きやすい登山路も賑わってた。急ぐ旅ではない。ゆっくり、ゆっくりと登る。いい天気、素晴らしい眺望。槍が岳、穂高岳や後立山連峰も全容を現している</span></div>
</div>
<label for="pause_btn" id="pause"><img src="images/pauses.png" alt="pause" /></label>
<label for="play_btn" id="play"><img src="images/plays.png" alt="play" /></label>
</body>
</html> |
