일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- CGIMALL
- php
- jquery
- 홈페이지
- #동영상
- #image
- CSS
- 해피씨지아이
- #CSS
- #쇼핑몰
- #홈페이지
- #jQuery
- javascript
- #업종별
- #해피CGI
- #이미지
- #happycgi
- happycgi
- #웹솔루션
- #cgimall
- 웹솔루션
- #솔루션
- 해피CGI
- 홈페이지제작
- 사이트제작
- 게시판
- 솔루션
- #뉴스
- 쇼핑몰
- #홈페이지제작
- Today
- Total
목록#background (7)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
9가지의 애니메이션 배경이 제공되는 quietflow.js 입니다. http://paulkr.github.io/quietflow.js/ 페이지에 접속하여 샘플 확인 및 구동 소스를 확인이 가능 합니다. 이곳에서 파일을 다운로드 받으셔서 이용하셔도 되고 https://github.com/paulkr/quietflow.js 페이지에서 소스 다운로드를 하셔도 됩니다. 해당 다운로드 받으신 파일에는 demo 소스도 포함이 되어 있으므로, 해당 소스를 활용하여 필요하신곳에 이용을 하면 됩니다
svg 를 이용한 타이틀 배경 에니메이션 효과 마우스를 스크롤하면 배경의 커브 방향이 변경됩니다.
Jquery 를 이용하여 백그라운드로 영상을 재생하는 자료을 소개해 드립니다. 해당 자료는 Youtube 영상을 백그라운드로 구동시키면서 영상 컨트롤에 포커스가 잡혀 있네요. 저는 자료 다운로드 후 examples/demo.html 을 구동시켜 봤는데 잘 되네요 ^^ 주요기능을 간략하게 설명 드립니다. -여러개의 youtube 영상 주소를 이용하여 플레이 리스트를 구성할 수 있습니다. -플레이 리스트를 기준으로 셔플 재생이 가능 합니다. 그리고 github 사이트에서는 api 를 제공 합니다. ^^ https://github.com/pupunzi/jquery.mb.YTPlayer/wiki 위의 메서드 외에도 있을만한건 다 있네요 ^^
네온조각을 닮은 CSS 멀티 레이어 그라디언트 배경 jquery 플러그인입니다. CSS3브라우저를 지원하며, jquery 내에 요소값을 지정하여 color, shade, shards, comlexity, lightness 등 다양한 네온조각을 만들 수 있는 값을 지정하여 자유로운 패턴을 배경으로 적용할 수 있습니다. 본 소스를 이용해 다양한 배경패턴을 랜덤하게 출력할 수 있습니다. 고정되는 패턴이 없으며 새로고침할때마다 비슷하지만 다른 패턴을 출력하여 일관된 느낌과 약간씩 다른 포멧을 유지하여 지루하지 않은 디자인을 연출할 수 있습니다. 위와같은 패턴의 샘플 소스를 확인할 수 있으며, 해당 함수에 맞게 값을 조절하여 원하시는 패턴을 구현할 수 있습니다.
코딩할 때, 여러개의 배경이미지를 중첩으로 사용해야 하는 경우가 종종 발생하게 됩니다. 이때, 기존에는 Div를 여러가지로 중첩시켜 각개의 DIV 마다 background 이미지를 설정하였었습니다. 하지만, 콤마를 활용하게 되는 경우에는 하나의 Class에 여러개의 배경이미지를 동시에 적용할 수 있습니다. .bgstyle {background:url(../img/background1.png) no-repeat, url(../img/background2.png) no-repeat;} 위와같이 기존에 익히 알고있는 배경이미지선언에서 콤마만 입력해줘도, 다중으로 사용이 가능하게 됩니다. 이로써 비교적 소스가 간편해질수 있습니다. 단. html5에서 사용가능합니다.
유투브에 등록된 동영상을 웹페이지 배경에서 재생이 될 수 있도록 지원하는 Jquery.mb.YTPlayer 입니다. https://pupunzi.com/mb.components/mb.YTPlayer/demo/demo.html 페이지에 접속시 해당 스크립트가 구동되는 데모 화면을 확인이 가능 합니다. 첨부된 압축파일을 다운받거나 https://github.com/pupunzi/jquery.mb.YTPlayer 페이지에서 소스 다운로드가 가능 합니다. 압축을 풀어보시면 examples 폴더가 확인이 되며, 해당 소스들을 참고 하셔서 웹사이트에 추가 해주시면 됩니다. examples 폴더내에 있는 예제파일들중 소스가 간단하게 구현된 test-3.html 파일을 참고해보면 아래와 같습니다. 해당 소스는 배경에 ..