2026, 새로운 도약을 시작합니다.

메인에 video screen effect를 적용해 보았습니다

비타주리님의 팁(https://sir.kr/g5_tip/15911?sfl=wr_name%2C1&stx=%EB%B9%84%ED%83%80%EC%A3%BC%EB%A6%AC)을 사용하여 메인에 video screen effect를 적용해보았습니다.

index.php의 적당한 위치에 아래 코드를 넣어줍니다.

<?php
if (!defined('_INDEX_')) define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if (G5_IS_MOBILE) {
    include_once(G5_THEME_MOBILE_PATH.'/index.php');
    return;
}

include_once(G5_THEME_PATH.'/head.php');
?>

<h2 class="sound_only">최신글</h2>

<h2 id="kims_s" style="font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, 'serif'; font-size: 30px;">Video Screen Effect</h2>
<!-- 이미지 블렌드효과 넣기 시작 2021.8.01-->
<a href="http://gratia.kr">
<div id="kims" style=width:965px;height:543px;background:url(http://pws.co.kr/zz/myimg.png)>
    <video style=width:100%;mix-blend-mode:screen src=http://pws.co.kr/zz/video/myvideo.mp4 autoplay loop muted></video>
</div></a>
<!-- 이미지 블렌드효과 넣기 끝 2021.8.01-->

<!--이미지 감추기 시작 2021.8.31-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("#kims").hide();
  });
  $(".btn2").click(function(){
    $("#kims").show();
  });
});
</script>
<button class="btn1">Video Hide</button>
<button class="btn2">Video Show</button>
<!--이미지 감추기 끝 2021.8.31-->

이하 코드생략.

첨부한 영상은 에펙으로 파티클 영상으로 간단하게 만든 것입니다.
영상크기가 1280*720입니다. 사진도 같은 크기로 만들어서 업로드합니다.

사진의 background:url(http://pws.co.kr/zz/myimg.png)에 사진이 위치한 절대 경로를 입력해줍니다.

영상의 소스에 src=http://pws.co.kr/zz/video/myvideo.mp4 영상이 위치한 절대 경로를 입력해줍니다.
그누보드 외부로그인을 제외한 화면 가로크기가 965px 입니다.
그래서 화면에 꽉차게 보이게 하려면 <div> 크기를 width="965px: height="543px: 으로 하면 됩니다.
토글을 사용하여 영상이 보였다 보이지 않았다하게 만들었습니다.

2041987161_1627838424.0596.png

감사합니다.^^


 

첨부파일

|

댓글 2개

수고하셨습니다. 슬라이딩이나 페이드가 되는 갤러리에 넣었으면 금상첨화였을 거에요.
올려주셔서 감사합니다.

댓글 작성

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

로그인하기

그누보드5 팁자료실

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,598
2741 4일 전 조회 125
2740 5일 전 조회 112
2739 1주 전 조회 212
2738 1주 전 조회 219
2737 1주 전 조회 183
2736 2주 전 조회 281
2735 3주 전 조회 286
2734 3주 전 조회 264
2733 1개월 전 조회 266
2732 1개월 전 조회 301
2731 1개월 전 조회 268
2730 1개월 전 조회 227
2729 1개월 전 조회 359
2728 1개월 전 조회 245
2727 1개월 전 조회 422
2726 1개월 전 조회 257
2725 1개월 전 조회 332
2724 1개월 전 조회 361
2723 1개월 전 조회 267
2722 1개월 전 조회 300
2721 1개월 전 조회 213
2720 2개월 전 조회 304
2719 2개월 전 조회 307
2718 2개월 전 조회 202
2717 2개월 전 조회 337
2716 2개월 전 조회 202
2715 2개월 전 조회 313
2714 2개월 전 조회 273
2713 2개월 전 조회 377
2712 2개월 전 조회 289
🐛 버그신고