웹프로그램밍 자료실/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>
우연히 백그라운드 관련된 자료를 찾다가 괜찮은걸 발견했네요 ^^
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>
