본문 바로가기

아카이브/JQUERY

프로그래스바 만들기 최근 한달간 생활코딩 자바스크립트 강의를 열심히 듣고난 뒤 습득한 내용을 어떻게 하면 소화시킬수 있을까 고민하다 간단한 예제들을 만들어 포스팅 하기로 소소한 목표를 정했습니다. 누더기 같은 코드지만 앞으로 점점 나아지길 기대하면서 소스를 드랍하겠습니다. See the Pen progress bar by jisungyoo (@mainplay) on CodePen. 사용된 주요 API 입니다. 클릭하시면 자세한 설명을 볼수 있습니다. · setInterval() · clearInterval() · click() 더보기
토글클래스를 이용한 메뉴버튼만들기 제이쿼리의 "click", "toggleclass" 메서드를 이용한 메뉴토글버튼입니다.css transform를 더하여 사용자의 재미를 추가했습니다. 간단한소스니 자세한 설명은 생략하겠습니다 :) See the Pen rLRZEo by jisungyoo (@mainplay) on CodePen. 더보기
마우스 위치를 이용한 페럴락스기법 디자인 참고를 위해서 awwward.com을 서핑하다 보면 고해상도 이미지에 페럴락스 기법을 이용한 웹사이트들을 많이 볼 수 있는데요.플랫한 디자인에 고해상도 이미지를 사용해서 사이트가 가지고 있는 스토리를 보다 직관적이고 세련되게 표현 할 수 있는 좋은 방법이라고 생각합니다. 따라서 제이쿼리 플러그인를 통해서 간단하게 페럴락스 기법을 구현하는 방법을 소개하고자 합니다. 준비물 1. 제이쿼리 2. 페럴락스 플러그인 https://github.com/stephband/jparallax 3. 열정(?) See the Pen <a href='http://codepen.io/mainplay/pen/JKVgVr/'>JKVgVr</a> .. 더보기