분류 전체보기 (42) 썸네일형 리스트형 스크롤 내리면 해더영역은 고정이지만 변하는 플러그인 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와 원.. 스크롤 내리면 요소에 애니메이션 되는 플러그인 choreographer.js christinecha.github.io/choreographer-js/ Choreographer-js c h o r e o g r a p h e r - j s A simple library to take care of complex CSS animations. christinecha.github.io 스크롤 내리면 퍼포먼스 구현되는 플러그인 scrolltrigger.js terwanerik.github.io/ScrollTrigger/ ScrollTrigger - Let your page react to scroll changes Trigger classes based on scroll position The most basic usage of ScrollTrigger is to trigger classes based on the current scroll position. E.g. when an element enters the viewport, fade it in. You can add custom offsets per element, or set offsets on the v terwanerik.github.io WEB SITE Reference용 // 포폴 만들 때 아이디어 얻기 좋다 1빠따로 국내 웹사이트 참고용 www.dbcut.com/bbs/index.php 디비컷 - 웹디자인 벤치마킹 및 우수 웹사이트 모음 디비컷은 신규 오픈한 국내외 웹사이트를 소개 평가하는 웹디자이너 커뮤니티입니다. www.dbcut.com www.gdweb.co.kr/main/ 굿디자인웹 국내 최우수 웹디자인 선정, 웹사이트. 굿디자인웹 www.gdweb.co.kr 해외 웹사이트 참고용 개인적으로 해외 웹사이트 보면 눈이 즐겁다. 싱기방기 www.awwwards.com/ Awwwards - Website Awards - Best Web Design Trends Awwwards are the Website Awards that recognize and promote the talent and effort o.. VS code 에서 SASS 설치방법 필요한 플러그인 sass / sass Lint / live sass compiler / live server 전부 다 설치하고 나면 VS CODE 에디터 제일 하단에 Watch Sass 가 뜬다. 클릭하면 이렇게 됨 그럼 내가 작업했던 common.scss가 css 파일로 컴파일되면서 common.css.map 파일도 생성된다. 왼쪽이 scss파일이고 오른쪽은 컴파일 되서 이쁘게 정리된 css다 setting.json 들어가서 { "files.autoGuessEncoding": true, "files.encoding": "euckr", "workbench.editorAssociations": [ ], "files.associations": { }, "liveSassCompile.settings.forma.. Sass 폴더 구조 SCSS 파일의 폴더 구조는 이렇게 배치 해놓으면 작업하기가 안복잡하고 더 수월하다. root - scss - common (공통 스타일) - page (작업 페이지 공간) - page@@.scss - lib (라이브러리 약자 / 선택) common/_reset.scss_mixins.scss_extend.scss 이전 1 2 3 4 5 6 다음
