Skip to content

Commit

Permalink
fix: 스크롤 되면 카메라 데코가 사라지는 버그 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@cheonjiyun
cheonjiyun committed Mar 11, 2024
1 parent be08265 commit c2cef83
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 32 deletions.
90 changes: 69 additions & 21 deletions assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ header {
display: block;
width: 60px;
height: 60px;
margin: 1rem;
}

h1 {
Expand All @@ -64,6 +65,7 @@ h2 {
text-align: center;
color: #474747;
font-size: 0.8rem;
word-break: keep-all;
}

/* main */
Expand Down Expand Up @@ -217,7 +219,11 @@ main {
margin: 0 10px;
}

.phone {
.phone-container {
margin: auto;
}

.phone-inner {
position: sticky;
top: 100px;
width: 70.6mm;
Expand All @@ -233,6 +239,10 @@ main {
scrollbar-width: none;
}

.phone {
position: absolute;
}

.phone::-webkit-scrollbar {
display: none;
}
Expand All @@ -244,85 +254,85 @@ main {

/* -- 폰 기종 가로세로 크기 -- */

.galaxy-s-24 {
.galaxy-s-24 .phone-inner {
width: 70.6mm;
height: 147mm;
border-radius: 34px;
}

.galaxy-s-24-plus {
.galaxy-s-24-plus .phone-inner {
width: 75.9mm;
height: 158.5mm;
border-radius: 35px;
}

.galaxy-s-24-ultra {
.galaxy-s-24-ultra .phone-inner {
width: 79mm;
height: 162.3mm;
border-radius: 5px;
}

/* .galaxy-s-23 {
/* .galaxy-s-23 .phone-inner{
width: 70.9mm;
height: 146.3mm;
border-radius: 40px;
}
.galaxy-s-23-plus {
.galaxy-s-23-plus .phone-inner{
width: 76.2mm;
height: 157.8mm;
border-radius: 40px;
}
.galaxy-s-23-ultra {
.galaxy-s-23-ultra .phone-inner{
width: 78.1mm;
height: 163.4mm;
border-radius: 40px;
} */

.galaxy-z-flip5 {
.galaxy-z-flip5 .phone-inner {
width: 71.9mm;
height: 165.1mm;
border-radius: 25px;
}

/* .galaxy-z-flip4 {
/* .galaxy-z-flip4 .phone-inner{
width: 71.9mm;
height: 165.2mm;
border-radius: 40px;
} */

.galaxy-z-fold5 {
.galaxy-z-fold5 .phone-inner {
width: 67.1mm;
height: 154.9mm;
border-radius: 25px;
}

.galaxy-z-fold5-open {
.galaxy-z-fold5-open .phone-inner {
width: 129.9mm;
height: 154.9mm;
border-radius: 25px;
}

.icon-15 {
.iphone-15 .phone-inner {
width: 71.6mm;
height: 147.6mm;
border-radius: 40px;
}

.icon-15-plus {
.iphone15-plus .phone-inner {
width: 77.8mm;
height: 160.9mm;
border-radius: 40px;
}

.icon-15-pro {
.iphone-15-pro .phone-inner {
width: 70.6mm;
height: 146.6mm;
border-radius: 40px;
}

.icon-15-pro-max {
.icon-15-pro-max .phone-inner {
width: 76.7mm;
height: 159.9mm;
border-radius: 25px;
Expand All @@ -336,27 +346,29 @@ main {
.galaxy-z-flip5 .phone-deco,
.galaxy-z-fold5 .phone-deco {
position: absolute;
top: 7px;
top: 140px;
left: 50%;
width: 14px;
height: 14px;
border-radius: 100%;
background-color: #1d1c1c;
transform: translateX(-50%);
z-index: 1;
}

.icon-15 .phone-deco,
.icon-15-plus .phone-deco,
.icon-15-pro .phone-deco,
.icon-15-pro-max .phone-deco {
.iphone-15 .phone-deco,
.iphone-15-plus .phone-deco,
.iphone-15-pro .phone-deco,
.iphone-15-pro-max .phone-deco {
position: absolute;
top: 8px;
top: 140px;
left: 50%;
width: 25mm;
height: 22px;
border-radius: 30mm;
background-color: #1d1c1c;
transform: translateX(-50%);
z-index: 1;
}

/*
Expand Down Expand Up @@ -525,3 +537,39 @@ footer * {
right: 10px;
top: 10px;
}

.mobile {
display: none;
}

@media screen and (max-width: 770px) {
main {
display: none;
}

.logo-container {
margin: 0;
}

.mobile {
display: block;
height: 70vh;
font-size: 1.2rem;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto 1rem;
line-height: 200%;
word-break: keep-all;
}

.mobile p {
margin: 1rem auto;
}

.mobile span {
font-weight: 700;
}
}
28 changes: 19 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,11 @@ <h2>원고순서</h2>
</label>
</section>
<section class="pre-area">
<div class="phone galaxy-s-24">
<div class="phone-container galaxy-s-24">
<div class="phone-deco"></div>
<div class="phone-inner">
<div class="phone"></div>
</div>
</div>
<!-- <div class="cutton-group">
<p class="cutton-des">컷툰으로 보기</p>
Expand Down Expand Up @@ -185,30 +188,30 @@ <h2>휴대폰 기종</h2>
</div>

<div class="phonetype-container">
<input type="radio" id="icon-15" name="phonetype" />
<label for="icon-15" class="btn-phonetype" title="아이폰 15"
<input type="radio" id="iphone-15" name="phonetype" />
<label for="iphone-15" class="btn-phonetype" title="아이폰 15"
>아이폰 15
</label>
</div>

<div class="phonetype-container">
<input type="radio" id="icon-15-plus" name="phonetype" />
<label for="icon-15-plus" class="btn-phonetype" title="아이폰 15 Plus"
<input type="radio" id="iphone-15-plus" name="phonetype" />
<label for="iphone-15-plus" class="btn-phonetype" title="아이폰 15 Plus"
>아이폰 15 Plus
</label>
</div>

<div class="phonetype-container">
<input type="radio" id="icon-15-pro" name="phonetype" />
<label for="icon-15-pro" class="btn-phonetype" title="아이폰 15 Pro"
<input type="radio" id="iphone-15-pro" name="phonetype" />
<label for="iphone-15-pro" class="btn-phonetype" title="아이폰 15 Pro"
>아이폰 15 Pro
</label>
</div>

<div class="phonetype-container">
<input type="radio" id="icon-15-pro-max" name="phonetype" />
<input type="radio" id="iphone-15-pro-max" name="phonetype" />
<label
for="icon-15-pro-max"
for="iphone-15-pro-max"
class="btn-phonetype"
title="아이폰 15 Pro Max"
>아이폰 15 Pro Max
Expand All @@ -217,6 +220,13 @@ <h2>휴대폰 기종</h2>
</div>
</section>
</main>
<section class="mobile">
<p>
툰프리뷰는 <span> PC</span>에서 <span>넓은 화면</span> 으로 접속해야 원할하게
사용할 수 있습니다😥
</p>
<p>양해부탁드립니다 :)</p>
</section>
<footer>
<!-- <div class="count">누적 사용횟수 <span></span>0</div> -->
<div class="announce">원고 파일은 서버에 전송하지 않습니다 :)</div>
Expand Down
6 changes: 4 additions & 2 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,13 @@ imageFileAreaDOM.addEventListener("dragend", imageViewPhone);

// --- 폰 종류 ---
let phonetypes = document.querySelectorAll("input[name='phonetype']");
let phone = document.querySelector(".phone");
let phone = document.querySelector(".phone-inner");
let phoneCon = document.querySelector(".phone-container");

function changePhone() {
const phonetype = document.querySelector("input[name='phonetype']:checked");
phone.className = `phone ${phonetype.id}`;
// phone.className = `phone-inner ${phonetype.id}`;
phoneCon.className = `phone-container ${phonetype.id}`;
}

for (const phonetype of phonetypes) {
Expand Down

0 comments on commit c2cef83

Please sign in to comment.