소개
게시글
질문&답변
2020.12.02
네비게이션 바를 보이게 하고싶은데요
네~! 감사합니다.
- 0
- 11
- 187
질문&답변
2020.12.02
네비게이션 바를 보이게 하고싶은데요
넵 감사합니다! 잘 해결 됐어요!!
- 0
- 11
- 187
질문&답변
2020.12.01
네비게이션 바를 보이게 하고싶은데요
topnav a에 zindex 빼고 topnav 에 zindex를 1000으로 줬는데 처음에 페이지 켰을때만 상단바 뒤로 잘 가고 다른 페이지로 넘어갔다가 돌아오면 다시 이미지가 상단바 위로 가서 상단바가 안눌리는데 이건 어떻게 제어하나요... ??
- 0
- 11
- 187
질문&답변
2020.12.01
네비게이션 바를 보이게 하고싶은데요
@@질문있씁니다.@@ 지금 여기서 그림이 상단바까지 올라와서 네비게이션 바가 잘 안눌리는것 같습니다 >1. 원래 이미지가 네비게이션 바까지 침범하면 안눌리나요? > 2. 그래서 이미지들을 양옆으로만 움직이게 하고싶은데 y값을 삭제해도 적용이 안돼요 ㅜㅜ
- 0
- 11
- 187
질문&답변
2020.12.01
네비게이션 바를 보이게 하고싶은데요
DOCTYPE html > html > head > title > 배틀그라운드연구소 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 > * { 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 ; position : relative ; } .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 ;} /* 상단 바 끝 */ body { position : relative ; background-color : black ; /* cursor: none; */ overflow : hidden ; margin : 0 ; } h1 { color : #fff ; } /* .cursor_item{ position: absolute; width: 300px; height: 300px; background-color: red; top:0; left:0; margin: -50px 0 0 -50px; transition: all 500ms cubic-bezier(0.930, 0.005, 0.040, 1.005); } */ /* button:hover{ background: red; color: #fff; font-size: 80px; padding : 80px 150px; } */ .human { position : absolute ; width : 500px ; left : calc ( 50% - 150px ) ; /*사진 가운데로*/ z-index : 100 ; /*사람 이미지 맨 앞으로 갖고오기*/ } .bg { position : absolute ; } style > body{cursor: url('cursor.cur'),auto;} --> script > let human ; let bg ; let h1 ; let x = 0 ; let y = 0 ; let mx = 0 ; //마우스 x let my = 0 ; //마우스 y let speed = 0.009 ; //마우스 얼마의 속도로 따라올지 window . onload = function (){ h1 = document . getElementsByTagName ( "h1" )[ 0 ]; //마우스 부드럽게 human = document . getElementsByClassName ( "human" )[ 0 ]; bg = document . getElementsByClassName ( "bg" )[ 0 ]; window . addEventListener ( "mousemove" , mouseFunc , false ); function mouseFunc ( e ){ x = ( e . clientX - window . innerWidth / 2 ); // 창의 반 크기를 마우스 움직임 크기에서 빼기 y = ( e . clientY - window . innerHeight / 2 ); } loop (); //마우스 부드럽게 } function loop (){ mx += ( x - mx ) * speed ; my += ( y - my ) * speed ; //console.log(x,mx) // h1.innerHTML ="x:"+x+"mx:"+mx; //x와 mx의 값 출력 human . style . transform = "translate(" +-( mx / 6 )+ "px," + -( my / 6 )+ "px)" ; // my 대신에 -my주면 반대로 움직임 // 사진을 더 조금 움직이게 하고 싶으면 mx,my값을 나눠준다 -> mx/6,my/원하는 수 bg . style . transform = "translate(" + ( mx / 2 )+ "px," + ( my / 2 )+ "px)" ; window . requestAnimationFrame ( loop ); } script > head > body > div class = "topnav" > a href = "https://kimsoi.github.io/webpage_bg5/" > Lab 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 > img src = "lolo.png" width = "100" height- = "100" class = "human" alt = "배틀그라운드 로고" > img src = "obj.png" class = "bg" alt = "사막배경" > body > html >
- 0
- 11
- 187