GraphicalWeb/index.html at master · designless/GraphicalWeb · GitHub

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
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GRAPHICAL WEB</title>
<meta property="og:title" content="GRAPHICAL WEB">
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:image" content="icon_og.png">
<meta property="og:site_name" content="GRAPHICAL WEB">
<meta property="og:description" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

<style>
h1 {
	top: 30px; /* ロゴの座標＊上から */
	left: 30px; /* ロゴの座標＊左から */
}

nav li a {
	background: rgba(0,0,0,0.5); /* ナビの背景色 RGB alpha*/
}

a:link,
a:visited {
	color: #fff; /* リンクの文字色 */
}
</style>

</head>

<body>

<!-- ///////////////////////////////////////////////////////////////////////////// -->
<header>
<h1><img src="images/logo.png" alt="サイト名"></h1>
</header>
<!-- ///////////////////////////////////////////////////////////////////////////// -->

<!-- ///////////////////////////////////////////////////////////////////////////// -->
<nav>
<ul class="clearfix">
<li><a class="open01" href="javascript:void(0);">About</a></li>
</ul>
</nav>
<!-- ///////////////////////////////////////////////////////////////////////////// -->

<!-- ///////////////////////////////////////////////////////////////////////////// -->
<article id="window01">
<div class="inner">
<h2>About</h2>
<h3>このサイトについて</h3>
<p>ウェブを学びながら作品を掲載したい方々のために制作しました。<br>
まだまだ発展途上なので、ご意見・ご感想をお待ちしております。<br>
いずれは、デザイナー・フォトグラファー・映像作家の方々のブランディングに役立つサイトになればと思っております。</p>

<h3>お問い合わせ</h3>
<p>お問い合わせは<a href="https://www.facebook.com/" target="_blank">Facebookなどへ</a></p>
</div>
</article>
<!-- ///////////////////////////////////////////////////////////////////////////// -->

<!-- ///////////////////////////////////////////////////////////////////////////// -->
<div id="maximage">
<img src="images/slide01.jpg" alt="スライド１">
<img src="images/slide02.jpg" alt="スライド２">
<img src="images/slide03.jpg" alt="スライド３">
<img src="images/slide04.jpg" alt="スライド４">
</div>
<!-- ///////////////////////////////////////////////////////////////////////////// -->

<!-- ///////////////////////////////////////////////////////////////////////////// -->
<div id="maximageNav">
<ul>
<li><a href="javascript:void(0);" id="arrow_left"><img src="images/arrow_left.png" alt="Left"></a></li>
<li><a href="javascript:void(0);" id="arrow_right"><img src="images/arrow_right.png" alt="Right"></a></li>
<li><a href="javascript:void(0);" id="pause"><img src="images/pause.png" alt="Pause"></a></li>
<li><a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank"><img src="images/icon_facebook.png" alt="facebookでシェアする"></a></li>
</ul>
</div>
<!-- ///////////////////////////////////////////////////////////////////////////// -->

<!-- ///////////////////////////////////////////////////////////////////////////// -->
<footer>
<small>&copy; 2013</small>
</footer>
<!-- ///////////////////////////////////////////////////////////////////////////// -->


<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.cycle.all.min.js"></script>
<script src="js/jquery.maximage.min.js"></script>
<script src="js/jquery.modalbox-1.4.1-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	//リンクのフェイド
	jQuery('a').hover(
		function(){
			$(this).stop().fadeTo(200,0.7);
		},
		function () {
			$(this).stop().fadeTo(50,1);
		}
	 );
	//背景スライドショー 画像フェイド 3秒=3000
	jQuery('#maximage').maximage({
			cycleOptions: {
							fx: 'scrollDown', //移り変わり効果：fade,scrollTop,scrollRight,,scrollDown,scrollLeft
							speed: 500, //移り変わり時間
							timeout: 7000, //止まっている時間：0でスライドしない
							prev: '#arrow_left',
							next: '#arrow_right'
							},
		cssBackgroundSize: false,
		backgroundSize: function( $item ){
			var verticalOffset = 0,
			    horizontalOffset = 0;

			if($.Window.data('w') / $.Window.data('h') < $item.data('ar')){
				$item
					.height($.Window.data('h') - verticalOffset)
					.width((($.Window.data('h') - verticalOffset) * $item.data('ar')).toFixed(0));
			}else{
				$item
					.height((($.Window.data('w') - horizontalOffset) / $item.data('ar')).toFixed(0))
					.width($.Window.data('w') - horizontalOffset);
			}
		},
		//最初のフェイドイン時間 1秒=1000
		onImagesLoaded: function(){
			jQuery('#maximage').fadeIn(1000);
		}
	});

	jQuery('#pause').click(function() {
		$('#maximage').cycle('toggle');
	});

	//モーダルボックス
	//1
	jQuery("a.open01").modalBox({
		getStaticContentFrom : "#window01",
		positionLeft : "0",
		positionTop : "0",
		setTypeOfFadingLayer : 'custom',
		setStylesOfFadingLayer : {
			 //背景色と透明度
			custom : 'background-color:#000; filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;'
			}
	});

})();

</script>
</body>
</html>