-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
질문이요~
19.08.30 16:35 작성 조회수 114
0
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body[data-char='ragirl'] {
background: #ff7200;
}
body[data-char='ilbuni'] {
background: dodgerblue;
}
body{
height:500vw;
font-family: 'Apple SD Gothic Neo', 'Roboto', 'Noto Sans KR', NanumGothic, 'Malgun Gothic', sans-serif;
-webkit-overflow-scrolling: touch;
color: #555;
}
.world{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
perspective: 1000px;
}
.house {
width: 100vw;
height: 100vh;
transform: translateZ(-490vw);
transform-style: preserve-3d;
}
.wall-front-a { transform: translateZ(300vw); }
.wall-front-b { transform: translateZ(50vw); }
.wall-front-c { transform: translateZ(-200vw); }
.wall-front-d { transform: translateZ(-500vw); }
.wall-content{
position: absolute;
display:flex;
align-items: center;
justify-content: center;
height: 100vh;
}
h2{
font-size: 15rem;
}
</style>
</head>
<body>
<div class="click-button">
<button class="buttonboy" data-char="ilbuni"></button>
<button class="buttongirl" data-char="ragirl"></button>
</div>
<div class="progress-bar-con">
<div class="progress-bar"></div>
</div>
<div class="world">
<div class="house">
<div class="wall-front-a">
<div class="wall-content">
<h2 class="wall-title">안녕하세요</h2>
<!-- <img src="Bible.png" alt=""> -->
</div>
</div>
<div class="wall-front-b">
<div class="wall-content">
<h2 class="wall-title">Hello</h2>
<!-- <img src="K-108.png" alt=""> -->
</div>
</div>
<div class="wall-front-c">
<div class="wall-content">
<h2 class="wall-title">Hola</h2>
<!-- <img src="Bible.png" alt=""> -->
</div>
</div>
<div class="wall-front-d">
<div class="wall-content">
<h2 class="wall-title">こんにちは</h2>
<!-- <img src="K-108.png" alt=""> -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function () {
const houseElem = document.querySelector('.house');
let maxScrollValue;
window.addEventListener('scroll',function () {
const scrollPer = pageYOffset / maxScrollValue;
const zMove = scrollPer *980 -450;
houseElem.style.transform = 'translateZ('+zMove+'vw)';
})
function resize() {
maxScrollValue = document.body.offsetHeight - window.innerHeight;
}
resize();
})();
</script>
</body>
</html>
복습하면서 예제랑 비슷하면서 간단하게 만들려고 위에처럼 코드를 짜봤는데 스크롤 움직이면 제대로 작동은 하는데 폰트들이 왼쪽으로 휘면서 커지네요...
이건 어떤 문제가 있는걸까요??
답변을 작성해보세요.
0
1분코딩
지식공유자2019.09.04
CSS에
.wall-front-a, .wall-front-b, .wall-front-c, .wall-front-d { display: flex; justify-content: center; }
를 추가해보세요.
각 wall 내부의 텍스트가 가운데 정렬이 안되어있어서 그렇습니다~
답변 1