페럴렉스 레이아웃 예제

복잡하게 만들려면 한없이 복잡하고 간단하게 만들려고 하면 간단한 머리 아픈 페럴렉스 레이아웃 중에 간편하게 소스를 제공하거나 분석해서 사용하기 편한 것들을 모아 보았음.
너무 많아서 앞으로 계속 업데이트를 해야 할듯...
재미있거나 화려한 효과를 가진 녀석들은 따로 분류를 해야 겠음.

 1. A Simple Parallax Scrolling Technique

http://code.tutsplus.com/tutorials/simple-parallax-scrolling-technique--net-27641
2. Create a Parallax Scrolling Website Using Stellar.js


http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellarjs--webdesign-7307
3. fullPage.js

http://alvarotrigo.com/fullPage/

 4. HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本
http://dev.classmethod.jp/etc/html5-x-css3-x-jquery-6-parallax/
5. How to create a parallax scrolling website

 https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
6. parallax scrolling for the masses



7. jQuery Scrolldeck Parallax Plugin


http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/

댓글

댓글 쓰기

이 블로그의 인기 게시물

[iOS] body 스크롤 막기

.scrollOff{position:fixed;overflow:hidden;height:100%;} // body 스크롤 막음 function scrollOff(){    $('body').addClass('scrollOff').on('scroll touchmove mousewheel', function(e){       e.preventDefault();    }); } // body 스크롤 풀기 function scrollOn(){    $('body').removeClass('scrollOff').off('scroll touchmove mousewheel'); } 지인에게 받은 팁...iOS때문에 여러사람들 고생하네...
자세한 내용 보기

[html] 모바일웹 작업 팁 정리중...

1. 가로/세로 전환시 폰트 고정 -webkit-text-size-adjust:none; viewport에서 maximum-scale가 있어야 하고 값이 1.0일때만 반응. 2. viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" /> 3. 상단 url바 숨기기 <script type="text/javascript"> window.addEventListener("load",function(){  setTimeout(scrollTo,0,0,1);  },false); </script> 4. 전화번호 기능 <a href="tel:000-0000-0000">전화걸기</a> <a href="sms:000-0000-0000">문자보내기</a> <a href="sms:">문자보내기 실행</a> 5. 키보드 호출 <input type="text" /> <input type="search" /> <input type="tel" /> <input type="url" /> <input type="email" /> <input type="time" /> <input type="number" /> <input type="datetime"
자세한 내용 보기

Swiper lazyLoading

최신 버전 Swiper lazy Loading는 지금 사이트에서 보면 된다. https://idangero.us/swiper/api/ 하지만 구버전 일단 지금 사이트에서 사용하고 있는 버전이 3.4.0버전인데 옵션들이 좀 많이 달라서 검색에 애를 먹고 있다. 결과적으로 찾고 찾아서  lazyLoading: true, lazyLoadingInPrevNext: true, watchSlidesProgress: true, watchSlidesVisibility: true 이렇게 사용하면 됨. 구 버전 API만 모아놓은데 어디 없으려나... 더 찾아 볼걸 여기에 있구나 https://github.com/nolimits4web/Swiper/blob/Swiper3/API.md
자세한 내용 보기