본문 바로가기

collect

[jQuery] 패럴러즈(Parallax) 스크롤 사이트의 기본 원리 설명 패럴러즈 사이트 유명하죠^^스크로롤 제어하는 사이트입니다.배경등을 컨틀롤해서 좀 더 유동적이고 멋있는 사이트를 연출하는데요~ 기본 플러그인은 stellar.js.를 바탕으로 하죠^^ 우선 데모를 한번 보시죠^^[데모보기] 따라해볼만 하죠^^이걸 응요해서 만든 사이트를 보실까요?패럴렉스 스크롤(Parallax Scrolling) 웹 사이트예전에 스크랩 했던 사이트들인데요~그 때는 신기하게 봤는데... http://boy-coy.com/http://www.soleilnoir.net/believein/#/ideashttp://nasaprospect.com/http://www.iutopi.com/http://unfold.no/ 여기 사이트들도 괜찮더라구요~동화적인 느낌의 사이트들입니다. 기본 원리는 이렇습니다...
[이미지] 포토샵 리터칭의 효과를 실감나게 볼 수 있는 이미지들 서프라이즈!! 대단하지 않나요^^ 리터칭의 힘이 이정도 일줄이야~ 튜토를 정말 보고싶네요^^ 예전에도 이런 사진 올려서 같은 분이 작업한 줄 알았는데~ 예전에 올린거랑 살짝 비교해보면 http://webstoryboy.com/1133 이 분이 더 귀엽게 그리긴 했지만 그래두 두 분다 대단합니다. 포토샵 리터칭 비법 좀 알려주세요^^ http://www.leehowellphotography.com/ 사이트 보시면 포토샵 리터칭 작품들을 더 많이 볼 수 있습니다.
[Search] 간단한 검색기능을 추가하려면 Sieve jQuery Plugin 사실 이런거 하려면 개발쪽을 알아야 하는데~그거 몰라도 제이쿼리만으로도 검색을 할 수 있습니다.테이블이나. 블럭영역. 어디든지 상관이 없습니다.아주 좋은 소스인것 같네요^^ [미리보기] 미리보기 누르고 검색한번 해보세요~괜찮으면 어여..다운 받아 놓으세요^^ [다운받기]
[Popup] 다양한 팝업 창(Modal)을 구현 할 수 있는 modal.js 플러그인 뭘 이런걸 제이쿼리 플러그인을 쓰나??라고 말할 수 있지만좀 더 역동적인 효과를 사용하려면제이쿼리를 사용해야 합니다.그러면 이걸 추천합니다. [미리보기] 미리보니까 맘에 들죠^^ 평법한 레이어 팝업보다는 요런 팝업창을 추천합니다.사용법도 간단합니다. [다운받기] MIT 라이선스
[Tab] 제이쿼리 플러그인을 이용한 다양한 유형의 탭메뉴(Tab) 우리가 가장 흔하게 사용하는 탭 메뉴입니다.이 탭메뉴 제이쿼리를 이용하면 여러가지 효과중에골라서 편하게 사용할 수 있습니다. [미리보기] 간단한 기능이기에호환성도 뛰어납니다.익스7부터 지원을 하니 호환성은 완벽하네요~ 애니메이션, 오버효과, 토클 등 다양한 기능을 사용할 수 있어서 좋네요^^ [다운받기]
[Gallery] 동영상 갤러리를 지원하는 blueimp Gallery 제이쿼리 동영상을 제어하는 갤러리는 처음보네요^^이것도 필요할 것 같네요^^ 기본 기능중에 하나입니다.라이트박스, 기본 갤러리 역시 훌륭합니다. [미리보기] 라이센스 MIT [다운받기] 제일 마지막으로 기대되는 호환성 검사를 해봤는데요~동영상 부분은 HTML5로 제작되어서구 익스에서는 작동이 안되네요^^호환성은 약간 떨어집니다.하지만 나머지 이미지 갤러리는 잘 작동됩니다.
[광고] 인텔에서 만든 귀엽고, 화질좋고, 퀄리티 있는 모션(튜토포함) 깨물어주고 싶을 정도로 색감표현이 정말 좋네요^^ 주인공도 귀엽게 잘 그렸고요. 인텔의 2104년 광고 영상이었습니다.
[Scroll] 풀페이지를 바탕으로 하는 스크롤 페이지 fullpage.js 일단 보시죠^^ [미리보기] 이런거 찾고 계셨죠?이벤트 페이지를 만들 때 많이 쓰는 레이아웃 구조죠^^물론 스크롤을 했을 경우 부드럽게 움직이는 느낌은 좋은제이쿼리 플러그인 Fullpage.js입니다. [다운로드] 간단한 데모들도 확인해보세요~확실히 좋은 소스는 데모도 잘되어 있어요^^ Full backgroundsGradient backgroundsScrolling inside sections and slidesAdding fixed header and footerVertical navigation dotsHorizontal navigation dotsNormal scrollingWithout anchor links (same URL) (The MIT License)
[Wordpress] 제일 유명한 워드프레스 쇼핑몰 플러그인 사이트입니다. 워드프레스를 바탕으로 하는 쇼핑몰 플러그인 사이트입니다. 1. WP e-Commerce : http://getshopped.org 우커머스가 사용되지 전 가장 유명한 쇼핑몰 플러그인입니다. 현재는 우커머스에게 밀리지만 아직도 많이 사용하고 있는 플러그인 입니다.무료로 제공하지만 여러가지 플러그인을 구입하고 사용해야 좋은 쇼핑몰을 만들 수 있습니다. 결국 완벽한 쇼핑몰을 만들려면, 여러가지 플러그인을 구입해야 하는데 약 200달라 정도 소요가 됩니다. 2. WooCommerce : http://www.woothemes.com/woocommerce/ 현재 제일 유명한 영문쇼핑몰 플러그인입니다. 한국어 버젼도 제공하여 한국에서도 인기가 많습니다.얼마전에는 한국어 결제까지 지원이 되어서 더욱 인기가 많아졌습니다..
[Branding] 확실한 아이덴티티가 느껴지는 오프닝 영상 모션들 요건 보너스입니다.
[Gallery] 호환성, 터치, 반응형, CSS3을 지원하는 갤러리 제이쿼리 carousel.js 지금껏 본 소스 중에 최고네요~부분한 부분이 없어요. 익스7에서도 적용이 되고CSS3에 터치까지 지원을 하면서 반응형도 지원이 되고~ 갤러러 제이쿼리 게시판을 만들었지만 다른거 보지 마세요~현존하는 제이쿼리 중에 이게 최고 인것 같습니다. ㅋㅋ http://owlgraphic.com/owlcarousel/ 종류도 이렇게 다양해요~내가 원하는 스타일을 골라서 쓸 수도 있구요~다양한 옵션 설정도 가능합니다. 데모를 보면 얼마나 좋은 소스지 바로 알 수 있습니다. Click events inside itemsRandomize items and buttons outside slider.Navigation on top by custom eventsNavigation on top by afterInit callba..
[Gallery] 주로 사이트 하단에 많이 쓰이는 회사 정보 갤러리 flexisel.js 주로 사이트 하단에 많이 사용되는회사정보 자동 배너 제이쿼리 플러그인입니다.반응형까지 지원을 하는 Responsive Carousel plugin입니다. [미리보기] 자동으로 움직이기, 클릭해서 움직이기 등여러가지 기능이 지원이 되네요^^ [다운받기]
[일러스트] 이런 일러스트는 뭐라고 불리는지 모르겠지만. 이런 일러스트 느낌도 좋은 것 같애요^^ http://www.madsberg.dk dk로 끝나면 어느나라죠? 덴마크가?? 이 여성분의 작품들은 뭔가 스킬이 느껴지네요^^ 이 일러스트레이터분의 특징은 상품화를 많이 한다는 점에 있습니다. 그냥 심심풀이로 그리는 일러보다는 상품성에 집중을 하는 것 같애요~ 이런 점은 배워야 하는데~ 만든 작품들은 직접 판매하기도 하네요^^ http://www.artelimited.com/artists/mads-berg/ 또한 이 분은 일러스트 지도 맵 전문작가입니다. 대단합니다. http://www.visualmaps.dk/ 담에 포스팅해야 겠네요^^ 화려한 디자인보다는 일러스트의 맛을 잘 그려낸 일러스트레이터의 작품이었습니다.
[타이포] 실사같은 얼음효과(Frozen) 타이포 그래픽 만들기 실사같은 얼음효과(Frozen) 타이포 그래픽 만들기 [튜토리얼]
[광고] 광고를 만들려면 이렇게 귀엽게 만드는것도 괜춘^^ 3D 캐릭터가 귀엽지는 않아요~ 근데 뭔가 귀여워요~ 3D 때문인지 모르겠지만. 광고가 좋네요^^ 로고도 좋고^^ 맘에 들어요~~
[etc] 다이나믹한 테이블 구조를 쉽게 꾸밀수 있는 dynatable.js 제가 그렇게 찾던 소스네요^^사실 그렇게 찾진 않았구요~ 테이블 코딩할 때마다이런 소스 어디 없을까?? 라는 생각을 많이 했는데제가 딱 원하는 소스네요~ 보자마자 바로캡쳐합니다^^ 완전 좋네요~종류별로 설정하는 기능도 있고~ 여러가지 기능도 추가할 수가 있네요^^한번 보세요^^ [미리보기] 예시도 종류가 많고 원하는 스타일을 쓸 수 있어서 너무 좋네요^^ [소스보기] 테이블 챠트도 만들 수가 있습니다.정말 강추 소스입니다. [다운받기] http://www.dynatable.com/