웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 사이트의 백그라운드를 동영상으로 구성해보자. Vide Ver.0.5.0 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] 사이트의 백그라운드를 동영상으로 구성해보자. Vide Ver.0.5.0

해피CGI윤실장 2017. 5. 15. 09:22
안녕하세요 HappyCGI  입니다.

우연히 백그라운드 관련된 자료를 찾다가 괜찮은걸 발견했네요 ^^
 
JQuery 를 이용한 Vide Ver.0.5.0 입니다.


동영상을 이용하여 동영상을 이용한 사이트의 백그라운드를 구성할 수 있습니다.

소스는 구성되어 있습니다. 그리고 영상을 바꾸고 싶다면 video 폴더의 영상을 다른 영상으로 교체 하시면 됩니다. 

 


테스트 및 사용방법 설명 드립니다. ^^

압축파일을 다운로드 받으신 후 웹 경로에 해제를 합니다.

설치된 폴더에 보시면 examples 폴더가 있습니다.

샘플 html 2개가 있습니다.

1.body-bg 는 사이트 전체에 백그라운드를 주기 위한 BODY 태그에 거는 방법 입니다.
2.block-bg 는 특정 DIV 에 백그라운드를 거는 방법 입니다.

자신에게 맞는 방법을 선택하여 사용하시면 됩니다. ^^


백그라운드 영상을 변경하는 방법은 아래의 코드를 참고하세요.
( data-vide-bg 가 키 포인트 입니다. ^^ )

<body data-vide-bg="video/동영상 파일명">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="../src/jquery.vide.js"></script>
<script>

 

홈페이지바로가기 

저작자표시

'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글

[해피CGI][cgimall] jQuery one large product per slide colorful slider for showcasing  (0) 2017.05.17
[해피CGI][cgimall] 부트스트랩 모델전용 경고창 bootbox.js  (0) 2017.05.16
[해피CGI][cgimall] Jquery 를 이용하여 버튼에 이팩트를 주는 minimit-anima Ver 1.4.4  (0) 2017.05.12
[해피CGI][cgimall] 객체의 색상을 바꿔주는 JQuery  (0) 2017.05.11
[해피CGI][cgimall] 객체의 CSS를 바꿔주는 JQuery  (0) 2017.05.10
공유하기 링크
'웹프로그램밍 자료실/JAVA 자료' Related Articles more
Comments