무엇이문제인가 텍스트날짜
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 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 : 100 vh ; } . section_today . date_box { height : 100 %} . section_today . date_box . t_date { position : absolute ; left : 20 px ; top : 400 px ; z-index : 100 ; font-size : 300 px ; color : #fff ; opacity : 1 ; transform : translateX (- 100 %) ; -webkit-transform : translateX (- 100 %) ; -moz-transform : translateX (- 100 %) ; -webkit-text-fill-color : transparent ; -webkit-text-stroke : 2 px #fff ; transition : 1 s ; } . section_today . active . date_box . t_date { transform : translateX ( 0 %) ; } . section_today . date_box . date_count { overflow : hidden ; position : relative ; display : inline-block ; height : 200 px ; opacity : 0 ; transition : opacity 0.5 s 1 s ; } . 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.8 s 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 : 200 px ; color : #fff ; font-size : 200 px ; line-height : 1 ; text-align : center ; -webkit-text-fill-color : transparent ; -webkit-text-stroke : 6 px #fff ; } @keyframes count_date { 0% { transform : translateY ( 0 px ) ; } 100% { transform : translateY (- 4800 px ) ; /* 높이 롤링될 개수 구현값 */ } } 무엇인 문제일까요 ㅠㅠ?
- 텍스트날짜효과
- jquery
- HTML/CSS
- 인터랙티브-웹
- javascript