본문 바로가기

Javascript

(15)
쇼핑몰 사이트 만들때 쓰기 좋은 플러그인 FilterableProductGrid.js tympanus.net/Blueprints/FilterableProductGrid/ Blueprint: Filterable Product Grid Filter: All Jackets Shirts Dresses Trousers Shoes Shopping cart 0 tympanus.net tympanus.net/codrops/2015/06/16/filterable-product-grid/ Blueprint: Filterable Product Grid | Codrops A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality. tympanus.net flickity..
이미지 클릭하면 옆에서 슬라이드로 나오는 플러그인 strip.js www.stripjs.com/ Strip - An Unobtrusive Responsive Lightbox An Unobtrusive Responsive Lightbox Strip is a Lightbox that only partially covers the page. This makes it less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile devices the classic Lightbox experience. Strip www.stripjs.com
이미지 클릭하면 이미지가 부드럽게 확대되면서 나오는 플러그인 PhotoSwipe .js photoswipe.com/ PhotoSwipe: Responsive JavaScript Image Gallery Touch-friendly JavaScript image gallery for mobile and desktop, without dependencies. Responsive layout. Swipe and zoom gestures. photoswipe.com
클릭시 이미지 나오는 갤러리 플러그인 chocolat.js chocolat.insipi.de/#demo Chocolat - Responsive lightbox 02. crossbrowser Chocolat works well with all major browser. It has been tested on : IE9+, firefox, chrome, opera, safari. chocolat.insipi.de
이미지 갤러리형 플러그인 라이트 갤러리 lightgallery.js sachinchoolur.github.io/lightgallery.js/demos/index.html lightGallery: thumbnails Plugin dependency Lightgallery require the thumbnail plugin to be included in your document. sachinchoolur.github.io
스크롤 내리면 해더영역은 고정이지만 변하는 플러그인 midnight.js aerolab.github.io/midnight.js/ Midnight.js - Switch fixed headers on the fly Midnight.js is a jQuery plugin that lets you subtly change your headers to make them match the content as you scroll. aerolab.github.io
스크롤 내리면 입체감 있게 요소들이 움직이는 플러그인 roll.js ROLL.JS Roll.js Demos williamngan.github.io 섹션별로 움직임을 표현 할 수 있도록 되어있다.
스크롤 내리면 튀어나오는 애니메이션 플러그인 WOW.js WOW.js는 JavaScript를 사용하여 자주 쓰일만한 에니메이션 기능들을 만들어 모아 놓은 플러그인이다. 상업적으로 사용하지 않으면 무료이므로 한번 써보기나 해보자. 설치방법 1. http://mynameismatthieu.com/WOW/에 접속 한 후 메뉴바 상단의 GITHUB을 클릭한다. 2. Clone or download를 클릭하고 DownLoad Zip도 클릭하고 다운을 받자. 3. 다운이 완료되면 WOW-master.zip파일이 있을 것이다. 압축을 풀고, 폴더 내에서 animate.css와 wow.min.js를 복사하여 자신이 사용할 적절한 폴더로 옮기기 4. 자신이 작업할 html의 head에 아래 태그들을 추가하여 각파일이 연결되게 하자. 5. 사용하기 위해서는 클래스에 wow와 원..