12%
38,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
네비게이션 바를 보이게 하고싶은데요
제가 노란색으로 칠한 부분에 네비게이션 바를 보이게 하고 싶습니다. 코드를 짯는데 보니까 저 커버 이미지에 가려서 보이지 않아요 여기서 어떤 부분을 고쳐야 이미지 아래에 고정돼서 수평네비바가 보일 수 있을까요..??ㅜㅜ <!DOCTYPE html> <html> <head> <title>page2</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style> body{ overflow-x: hidden; margin:0; padding:0; } /* 타이틀 헤더 */ section.titleWrap{ position: fixed; height: 800px; width:100%; top:0; left:0; } h1{ position: absolute; color:#eee; text-align:center; padding-top:320px; width: 100%; font-size: 100px; z-index: 1; } .cover{ position: fixed; width: 100%; height: 800px; background-color: rgba(0,0,0,1); } .coverImg{ position: fixed; width: 100%; height: 800px; background:url(img/ba.jpg) center center / cover no-repeat; } /* 본문영역 */ section.textWrap{ position: relative; width: 100%; margin-top: 800px; padding-top:100px; background-color: #fff; z-index: 1; } .innerWrap{ width: 80%; margin: 0 auto; } p{ color :#111; font-size : 15px; line-height: 28px; margin-bottom: 80px; } * { box-sizing: border-box; } /* Style the header */ .header { background-color: #f1f1f1; padding: 20px; text-align: center; } .topnav { overflow: hidden; background-color: #333; z-index: 100; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; z-index: 100; } .topnav a:hover { background-color: #ddd; color: black; z-index: 100; } li {display: inline;} </style> <script> let scrollTop =0; let h1; let coverImg; let cover; let bar; let panWrap; window.onload =function(){ h1= document.getElementsByTagName("h1")[0]; coverImg= document.getElementsByClassName("coverImg")[0]; cover= document.getElementsByClassName("cover")[0]; cover.style.opacity = .3; // bar= document.getElementsByClassName("bar")[0]; // panWrap = document.getElementsByClassName("panWrap")[0]; } window.addEventListener("scroll",function(e){ scrollTop =document.documentElement.scrollTop; h1.style.transform = "translate(0,"+ -scrollTop/10 +"px)"; // let per =Math.ceil(scrollTop / (document.body.scrollHeight - window.outerHeight)*100); coverImg.style.transform = "scale("+ (1 + scrollTop/1000) +")"; cover.style.opacity = .3 + scrollTop / 1000; //console.log(per); // bar.style.height = per +"%"; // panWrap.style.transform = "translate(0, " + scrollTop / 1.2 +"px)"; }); </script> </head> <body> <section class="titleWrap"> <div class="coverImg"></div> <div class="cover"> </div> <div class="topnav"> <a href="www.naver.com">Player</a> <a href="#">Weapon</a> <a href="#">추천추천</a> <a href="file:///C:/Users/%EA%B9%80%EC%86%8C2/Desktop/%EB%8D%B0%EC%9E%87%EA%B1%B8%EC%A6%88/%EB%8D%B0%EB%AA%A8%EB%8D%B0%EC%9D%B4/webpage_bg5/webpage_bg5/About5.html">team 5</a> </div> <h1>2번 페이지</h1> </section> <section class="textWrap"> <div class="innerWrap"> <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴? 너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다. 품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라. </p> <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴? 너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다. 품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라. </p> <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴? 너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다. 품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라. </p> <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴? 너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다. 품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라. </p> <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴? 너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다. 품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라. </p> <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴? 너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다. 품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라. </p> <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴? 너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다. 품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라. </p> <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴? 너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다. 품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라. </p> </div> </section> </body> </html>
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
죄송한데 질문좀 드릴게요 ㅠ
x y 전역변수 0으로 초기화 해야 작동이 되는 이유가 궁금합니다. 숫자 값이 있어야 리 퀘스트 프레임이 작동되는 건가요?ㅠ 아그리고 이벤트리스너는 클라이언트만 가져오는 역할을 하는건가요? 마우스무브는 리스너에 있는데 루프함수에서 작동되는 원리를 몰라서요 ㅠ 초보라 .. 죄송합니다..
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
배경 이미지를 화면보다 크게 만들었는데 이상해요..!
(새로운 질문으로 다시 달았어용) 배경 이미지를 화면보다 크게 만들었더니 이렇게 되었어요 ㅠㅜ.bg {width:150%} 에요
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
마우스를 따라오지 않아요 ㅠㅠ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ background: #000; } h1{ color: #fff; } .box{position: absolute; background: red; top: 100px; left: 0; width: 100px; height: 100px;} </style> </head> <body> <script> window.onload = () => { let h1 = document.getElementById("h1") let boxx = document.getElementsByClassName("box") window.addEventListener('mousemove', mouseFunc, false) function mouseFunc(e) { h1.innerHTML=`X : ${e.clientX}, Y : ${e.clientY}` boxx.style.transform =`translate(${e.clientX}px, ${e.clientY}px)` } } </script> <h1 id="h1">test</h1> <div class="box"></div> </body> </html>
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
강의내용 관련 질문
안녕하세요! 좋은 강의 감사합니다 :) 다름 아니라 혹시 resize관련 내용도 이 강의에 있나요? 마지막 강의때 resize와 mousemove그리고 scroll 이벤트 응용한 코드 브리핑해주셨는데 강의 내용중에 resize 내용이 없는거 같아서요.. 제가 못찾은 걸까요? ㅜㅜ
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
blend-mode 스크립트 예제 질문
안녕하세요 :) 예제 보면서 따라해보고 있는데 한가지 궁금한게 있어서요! 혹시 버튼에 over 될때 scale이 변할때. mix-blend-mode 속성을 유지 할 수 있는 방법이 있을까요? 선생님 예제 따라하다보니 mouseover할때 색상이 좀 변하는 거 같아서 css hover시 background:white 없애고 transition 타임을 좀 느리게 설정하니까 scale 할때 mix-blend-mode속성이 안먹는게 보이더라구요 ㅜㅜ 혹시 이 부분을 해결할 수 있는 방법이 있을까요? http://irene080.dothome.co.kr/inflearn/mouse_YesOrNo.html (제가 작업한 예제 웹사이트 입니다, 참고부탁드릴게요!)
- 몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
안녕하세요 질문 드립니다.
삭제된 글입니다
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
안녕하세요 질문 남깁니다.
개인 포트폴리오를 만들 때 해당 기능을 구현해보려고 시도했습니다. 동작이 잘 되는데 이상하게 스크롤을 내린 후cursorPointer가 제가 스크롤을 내리기 전 위치에서 커서를 따라오지 않고 있더라구요 코드에 이상이 있는걸까요? 확인해주시면 감사하겠습니다! let cursorPointer; let x = 0; let y = 0; let mx = 0; let my = 0; let speed = 0.1; window.onload = function () { cursorPointer = document.getElementsByClassName("cursor-pointer")[0]; window.addEventListener("mousemove", mouseFunc); function mouseFunc(e) { x = e.clientX; y = e.clientY; } loop(); } function loop() { mx += (x - mx) * speed; my += (y - my) * speed; cursorPointer.style.transform = "translate("+ mx +"px,"+ my +"px)"; window.requestAnimationFrame(loop); } // css .cursor-pointer { position: absolute; width: 50px; height: 50px; top: 0px; left: 0px; border-radius: 50%; background-color : rgba(211, 17, 69,0.6); }
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
예제로 해주신 js 소스 다 들어있는 파일 부탁드립니다
예제로 해주신 js 소스 다 들어있는 파일 부탁드립니다
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
예제로 보여주신 사이트들 url 모두 부탁드립니다:-)
예제로 보여주신 사이트들 url 모두 부탁드립니다:-)
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
패럴렉스
강사님 안녕하세요~! 패럴렉스 효과로 cloudWrap.style.transform = "translateY(" + scrollTop / 2 + "px)"; 주자마자, 전체 스크롤높이가 전보다 길어지고, 로딩바도 progress를 넘어서 계속 늘어나는데 해결방법이 있을까요?ㅠ
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
강사님 구름 이미지
강사님 안녕하세요:-) 구름 이미지 저도 따라서 코드 만들어보고 싶은데, 혹시 이번 실습 관련 파일은 따로 다운 받는 게 없는 건가욤?
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
예제파일
강의에서 예제파일보자고 하셨는데 어떻게 받나요?
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
픽스낫띵 핵심기능구현 문의요
핵심기능구현인데 왜 여자만 움직이고 3d text 구현은 빠져있는건가요?? 이거 과장 광고 아닌가요?? 강의소개에는 텍스트함께 움직이는거로 봤어요;;; 마우스로 다 하는거다 이러면 끝인가요;;;
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
에러가 나요~index.html:143 Uncaught TypeError: Cannot read property 'style' of undefined
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { overflow-x: hidden; } * { box-sizing: border-box; margin: 0; padding: 0; } section.title_wrap{ position:fixed; height:800px; width:100%; top:0; left:0; } .coverImg{ position:absolute; width:100%; height:100%; background: url(img/back.jpg) center center/cover no-repeat; } .cover { position:absolute; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.123); } h1 { position:absolute; color:#eee; text-align:center; padding-top:320px; font-size:50px; width:100%; } section.textwrap{ position:relative; width:100%; margin-top:800px; background-color:#fff; padding:100px; } p { color:#111; font-size:15px; margin-bottom:80px; line-height: 1.9; } </style> </head> <body> <section class="title_wrap"> <div class="coverImg"></div> <div class="cover"></div> <h1>title</h1> </section> <section class="textwrap"> <div class="inner_wrap"> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis vero consequatur dolore maiores possimus, dolores, deserunt mollitia impedit at labore quisquam odit cumque! Rerum sapiente in quo consectetur voluptas, quod perspiciatis! Incidunt quae suscipit dolorum quaerat enim, at quas modi eius corrupti explicabo. Ratione voluptatum tenetur voluptates quasi suscipit distinctio voluptate iusto incidunt? Libero eveniet ipsum aperiam. Repellat ipsa ratione laborum ipsum explicabo placeat! Sapiente itaque totam ad inventore veritatis explicabo expedita placeat, officiis repellendus! Illum, asperiores impedit. Similique excepturi ipsam omnis rerum fugit dicta facere quisquam distinctio consequuntur, aut sit voluptatem consectetur corporis quod nesciunt unde mollitia illo doloremque harum. Natus unde accusamus dignissimos ducimus corrupti tempore veritatis mollitia fugiat, impedit voluptates minus est? Debitis, maxime? Magni exercitationem atque iure, sunt quam suscipit eum consequuntur ullam unde ipsum maxime commodi praesentium cum rem esse rerum maiores in dignissimos magnam earum dolorum odit, perspiciatis velit. Voluptatem iure vitae obcaecati et ad voluptatibus hic, perspiciatis quaerat fuga ab nulla dicta unde, placeat nisi exercitationem, repellat commodi provident asperiores. Ex, porro, ab neque repudiandae autem officiis pariatur cumque eius blanditiis minus qui, obcaecati incidunt nesciunt earum eveniet nam distinctio accusantium rerum possimus nihil facilis? Voluptatem nobis id mollitia, modi molestias itaque autem. </p> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis vero consequatur dolore maiores possimus, dolores, deserunt mollitia impedit at labore quisquam odit cumque! Rerum sapiente in quo consectetur voluptas, quod perspiciatis! Incidunt quae suscipit dolorum quaerat enim, at quas modi eius corrupti explicabo. Ratione voluptatum tenetur voluptates quasi suscipit distinctio voluptate iusto incidunt? Libero eveniet ipsum aperiam. Repellat ipsa ratione laborum ipsum explicabo placeat! Sapiente itaque totam ad inventore veritatis explicabo expedita placeat, officiis repellendus! Illum, asperiores impedit. Similique excepturi ipsam omnis rerum fugit dicta facere quisquam distinctio consequuntur, aut sit voluptatem consectetur corporis quod nesciunt unde mollitia illo doloremque harum. Natus unde accusamus dignissimos ducimus corrupti tempore veritatis mollitia fugiat, impedit voluptates minus est? Debitis, maxime? Magni exercitationem atque iure, sunt quam suscipit eum consequuntur ullam unde ipsum maxime commodi praesentium cum rem esse rerum maiores in dignissimos magnam earum dolorum odit, perspiciatis velit. Voluptatem iure vitae obcaecati et ad voluptatibus hic, perspiciatis quaerat fuga ab nulla dicta unde, placeat nisi exercitationem, repellat commodi provident asperiores. Ex, porro, ab neque repudiandae autem officiis pariatur cumque eius blanditiis minus qui, obcaecati incidunt nesciunt earum eveniet nam distinctio accusantium rerum possimus nihil facilis? Voluptatem nobis id mollitia, modi molestias itaque autem. </p> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis vero consequatur dolore maiores possimus, dolores, deserunt mollitia impedit at labore quisquam odit cumque! Rerum sapiente in quo consectetur voluptas, quod perspiciatis! Incidunt quae suscipit dolorum quaerat enim, at quas modi eius corrupti explicabo. Ratione voluptatum tenetur voluptates quasi suscipit distinctio voluptate iusto incidunt? Libero eveniet ipsum aperiam. Repellat ipsa ratione laborum ipsum explicabo placeat! Sapiente itaque totam ad inventore veritatis explicabo expedita placeat, officiis repellendus! Illum, asperiores impedit. Similique excepturi ipsam omnis rerum fugit dicta facere quisquam distinctio consequuntur, aut sit voluptatem consectetur corporis quod nesciunt unde mollitia illo doloremque harum. Natus unde accusamus dignissimos ducimus corrupti tempore veritatis mollitia fugiat, impedit voluptates minus est? Debitis, maxime? Magni exercitationem atque iure, sunt quam suscipit eum consequuntur ullam unde ipsum maxime commodi praesentium cum rem esse rerum maiores in dignissimos magnam earum dolorum odit, perspiciatis velit. Voluptatem iure vitae obcaecati et ad voluptatibus hic, perspiciatis quaerat fuga ab nulla dicta unde, placeat nisi exercitationem, repellat commodi provident asperiores. Ex, porro, ab neque repudiandae autem officiis pariatur cumque eius blanditiis minus qui, obcaecati incidunt nesciunt earum eveniet nam distinctio accusantium rerum possimus nihil facilis? Voluptatem nobis id mollitia, modi molestias itaque autem. </p> </div> </section> <script> let scrollTop =0; let coverImg; let cover; window.onload = function(){ coverImg = document.getElementsByClassName('coverImg')[0]; cover = document.getElementsByClassName('cover')[0]; cover.style.opacity= .3; } window.addEventListener("scroll",function(e){ scrollTop = document.documentElement.scrollTop; coverImg.style.backgroundPosition = "center top"; }) </script> </body> </html>
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
mousemove 값 활용에서 질문 드려요!
window.addEventListener("mousemove",mouseFunc,false); 에서 false값은 왜 넣어주는지 궁금해서요. true로 변경해도 잘 되더라구요. 궁금해서 질문드려요!
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
video 자동재생
안녕하세요~ 강의를 따라하는 도중 동영상 자동재생이 되지 않아서 찾아보니 태그 안에 muted=""를 추가하니 재생이 잘 됩니다! 크롬은 자동재생을 하려면 뮤트를 추가해야 한다는데 같은 크롬 브라우저를 사용하시는것 같은데 설정을 다르게 하신부분이 있을까요?
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
mouse move 여기서 오류가생긴거같타요
안녕하세요 mouse move 오류가생긴거같타요 오른쪽보면 처음에 잘되던데요 제가 뭐 잘못건드린거같은데 다시 해봐도 안전하지 않은 SameSite = 쿠키 없음 이런게 뜨던데