무엇이문제인가 텍스트날짜
240
작성한 질문수 2
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
p*200>{$}
</header>
<section class="section_today">
<article class="date_box">
<div class="tb_row">
<div class="tb_cell">
<strong class="t_date">TODAY</strong>
<div class="date_count"></div>
</div>
</div>
</article>
</section>
<script>
function countDate() {
let el = document.querySelector('.date_count');
let date = new Date();
let todayDate = String(date.getFullYear()) + String(date.getMonth() + 1 ) + String(date.getDate());//오늘의 날짜
let rolling = 24;
let resultArray = [];
resultArray = todayDate.split('');
resultArray.forEach(function(val,idx) {
let countBox = document.createElement('div');
countBox.className = 'count_box';
let numberArray =[];
let number = Number(val);
for(let i = 0; i<= rolling; i++) {
let sum = number + i;
let num = sum >= 10 ? Number(String(sum).split('')[1]) : sum;
numberArray[i] =num;
};
numberArray.reverse();
numberArray.forEach(function(val) {
let countValue = document.createElement('span');
countValue.innerText =val;
countBox.appendChild(countValue);
});
el.appendChild(countBox);
setTimeout(function() {
countBox.classList.add('active');
console.log(countBox);
}, idx * 300);
})
}
countDate();
</script>
</body>
.section_today{overflow:hidden;position:relative; background:#000; text-align: center; height: 100vh;}
.section_today .date_box{height: 100%}
.section_today .date_box .t_date{position:absolute; left:20px; top:400px; z-index: 100; font-size: 300px; color:#fff; opacity:1; transform:
translateX(-100%); -webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #fff; transition: 1s;
}
.section_today.active .date_box .t_date {transform: translateX(0%);}
.section_today .date_box .date_count{overflow: hidden; position: relative; display: inline-block; height: 200px; opacity:0; transition: opacity 0.5s 1s;}
.section_today.active .date_box .date_count {opacity: 1;}
.section_today .date_box .date_count:after {clear: both; display: block; content:'';}
.section_today .date_box .date_count .count_box {float: left; animation: count_date 2.8s 1 ease-out both paused;}
.section_today .date_box .date_count .count_box.active {animation-play-state: running;}
.section_today .date_box .date_count .count_box span {display: block; height: 200px; color:#fff; font-size:200px; line-height:1; text-align: center; -webkit-text-fill-color: transparent;
-webkit-text-stroke:6px #fff;}
@keyframes count_date {
0%{
transform: translateY(0px);
}
100%{
transform: translateY(-4800px); /*높이 롤링될 개수 구현값 */
}
}
무엇인 문제일까요 ㅠㅠ?
답변 1
0
안녕하세요! :)
섹션 section_today에 active 클래스가 추가 되면서 opacity 값을 1로 변경해야 나타납니다 :D..
수업을 안들으셨군요..
section_today에 active 클래스를 추가하는 부분을 살펴보세요 :D
그럼 또 다른 궁금증이 생기면 문의주세요 :)
다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요
0
214
1
반응형에 대해 질문이 있습니다 !
0
386
1
날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?
0
389
1
함수가 정의되기 전에 함수 호출
0
360
1
섹션12 보너스 챕터에 관한 질문입니다!
0
479
1
5-3-1 강좌 섹션 질문 합니다.
0
325
1
죄송합니다만 해당 프로젝트를 리엑트로 수정해서 만들어보고있는중에 질문드립니다.
1
485
3
화면 높이 관련 질문 있습니다.
1
442
1
선생님
0
378
1
5-2 vanilla.html 질문합니다.
0
437
1
5-3-2 질문입니다.
1
302
1
5-2 추가 질문이요
0
365
2
5-2 ! 질문이요.
0
272
1
안녕하세요!
0
281
1
질문드립니다.
1
374
2
질문드립니다.
0
1683
3
색션6강 카운트관련 문의드립니다!
0
246
1
섹션5 관련 질문드립니다.
0
274
1
setProperty 를 재활용 하고싶습니다.
0
220
1
IntersectionObserver
0
264
1
offsetheight와 scrollheight
0
402
1
완성된코드를 그대로 가져왔는데 크기가 이상해요
0
438
2
2:56에 10씩 증가시키는건 어떻게 하신건가요?
0
320
1
<script>에 $(function(){})으로 감싸준 이유
0
212
1