미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
무엇이문제인가 텍스트날짜
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 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>
</html>용해주세요.
.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); /*높이 롤링될 개수 구현값 */ }}무엇인 문제일까요 ㅠㅠ?