2022/12/01 튜토리얼 이미지 수정, 버튼 추가

This commit is contained in:
subsub 2022-12-01 09:49:19 +09:00
parent 10aee19e7f
commit fc2ea03852
7 changed files with 9 additions and 2 deletions

View File

@ -2,7 +2,10 @@ body{position: relative; width: 100%; height: 100%;}
.tutorial{width: 100%; height: 100%; overflow-x: hidden;}
.tutorial img{position: absolute;width:100%; left: 50%;top: 0;transform: translateX(-50%);}
.mask{position: fixed; display: flex; width: 100%; height: 100%; left: 0; top: 0; z-index: 5;}
.left_mask,.right_mask{width: 50%; height: 100%; background-color: transparent;}
.left_mask,.right_mask{width: 50%; height: 100%; background-color: transparent; background-repeat: no-repeat;}
.left_mask{background-image: url(/kccadrPb/tutorial/image/prev_btn.png); background-position: 10% center;}
.left_mask.first,.right_mask.last{background-image: none;}
.right_mask{background-image: url(/kccadrPb/tutorial/image/next_btn.png);background-position: 90% center;}
@media all and (max-width: 1800px){
.tutorial img{width: 100%; min-width: 1680px;}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 83 KiB

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

@ -20,6 +20,7 @@
if(imgSrc.indexOf("19.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/18.gif");
$("body,html").animate({scrollTop : 600}, 400);
$(".right_mask").removeClass("last");
}else if(imgSrc.indexOf("18.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/17.gif");
$("body,html").animate({scrollTop : 400}, 400);
@ -69,6 +70,7 @@
}else if(imgSrc.indexOf("02.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/01.gif");
$("body,html").animate({scrollTop : 0}, 400);
$(".left_mask").addClass("first");
}
});
@ -77,6 +79,7 @@
if(imgSrc.indexOf("01.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/02.gif");
$("body,html").animate({scrollTop : 400}, 400);
$(".left_mask").removeClass("first");
}else if(imgSrc.indexOf("02.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/03.gif");
}else if(imgSrc.indexOf("03.gif") > -1){
@ -127,6 +130,7 @@
}else if(imgSrc.indexOf("18.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/19.gif");
$("body,html").animate({scrollTop : 300}, 400);
$(".right_mask").addClass("last");
}
});
@ -135,7 +139,7 @@
</head>
<body>
<div class="mask">
<div class="left_mask"></div>
<div class="left_mask first"></div>
<div class="right_mask"></div>
</div>
<div class="tutorial">