아보카도에 움직이는 배경 넣기 채택완료

안녕하세요!

https://codepen.io/GhostRider/pen/ZEeYxE 의 효과를 개인 홈페이지 배경에 넣고 싶은데요.

완전 초보라서 이렇게 하는 게 맞는 건지 궁금합니다.

 

2083619900_1704786575.3748.png

이 내용을 복사해 메모장으로 만들고, 파일명을 confetti.css로 만들어 css 폴더에 넣고

 

2083619900_1704786630.2655.png

마찬가지로 전문을 복사해 메모장으로 만들어 confetti.js로 만들고 js 폴더에 넣었습니다.

 

질문 1

그다음 CSS는 head.sup.php 파일에 아래 소스를 넣는 게 맞을까요?

<link rel="stylesheet" href="홈페이지 주소/css/confetti.css"> 

 

질문 2

js는 head.php 파일에 아래처럼 넣었습니다.

<script src="홈페이지 주소/js/confetti.js"></script>

 

질문 3

위에 두 개가 맞다면, 적어둔 소스를 head.sup.php 와 head.php 파일의 각각 어느 위치에 넣어야 하는지도 궁금합니다ㅠㅠ

참고용으로 php 파일 함께 업로드합니다. 

https://drive.google.com/drive/folders/1xwgLqo510HLxiYfXbZOUQfK2hMndUwEN?usp=drive_link

(가문의 명예를 걸고 결코 아무 바이러스도 없는 클린한 파일입니다.)

 

2083619900_1704787237.7071.png

질문 4

head.php 파일에 위에 저 html 코드도 넣어야 하는 것 같은데, 이건 어디에 넣어야 하는 걸까요?

 

정말 초보라 모르는 게 많습니다.. 도와주세요!!

답변 2개

채택된 답변
+20 포인트

네 다 맞습니다.

모두 head.sup.php 에 넣으시면 됩니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 11개

js랑 html 코드도 head.sup.php에 넣는 건가요?
네 js, css 모두 head.sup.php에 넣으면 되세요.

마지막 html에 들어있는 스크립트 코드도 head.sup.php에 넣으시면 됩니다.

근데 다른 스크립트들과 충돌날 수 있으니 한번 적용해보시고, 뭔가 안된다 싶으면 이유를 찾아야합니다.

아 html에 코드에 있는 <div id="confetti"></div> 이건 원하는 페이지에 넣어야 하구요.
감사합니다!! 마지막에 원하는 페이지라는 건 뭘까요?
개인홈페이지 배경에 효과를 고정시키고 싶은 거라, 원하는 페이지라는 말이 이해가 안 됩니다!!
첫페이지에 뒷배경으로 고정하고 싶으시면 index.php에 넣으시면 됩니다. index가 홈페이지의 첫페이지라고 생각하시면 되세요.
감사합니다 해보고올게요!!!!
적용됐습니다 감사합니다!!!!!!!!!!!ㅠ_ㅠ
다행이네요. 굿~!
저 질문 하나만 더 드릴게요!
<div id="confetti"></div>
이걸 head.sup.php 에 넣었을 때는 배경에 뜨는데 index.php에 넣었을 때는 뜨지 않습니다 ㅠㅠㅠ

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<?php
include_once('./_common.php');
define('_INDEX_', true);
$main_link=get_main_link();
if (G5_IS_MOBILE) {
goto_url($main_link);
}
include_once('./head.sub.php');
add_stylesheet('<link rel="stylesheet" href="'.G5_CSS_URL.'/index.css">', 0);
?>


<? if($config['cf_bgm']) { // 배경음악 출력부분 ?>
<div id="site_bgm_box">
<iframe src="./bgm.php?action=play" name="bgm_frame" id="bgm_frame" border="0" frameborder="0" marginheight="0" marginwidth="0" topmargin="0" scrolling="no" allowTransparency="true" allow="autoplay; encrypted-media"></iframe>
</div>
<? } ?>

<!-- 콘텐츠 시작 -->
<div id="wrapper">
<iframe src="<?=$main_link?>" name="frm_main" id="main" border="0" frameborder="0" marginheight="0" marginwidth="0" topmargin="0" scrolling="auto" allowTransparency="true"></iframe>

</div>

<script>
$(document.body).on("keydown", this, function (event) {
if (event.keyCode == 116) {
document.getElementById('main').contentDocument.location.reload(true);
return false;
}
});
</script>

<?php
include_once(G5_PATH.'/tail.sub.php');
?>


ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

여기에서 어디에 <div id="confetti"></div> 를 넣어야 할까요??ㅠㅠㅠ
맨 위에도 넣어봤는데 뜨질 않습니다..
혹시 콘텐츠시작에 id="wrapper" 이 값에 백그라운드 색상이나 z-index값이 css로 들어가있나요?

confetti 여기 css값에 z-index가 -1이기에 맨 뒤로 가 있는 상황이거든요.

id="wrapper" 여기에 백그라운드나 z-index가 있다면 가려져서 안보이는 상황일 수 있어요.

일단 실제 url을 보면.. 더 확실히 알 수 있을거같긴하네요.
쪽지 답장 보내려고 했더니 포인트가 없다고 안된다네요...
말씀해주신대로 z-index를 1로 바꿨는데 새로고침 할 때만 저 배경 효과가 잠깐 뜹니다ㅠㅠ
그래요? 저는 잘 나오는데 계속 보고 있어도 계속 배경 내려와요. 크롬으로 봐도 엣지로 봐도 계속 나오고 있어요. 되는거 같은데요.

댓글을 작성하려면 로그인이 필요합니다.

주사쟝님..! 아래 댓글이 안 달려서 이걸 확인하시면 여기에 댓글 부탁드려요!! ㅠㅠ

z-index를 1로 했더니 뜨긴..뜨는데..!!!
이번엔 효과가 앞에 있어서 그런지 메뉴나 관리 버튼이 안 눌립니다!!!!
하.... 왜이러는 걸까요??ㅠㅠ

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

아이프레임으로 떙겨온 값이 뒤에 있어서 그렇습니다. 쪽지 보내드렸어요~

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고