jpf.jazz

jpf/css/inview.css

@@ -0,0 +1,55 @@
+@charset "utf-8";
+
+
+/*inviewのスタイル
+---------------------------------------------------------------------------*/
+/*共通設定（待機中）*/
+.up, .left, .right, .transform1, .transform2 {
+	opacity: 0;		/*透明度（透明の状態）*/
+	position: relative;
+}
+/*共通設定（要素が見えたら実行するアクション）*/
+.upstyle, .leftstyle, .rightstyle, .transform1style, .transform2style {
+	opacity: 1;		/*透明度（色が100%出た状態）*/
+	transition: 0.5s 1s;	/*0.5sはアニメーションの実行時間0.5秒。1sは1秒遅れてスタートする指定。*/
+}
+/*upスタイル。下から上にフェードインしてくるスタイル（待機中）*/
+.up {
+	bottom: -50px;	/*基準値の下50pxの場所からスタート*/
+}
+/*要素が見えたら実行するアクション*/
+.upstyle {
+	bottom: 0px;	/*基準値まで戻す*/
+}
+/*leftスタイル。左からフェードインしてくるスタイル（待機中）*/
+.left {
+	left: -100px;	/*基準値より左に100pxの場所からスタート*/
+}
+/*要素が見えたら実行するアクション*/
+.leftstyle {
+	left: 0px;		/*基準値まで戻す*/
+}
+/*rightスタイル。右からフェードインしてくるスタイル（待機中）*/
+.right {
+	right: -100px;	/*基準値より右に100pxの場所からスタート*/
+}
+/*要素が見えたら実行するアクション*/
+.rightstyle {
+	right: 0px;		/*基準値まで戻す*/
+}
+/*transform1スタイル。その場で回転するスタイル（待機中）*/
+.transform1 {
+	transform: scaleX(0);	/*幅を0%でスタート*/
+}
+/*要素が見えたら実行するアクション*/
+.transform1style {
+	transform: scaleX(1);	/*幅を100%に戻す*/
+}
+/*transform2スタイル。倒れた状態から起き上がるスタイル（待機中）*/
+.transform2 {
+	transform: perspective(400px) rotateX(100deg);
+}
+/*要素が見えたら実行するアクション*/
+.transform2style {
+	transform: perspective(0px) rotateX(0deg);
+}

jpf/css/slide.css

@@ -0,0 +1,80 @@
+@charset "utf-8";
+
+
+
+/*CSSスライドショーアニメーション設定
+---------------------------------------------------------------------------*/
+/*1枚目*/
+@keyframes slide1 {
+	0% {left: 110%;}
+	3% {left: 0%;}
+	20% {left: 0%;}
+	23% {left: -110%;}
+	100% {left: -110%;}
+}
+/*2枚目*/
+@keyframes slide2 {
+	0% {left: 110%;}
+	33% {left: 110%;}
+	36% {left: 0%;}
+	53% {left: 0%;}
+	56% {left: -110%;}
+	100% {left: -110%;}
+}
+/*3枚目*/
+@keyframes slide3 {
+	0% {left: 110%;}
+	66% {left: 110%;}
+	69% {left: 0%;}
+	86% {left: 0%;}
+	89% {left: -110%;}
+	100% {left: -110%;}
+}
+
+/*mainimg
+---------------------------------------------------------------------------*/
+/*画像ブロック*/
+#mainimg {
+	clear: left;
+	position: relative;
+	width: 100%;
+	height: 100%;		/*高さ*/
+	z-index: 1;
+	/*background: #000;	背景色*/
+	/*overflow: hidden;*/
+}
+/*３枚画像の共通設定*/
+.slide1,.slide2,.slide3 {
+	position: absolute;left:0px;top:0px;width: 100%;height: 100%;
+	animation-duration: 15s;				/*実行する時間。「s」は秒の事。*/
+	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
+	animation-delay: 4s;					/*アニメーションを遅れて開始させる。「s」は秒の事。*/
+	animation-fill-mode: both;				/*アニメーションの待機中は最初のフレームを、アニメーションの完了後は最後のフレームを維持する。*/
+}
+/*メッセージ欄*/
+#mainimg p {
+	position: absolute;z-index: 1;
+	left: 0px;			/*左から0pxの場所にブロックを配置*/
+	bottom: 30px;		/*下から30pxの場所にブロックを配置*/
+	width: 90%;			/*幅。下のpaddingと合計して100になるように。*/
+	padding: 10px 5% !important;	/*上下、左右へのボックス内の余白。*/
+	background: #000;	/*背景色（古いブラウザ用）*/
+	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒の事で0.8は80%色がついた状態の事。*/
+	color: #fff;		/*文字色*/
+}
+/*1枚目*/
+.slide1 {
+	background: url(../images/1.jpg) no-repeat center center/cover;	/*1.jpg画像の読み込み*/
+	animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
+}
+/*2枚目*/
+.slide2 {
+	background: url(../images/2.jpg) no-repeat center center/cover;	/*2.jpg画像の読み込み*/
+	animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
+}
+/*3枚目*/
+.slide3 {
+	background: url(../images/3.jpg) no-repeat center center/cover;	/*3.jpg画像の読み込み*/
+	animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
+}
+