172만명의 커뮤니티!! 함께 토론해봐요.
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
section 5의 step1의 index.html입니다. after라는게 main_visual의 '뒤'에 태그를 추가해주는 것이라고 알고 있습니다. 그렇다면 기존의 화면 태그의 space와는 중첩이 되지 않아야하는게 아닌가요? 아래의 코드는 빈태그에 background를 주어서 화면 전체가 검정색 화면이 되는 것이 이해가 되지 않아 질문 남깁니다. .sec_mainvis.active .main_visual:after { background : rgba ( 0 , 0 , 0 , 1 ); transition-delay : 0s ;}
미해결
따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
docker-compose.yml 에 test 컨테이너의 dockerfile: Dockerfile.dev 로 주고 command 를 ["npm", "run", "test"] 라고 줬는데 이러면 test 컨테이너 만들어지는 시점에 (Dockerfile.dev 에 명시된) npm run start 와 (docker-compose.yml 에 명시된) npm run test 가 같이 실행이 되는건가요? 아니면 npm run test 만 실행이 되는건가요?
미해결
인터랙티브 웹 개발 제대로 시작하기
그대로 따라 했는데 작동이 안되고 에러도 안떠서 막막했습니다.. 그래서 초반에 (function(){ })작성한거를 지우고 실행해 보았습니다. 그제서야 멀쩡이 이벤트가 작동되었습니다. (function(){ })이게 어떤 역할을 하는지 알 수 있을까요?
미해결
언리얼 엔진4 (Unreal Engine) 3D 횡스크롤 게임 만들기
안녕하세요 궁금한게 있어서 문의 드립니다😀 Launch Character 노드를 추가하기 전에도 몬스터가 죽으면 몬스터에게 붙어 있는 Collision 들을 No Collision으로 비활성화 하도록 스크립팅 되어 있던 상태였잖아요! 그러면 몬스터가 죽으면 Collision이 꺼지는건 마찬가지니까 Launch Character 를 추가하기 전에도 몬스터가 죽으면 Collision이 꺼져 땅을 뚫고 중력에 의해 떨어졌어야 했었을 것 같은데 왜 그 전까지는 몬스터가 죽어서 Collision 들이 No Collision으로 비활성화 되어도 사망 애니메션 후 땅에 누워있고, 땅을 뚫고 떨어지지 않았었는지 의문점이 생겨서 질문 드립니다! 근데 갑자기 오늘 수업에서 Launch Character 노드 추가하니깐 Collision 들이 No Collision으로 비활성화 되서 죽으면 땅을 뚫고 떨어지게 되는지 이해가 안되서요 ㅠ ㅜ 감사합니다
해결됨
[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part7: MMO 컨텐츠 구현 (Unity + C# 서버 연동 기초)
안녕하세요 Arrow의 Update에서 궁금한점이 있어서 문의드립니다. Arrow.cs에서 LeaveGame을 처리할 때 Push함수를 사용하도록 변경을 했는데 Arrow의 부모클래스인 Projectile의 Update 실행을 GameRoom의 Update 함수내에서 projectile.Update(); 의 호출로 실행해주고 있기 때문에 이미 Push가 Job으로 관리되고 있을것 같습니다. 그렇다면 혹시 Room.Push(Room.LeaveGame, Id); 부분도 Room.LeaveGame(Id); 로 사용해도 되는건지 궁금합니다~! public override void Update() { if (Data == null || Data.projectile == null || Owner == null || Room == null) return; if (_nextMoveTick >= Environment.TickCount64) return; long tick = (long)(1000/Data.projectile.speed); _nextMoveTick = Environment.TickCount64 + tick; Vector2Int destPos = GetFrontCellPos(); if (Room.Map.CanGo(destPos)) { CellPos = destPos; S_Move movePacket = new S_Move(); movePacket.ObjectId = Id; movePacket.PosInfo = PosInfo; Room.Broadcast(movePacket); Console.WriteLine("Move Arrow"); } else { GameObject target = Room.Map.Find(destPos); if (target != null) { target.OnDamaged(this, Data.damage + Owner.Stat.Attack); } //소멸 Room.Push(Room.LeaveGame, Id); }
해결됨
[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part7: MMO 컨텐츠 구현 (Unity + C# 서버 연동 기초)
안녕하세요 HandleSkill함수는 PacketHandler.cs에서 room.Push(room.HandleSkill, player, skillPacket);에 의해서 호출되고 있는것 같습니다. 그렇다면 HandleSkill함수에 포함된 Push(EnterGame, arrow); 는 이미 Job으로 관리되고 있기 떄문에, (기존의 방식대로) EnterGame(arrow); 로 호출해도 되는건지 궁금합니다~ public void HandleSkill(Player player, C_Skill skillPacket) { if (player == null) return; ObjectInfo info = player.Info; if (info.PosInfo.State != CreatureState.Idle) return; // TODO : 스킬 사용 가능 여부 체크 info.PosInfo.State = CreatureState.Skill; S_Skill skill = new S_Skill() { Info = new SkillInfo() }; skill.ObjectId = info.ObjectId; skill.Info.SkillId = skillPacket.Info.SkillId; Broadcast(skill); Data.Skill skillData = null; if (DataManager.SkillDict.TryGetValue(skillPacket.Info.SkillId, out skillData) == false) return; switch (skillData.skillType) { case SkillType.SkillAuto: { Vector2Int skillPos = player.GetFrontCellPos(info.PosInfo.MoveDir); GameObject target = Map.Find(skillPos); if (target != null) { Console.WriteLine("Hit GameObject !"); } } break; case SkillType.SkillProjectile: { Arrow arrow = ObjectManager.Instance.Add<Arrow>(); if (arrow == null) return; arrow.Owner = player; arrow.Data = skillData; arrow.PosInfo.State = CreatureState.Moving; arrow.PosInfo.MoveDir = player.PosInfo.MoveDir; arrow.PosInfo.PosX = player.PosInfo.PosX; arrow.PosInfo.PosY = player.PosInfo.PosY; arrow.Speed = skillData.projectile.speed; Push(EnterGame, arrow); } break; } }
미해결
[리뉴얼] React로 NodeBird SNS 만들기
next는 module.css 따로 서버사이드렌더링 해주어야하나요?? 검색하고는 있는데 잘 안 찾아지네요.
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
ggang_lesson.section4,step3.index.html의 css에 질문이 있습니다. motion_moon과 motion_moon.active에서 visibility와 opacity 는 동일한 특성을 나타내는것 같은데. 왜 이렇게 사용하신건지 궁금해서 질문남깁니다. opacity만 사용할 경우 달 사진이 부드럽게 사라지지 않는 것은 확인하였는데, visibility만 사용할 경우는 opacity와 같이 사용하는 경우와 동일한거 같습니다. 두개를 다 기입해야하는 이유가 무엇인가요?
미해결
[구버전] 웹 애플리케이션 개발을 위한 IntelliJ IDEA 설정 (2020 ver.)
영상보고 인텔리제이 설치 했는데요.. 새로운 프로젝트 생성시 오른쪽 Addition Libraries and Frameworks에 Groovy,코틀린,SQL서포트 세가지 선택만 뜨고 라이브러리 없음 이라고 아무것도 뜨지 않는데 어떻게 해야할까요 ㅠㅠ
미해결
화이트해커가 되기 위한 8가지 웹 해킹 기술
IP할당 관련으로 첫번째 방법은 이상하게 나와요 eth1 과 eth0이 나와 야하는 데 전 eth0 이 두개 가 나와서 안될거 같아요.. 그래서 2번째 방법으로 할건데 VI나 gedit 좀 다운로드좀 하게 좀 링크좀요...............
미해결
화이트해커가 되기 위한 8가지 웹 해킹 기술
기본적으로 메모리가 2048mb라고 되어있잖아요... 그럼 그및 애를들어 1048또는 1548은 안돼나요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
// action creator const changeNickname = ( data ) => { return { type : 'CHANGE_NICKNAME' , data , } } 이런식으로 data가 마지막 프로퍼티인데 끝에 ','를 붙이시는데 안붙이는거랑 붙이는거랑 어떤 차이가 있나요?
미해결
스크래치 3.0 - 입문부터 실전 게임 개발까지
이미지는 어디서 구했나요?
미해결
인터랙티브 웹 개발 제대로 시작하기
선생님 추석 잘 보내고 계신지요?? 오늘 객체4를 공부하다가 flex관련 궁금증이 생겼습니다. 강의 객체4에서 card instance를 여러개 생성했는데요, instance는 각각 div tag로 생성되는데, 여기서 div가 원래 block요소의 성질을 가지고 있다는 것 까지는 이해를 했습니다. .card 에서 display: inline-flex; 로 설정해 주셨는데 여기서 좀 헷갈리는 게 있습니다. display를 그냥 flex로 해주니까 card instance들이 가로정렬(main-axis?)이 안되고 block level처럼 세로로 죽 나열이 됩니다. 이게 갑자기 무엇이랑 헷갈렸냐면 "3개의 문" 강의에서는 container인 .stage에 display: flex만 해줘도 각각의 door item들이 div요소로 이루어 졌음에도 가로로 정렬이 되었다는 것이 지금 머릿속에서 명확히 정리가 되지 않습니다. 그래서 선생님 이론 강의 flex 도 찾아봤는데 flex와 inline-flex의 차이를 명확히 이해를 못하겠습니다. 선생님께 도움을 구합니다.
미해결
[라즈베리파이] IoT 딥러닝 Computer Vision 실전 프로젝트
안녕하세요 databaseURL 과 storageBucket 은 앞에다 아이디만 써주면 되나요? 저같은 경우는 firebase_admin.initialize_app(cred, { 'databaseURL': 'https://please-7e966.firebaseio.com/', 'storageBucket': 'please-7e966.appspot.com/' }) 이런식으로 했거든요 이게 맞는지 모르겠네요.. 계속 연동이 안되서요 ㅠㅠ
미해결
따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
혹시 아래 같이 docker-compose up 할 때 에러 보신 분 계신가요? 빌드까지는 되는데 실행할때 에러가 발생하네요..큭 docker-compose.yml # 버전을 항상 지정해줘야 한다. version: "3" # docker compose option services: # 실행하려는 컨테이너 정의 react: # 컨테이너이름 build: # 현재 디렉토리에 있는 Dockerfile 사용 context: . # 도커 이미지를 구성하기 위한 파일과 폴더들이 있는 위치 dockerfile: Dockerfile.dev # 도커 파일 지정 ports: - "3000:3000" # 포트 매핑(호스트포트:컨테이너포트) volumes: # 호스트 머신에 있는 파일 매핑 - /usr/src/app/node_modules # 이건 호스트 디렉토리를 참조히지 않음 - ./:/usr/src/app stdin_open: true # 리액트 앱을 끌 때 필요(버그수정)
미해결
화이트해커가 되기 위한 8가지 웹 해킹 기술
그 책에 있는데로 할려 했는데 예전에 있던거라더고요.. 책에 나와있는그 자체 가 달라요... produsk download가 아니라 produsd a-z 이런식으로요... 범웨어 요즈음 2020거 쫌 알려줘요................. 제발좀요.............
미해결
[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
FileNotFoundError Traceback (most recent call last) <ipython-input-41-928a18d63e66> in <module> 11 print ( ANNO_DIR ) 12 ---> 13 files = os . listdir ( ANNO_DIR ) 14 print ( '파일 개수는:' , len ( files ) ) 15 print ( files ) FileNotFoundError : [WinError 3] 지정된 경로를 찾을 수 없습니다: 'C:\\Users\\admin\\DLCV/data/raccoon/annotations' HOME_DIR = str(Path.home()) HOME_DIR = str('/Users/admin/Desktop/') 으로 바꿔서 불러왔는데 xml_to_csv 과정에서 다시 /Users/admin/Desktop\DLCV/data/raccoon/images\raccoon-1.jpg 경로 중간에 \로 아어집니다. /Users/admin/Desktop/DLCV/Detection/yolo/keras-yolo3\\model_data/raccoon_class.txt' 라쿤 클래스 텍스트 불러올 때도 다시 \ 로 이어집니다..
미해결
애플 웹사이트 인터랙션 클론!
안녕하세요 선생님. 강의 너무 유용하고 재밌게 듣고 있습니다. 자꾸 오류가 뜨는데 무슨 문젠지 모르겠어서 너무 답답해서 질문 남깁니다.ㅠㅠ opacity가 정의되어 있지 않다그러고 Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas) 이런 오류가 뜨네요.. 분명 캔버스로 잘 정의한 것 같 은데요...ㅠㅠㅠㅠㅠ 분명 선생님을 다 따라 쳤는데도 어디서 문제가 생긴건지 모르겠습니다.. 도와주시면 감사하겠습니다.흑흑 ( () => { let yOffset = 0 ; // window.pageYOffset 대신 쓸 변수 let prevScrollHeight = 0 ; // 현재 스크롤 위치 (yOffset) 보다 이전에 위치한 스크롤 섹션들의 스크롤 높이 합 let currentScene = 0 ; // 현재 활성화 된(눈 앞에 보고 있는) 씬 (scroll-section) let enterNewScene = false ; // 새로운 씬이 시작 된 순간 true const sceneInfo = [ { // 0 type : ' sticky ' , heightNum : 5 , // 브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight : 0 , objs : { container : document . querySelector ( ' #scroll-section-0 ' ) , messageA : document . querySelector ( ' #scroll-section-0 .main-message.a ' ) , messageB : document . querySelector ( ' #scroll-section-0 .main-message.b ' ) , messageC : document . querySelector ( ' #scroll-section-0 .main-message.c ' ) , messageD : document . querySelector ( ' #scroll-section-0 .main-message.d ' ) , canvas : document . querySelector ( ' #video-canvas-0 ' ) , context : document . querySelector ( ' #video-canvas-0 ' ) . getContext ( ' 2d ' ) , videoImages : [] , }, values : { videoImageCount : 300 , imageSequence : [ 0 , 299 ] , canvas_opacity : [ 1 , 0 , { start : 0.8 , end : 1 } ] , messageA_opacity_in : [ 0 , 1 , { start : 0.1 , end : 0.2 } ] , messageB_opacity_in : [ 0 , 1 , { start : 0.3 , end : 0.4 } ] , messageC_opacity_in : [ 0 , 1 , { start : 0.5 , end : 0.6 } ] , messageD_opacity_in : [ 0 , 1 , { start : 0.7 , end : 0.8 } ] , messageA_translateY_in : [ 20 , 0 , { start : 0.1 , end : 0.2 } ] , messageB_translateY_in : [ 20 , 0 , { start : 0.3 , end : 0.4 } ] , messageC_translateY_in : [ 20 , 0 , { start : 0.5 , end : 0.6 } ] , messageD_translateY_in : [ 20 , 0 , { start : 0.7 , end : 0.8 } ] , messageA_opacity_out : [ 1 , 0 , { start : 0.25 , end : 0.3 } ] , messageB_opacity_out : [ 1 , 0 , { start : 0.45 , end : 0.5 } ] , messageC_opacity_out : [ 1 , 0 , { start : 0.65 , end : 0.7 } ] , messageD_opacity_out : [ 1 , 0 , { start : 0.85 , end : 0.9 } ] , messageA_translateY_out : [ 0 , - 20 , { start : 0.25 , end : 0.3 } ] , messageB_translateY_out : [ 0 , - 20 , { start : 0.45 , end : 0.5 } ] , messageC_translateY_out : [ 0 , - 20 , { start : 0.65 , end : 0.7 } ] , messageD_translateY_out : [ 0 , - 20 , { start : 0.85 , end : 0.9 } ] , }, }, // 1 { type : ' normal ' , // heightNum: 5, // type normal에서는 필요없음 scrollHeight : 0 , objs : { container : document . querySelector ( ' #scroll-section-1 ' ) , }, }, // 2 { type : ' sticky ' , heightNum : 5 , // 브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight : 0 , objs : { container : document . querySelector ( ' #scroll-section-2 ' ) , messageA : document . querySelector ( ' #scroll-section-2 .a ' ) , messageB : document . querySelector ( ' #scroll-section-2 .b ' ) , messageC : document . querySelector ( ' #scroll-section-2 .c ' ) , pinB : document . querySelector ( ' #scroll-section-2 .b .pin ' ) , pinC : document . querySelector ( ' #scroll-section-2 .c .pin ' ) , canvas : document . querySelector ( ' #video-canvas-1 ' ) , context : document . querySelector ( ' #video-canvas-1 ' ) . getContext ( ' 2d ' ) , videoImages : [] , }, values : { videoImageCount : 960 , imageSequence : [ 0 , 959 ] , canvas_opacity_in : [ 0 , 1 , { start : 0 , end : 0.1 } ] , canvas_opacity_out : [ 1 , 0 , { start : 0.95 , end : 1 } ] , messageA_translateY_in : [ 20 , 0 , { start : 0.15 , end : 0.2 } ] , messageB_translateY_in : [ 30 , 0 , { start : 0.6 , end : 0.65 } ] , messageC_translateY_in : [ 30 , 0 , { start : 0.87 , end : 0.92 } ] , messageA_opacity_in : [ 0 , 1 , { start : 0.25 , end : 0.3 } ] , messageB_opacity_in : [ 0 , 1 , { start : 0.6 , end : 0.65 } ] , messageC_opacity_in : [ 0 , 1 , { start : 0.87 , end : 0.92 } ] , messageA_translateY_out : [ 0 , - 20 , { start : 0.4 , end : 0.45 } ] , messageB_translateY_out : [ 0 , - 20 , { start : 0.68 , end : 0.73 } ] , messageC_translateY_out : [ 0 , - 20 , { start : 0.95 , end : 1 } ] , messageA_opacity_out : [ 1 , 0 , { start : 0.4 , end : 0.45 } ] , messageB_opacity_out : [ 1 , 0 , { start : 0.68 , end : 0.73 } ] , messageC_opacity_out : [ 1 , 0 , { start : 0.95 , end : 1 } ] , pinB_scaleY : [ 0.5 , 1 , { start : 0.6 , end : 0.65 } ] , pinC_scaleY : [ 0.5 , 1 , { start : 0.87 , end : 0.92 } ] , }, }, // 3 { type : ' sticky ' , heightNum : 5 , // 브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight : 0 , objs : { container : document . querySelector ( ' #scroll-section-3 ' ) , canvasCaption : document . querySelector ( ' .canvas-caption ' ) , }, values : {}, }, ] ; function setCanvasImages () { let imgElem ; for ( let i = 0 ; i < sceneInfo [ 0 ] . values . videoImageCount ; i ++ ) { imgElem = new Image () ; // imgElem = document.createElement('img'); imgElem . src = ` ./video/001/IMG_ ${ 6726 + i } .JPG ` ; sceneInfo [ 0 ] . objs . videoImages . push ( imgElem ) ; } let imgElem2 ; for ( let i = 0 ; i < sceneInfo [ 0 ] . values . videoImageCount ; i ++ ) { imgElem2 = new Image () ; // imgElem = document.createElement('img'); imgElem2 . src = ` ./video/002/IMG_ ${ 7027 + i } .JPG ` ; sceneInfo [ 2 ] . objs . videoImages . push ( imgElem2 ) ; } } function setLayout () { // 각 스크롤 섹션의 높이 세팅 for ( let i = 0 ; i < sceneInfo . length ; i ++ ) { if ( sceneInfo [ i ] . type === ' sticky ' ) { sceneInfo [ i ] . scrollHeight = sceneInfo [ i ] . heightNum * window . innerHeight ; } else if ( sceneInfo [ i ] . type === ' normal ' ) { sceneInfo [ i ] . scrollHeight = sceneInfo [ i ] . objs . container . offsetHeight ; } sceneInfo [ i ] . objs . container . style . height = `${ sceneInfo[i] . scrollHeight } px ` ; } yOffset = window . pageYOffset ; let totalScrollHeight = 0 ; for ( let i = 0 ; i < sceneInfo . length ; i ++ ) { // 새로고침 해도 씬이 고정되게 세팅 totalScrollHeight += sceneInfo [ i ] . scrollHeight ; if ( totalScrollHeight >= yOffset ) { currentScene = i ; break ; } } document . body . setAttribute ( ' id ' , ` show-scene- ${ currentScene }` ) ; const heightRatio = window . innerHeight / 1000 ; // 캔버스 원래 height = 1000 sceneInfo [ 0 ] . objs . canvas . style . transform = ` scale( ${ heightRatio } ) translate(-50%,-50%) ` ; sceneInfo [ 2 ] . objs . canvas . style . transform = ` scale( ${ heightRatio } ) translate(-50%,-50%) ` ; } function calcValues ( values , currentYOffset ) { let rv ; // 현재 씬(스크롤섹션)에서 스크롤 된 범위를 0~1 사이의 비율로 구하기 const scrollHeight = sceneInfo [ currentScene ] . scrollHeight ; const scrollRatio = currentYOffset / scrollHeight ; if ( values . length === 3 ) { // start ~ end 사이에 애니메이션 실행 const partScrollStart = values [ 2 ] . start * scrollHeight ; const partScrollEnd = values [ 2 ] . end * scrollHeight ; const partScrollHeight = partScrollEnd - partScrollStart ; if ( currentYOffset >= partScrollStart && currentYOffset <= partScrollEnd ) { rv = (( currentYOffset - partScrollStart ) / partScrollHeight ) * ( values [ 1 ] - values [ 0 ]) + values [ 0 ] ; } else if ( currentYOffset < partScrollStart ) { rv = values [ 0 ] ; } else if ( currentYOffset > partScrollEnd ) { rv = values [ 1 ] ; } } else { rv = scrollRatio * ( values [ 1 ] - values [ 0 ]) + values [ 0 ] ; } return rv ; } function playAnimation () { const objs = sceneInfo [ currentScene ] . objs ; const values = sceneInfo [ currentScene ] . values ; const currentYOffset = yOffset - prevScrollHeight ; // 현재 씬에서 얼만큼 스크롤했는지를 확인 const scrollHeight = sceneInfo [ currentScene ] . scrollHeight ; const scrollRatio = currentYOffset / scrollHeight ; switch ( currentScene ) { case 0 : let sequence = Math . round ( calcValues ( values . imageSequence , currentYOffset ) ) ; objs . context . drawImage ( objs . videoImages [ sequence ] , 0 , 0 ) ; objs . canvas . style . opacity = calcValues ( values . canvas_opacity , currentYOffset ) ; if ( scrollRatio <= 0.22 ) { // in objs . messageA . style . opacity = calcValues ( values . messageA_opacity_in , currentYOffset ) ; objs . messageA . style . transform = ` translate3d(0, ${ calcValues ( values . messageA_translateY_in , currentYOffset ) } %, 0) ` ; } else { // out objs . messageA . style . opacity = calcValues ( values . messageA_opacity_out , currentYOffset ) ; objs . messageA . style . transform = ` translate3d(0, ${ calcValues ( values . messageA_translateY_out , currentYOffset ) } %, 0) ` ; } if ( scrollRatio <= 0.42 ) { // in objs . messageB . style . opacity = calcValues ( values . messageB_opacity_in , currentYOffset ) ; objs . messageB . style . transform = ` translate3d(0, ${ calcValues ( values . messageB_translateY_in , currentYOffset ) } %, 0) ` ; } else { // out objs . messageB . style . opacity = calcValues ( values . messageB_opacity_out , currentYOffset ) ; objs . messageB . style . transform = ` translate3d(0, ${ calcValues ( values . messageB_translateY_out , currentYOffset ) } %, 0) ` ; } if ( scrollRatio <= 0.62 ) { // in objs . messageC . style . opacity = calcValues ( values . messageC_opacity_in , currentYOffset ) ; objs . messageC . style . transform = ` translate3d(0, ${ calcValues ( values . messageC_translateY_in , currentYOffset ) } %, 0) ` ; } else { // out objs . messageC . style . opacity = calcValues ( values . messageC_opacity_out , currentYOffset ) ; objs . messageC . style . transform = ` translate3d(0, ${ calcValues ( values . messageC_translateY_out , currentYOffset ) } %, 0) ` ; } if ( scrollRatio <= 0.82 ) { // in objs . messageD . style . opacity = calcValues ( values . messageD_opacity_in , currentYOffset ) ; objs . messageD . style . transform = ` translate3d(0, ${ calcValues ( values . messageD_translateY_in , currentYOffset ) } %, 0) ` ; } else { // out objs . messageD . style . opacity = calcValues ( values . messageD_opacity_out , currentYOffset ) ; objs . messageD . style . transform = ` translate3d(0, ${ calcValues ( values . messageD_translateY_out , currentYOffset ) } %, 0) ` ; } break ; case 2 : let sequence2 = Math . round ( calcValues ( values . imageSequence , currentYOffset ) ) ; objs . context . drawImage ( objs . videoImages [ sequence2 ] , 0 , 0 ) ; if ( scrollRatio <= 0.5 ) { // in objs . context . style . opacity = calcValues ( values . canvas_opacity_in , currentYOffset ) ; } else { // out objs . context . style . opacity = calcValues ( values . canvas_opacity_out , currentYOffset ) ; } if ( scrollRatio <= 0.32 ) { // in objs . messageA . style . opacity = calcValues ( values . messageA_opacity_in , currentYOffset ) ; objs . messageA . style . transform = ` translate3d(0, ${ calcValues ( values . messageA_translateY_in , currentYOffset ) } %, 0) ` ; } else { // out objs . messageA . style . opacity = calcValues ( values . messageA_opacity_out , currentYOffset ) ; objs . messageA . style . transform = ` translate3d(0, ${ calcValues ( values . messageA_translateY_out , currentYOffset ) } %, 0) ` ; } if ( scrollRatio <= 0.67 ) { // in objs . messageB . style . transform = ` translate3d(0, ${ calcValues ( values . messageB_translateY_in , currentYOffset ) } %, 0) ` ; objs . messageB . style . opacity = calcValues ( values . messageB_opacity_in , currentYOffset ) ; objs . pinB . style . transform = ` scaleY( ${ calcValues ( values . pinB_scaleY , currentYOffset ) } ) ` ; } else { // out objs . messageB . style . transform = ` translate3d(0, ${ calcValues ( values . messageB_translateY_out , currentYOffset ) } %, 0) ` ; objs . messageB . style . opacity = calcValues ( values . messageB_opacity_out , currentYOffset ) ; objs . pinB . style . transform = ` scaleY( ${ calcValues ( values . pinB_scaleY , currentYOffset ) } ) ` ; } if ( scrollRatio <= 0.93 ) { // in objs . messageC . style . transform = ` translate3d(0, ${ calcValues ( values . messageC_translateY_in , currentYOffset ) } %, 0) ` ; objs . messageC . style . opacity = calcValues ( values . messageC_opacity_in , currentYOffset ) ; objs . pinC . style . transform = ` scaleY( ${ calcValues ( values . pinC_scaleY , currentYOffset ) } ) ` ; } else { // out objs . messageC . style . transform = ` translate3d(0, ${ calcValues ( values . messageC_translateY_out , currentYOffset ) } %, 0) ` ; objs . messageC . style . opacity = calcValues ( values . messageC_opacity_out , currentYOffset ) ; objs . pinC . style . transform = ` scaleY( ${ calcValues ( values . pinC_scaleY , currentYOffset ) } ) ` ; } break ; case 3 : break ; } } function scrollLoop () { enterNewScene = false ; prevScrollHeight = 0 ; for ( let i = 0 ; i < currentScene ; i ++ ) { prevScrollHeight += sceneInfo [ i ] . scrollHeight ; } if ( yOffset > prevScrollHeight + sceneInfo [ currentScene ] . scrollHeight ) { enterNewScene = true ; currentScene ++; document . body . setAttribute ( ' id ' , ` show-scene- ${ currentScene }` ) ; } if ( yOffset < prevScrollHeight ) { enterNewScene = true ; if ( currentScene === 0 ) return ; // 브라우저 바운스 효과로 인해 마이너스가 되는 것을 방지 (모바일) currentScene --; document . body . setAttribute ( ' id ' , ` show-scene- ${ currentScene }` ) ; } if ( enterNewScene ) return ; playAnimation () ; } // window.addEventListener('DOMcontentLoaded', setLayout) // 이미지가 업로드 되기 전에 실행 window . addEventListener ( ' scroll ' , () => { yOffset = window . pageYOffset ; scrollLoop () ; } ) ; window . addEventListener ( ' load ' , () => { setLayout () ; sceneInfo [ 0 ] . objs . context . drawImage ( sceneInfo [ 0 ] . objs . videoImages [ 0 ] , 0 , 0 ) ; } ) ; window . addEventListener ( ' resize ' , setLayout ) ; setCanvasImages () ; } )() ;
따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
삭제된 글입니다
