티스토리 뷰
어떤 사이트를 보면 마우스 휠을 위아래로 움직였을 때 요즘 스마트폰을 터치해서 화면을 위아래로 움직이는 것처럼 부드럽게 움직이는 사이트가 있습니다.
이번에 저도 홈페이지 작업을 하면서 JQuery를 이용하여 화면을 부드럽게 스크롤 되는 플러그인을 사용해서 화면을 부드럽게 구현하니 기존 사이트와 상당히 다른 느낌을 주는 사이트로 만들어졌습니다.
JQuery의 smoothwheel이라는 플러그인을 사용해서 작업을 했습니다.
여러분도 JQuery의 smoothwheel 플러그인을 이용해서 화면 부드럽게 스크롤되는 사이트를 만들어 보시기 바랍니다^^
JQuery 소스
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> #wrapper{ background: black; width:800px; height:600px; overflow:auto; -webkit-overflow-scrolling: touch; position:relative; } #container{ height:2000px; background:blue; width:750px; position:absolute; } .box{ width:100px; height:100px; background:red; position:absolute; } #box1{ top:50px; left:200px; } #box2{ top:350px; left:400px; } #box3{ bottom:20px; left:400px; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="../src/jquery.smoothwheel.js"></script> <script> $(document).ready(function(){ $("#wrapper").smoothWheel() }); </script> </head> <div id="wrapper"> <div id="container"> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <div id="box3" class="box"></div> </div> </div> </html>
소스
https://github.com/fatlinesofcode/jquery.smoothwheel
데모 사이트
http://fatlinesofcode.github.io/jquery.smoothwheel/demo/smoothwheel.html
'IT 이야기 > 프로그래밍' 카테고리의 다른 글
[C언어소스] 알파벳을 삼각형 모양으로 출력해 주는 소스 (0) | 2016.01.05 |
---|---|
모바일 개발시 PC/모바일 구분하는 소스 (0) | 2015.12.03 |
C언어 별 모양 출력하기 (0) | 2015.10.11 |
[ASP] UTF-8로 변환하는 Encode_UTF8 함수 (1) | 2015.06.25 |
[PHP] fsockopen() 으로 PHP 외부의 페이지 가져오기 (0) | 2015.05.18 |
[C언어] 화씨온도를 섭씨 온도로 변환하는 문제 (0) | 2015.05.07 |
컴파일러 없이 쉽게 C언어 공부하는 방법, 웹컴파일러로 한 방에 (1) | 2015.05.06 |
[JQUERY] 스크롤 위치 얻어오기 (0) | 2015.02.02 |
fatal error LNK1123: COFF로 변환하는 동안 오류가 발생했습니다. 파일이 잘못되었거나 손상되었습니다. (0) | 2015.01.26 |
fatal error C1021: invalid preprocessor command 'inclued' 한방에 해결하기 (0) | 2015.01.24 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
- W3Schools Online Web Tutorials
- 구차니의 잡동사니 모음
- [IT]블로거팁닷컴
- 비앤아이님의 블로그
- Blog Suspect
- 즐거운하루 blog
- zinicap의 검색엔진 마케팅(SEM)
- 머니야머니야님의 블로그
- [Friend] AtinStory
- [기타배우기]해브원 박스
- [웹표준] SINDB.com
- 해커 C 이야기
- [애드센스] 길라잡이
- 정순봉의 IT SCHOOL
- 씨디맨의 컴퓨터이야기
- 2proo Life Story
- 못된준코의 세상리뷰
- [IT강좌] 정보문화사
- IN 대전
- 에우르트는 나쁜남자 -_-
- 씬의 싱크탱크
- 엔돌슨의 IT이야기
- 진이늘이
- 'Cooltime'의 블로그
- 후이의 Tistory
- Soulstorage
- 앤드&엔드의 블로그
- June Blog
- 노지의 소박한 이야기
- gbWorld
- 인터넷 속 나의 생각
- HarshNix
- ART of WEB
- 녹두장군 - 상상을 현실로
TAG
- 강의
- MBTI
- 안드로이드
- 성공
- C언어 문제
- php
- MBTI 테스트
- C언어 소스
- JavaScript
- MBTI 자료
- 인터넷 익스플로러
- 강좌
- MBTI 검사
- MBTI 강좌
- It
- HTML
- 모토로이
- 예제 소스
- 프로그래밍
- C언어
- 소스
- 효과음
- 소스코드
- 안드로이드 어플
- 스마트폰
- C
- 안드로이드 어플 추천
- 리뷰
- 인터넷
- 프로그래밍 문제
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
글 보관함