Rock's Ezweb

https://youtu.be/st_bnDjuq9U

Sample Download:  http://bitly.kr/817C8

- 바 크기 변경 애니메이션 (Loading Bar animation)
- 숫자 애니메이션 3가지 방법(Number Animation 3ways)

Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb

#jquery, #loading, #number, #animate, #setInterval, $animate_number, #animation  #웹디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

https://youtu.be/H41d6hSnF7c

Sample Download:  http://bitly.kr/Jajm2

Back To Top Button
- scrollTop 스크롤양 조절하기
- fadeIn, fadeOut

Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb

#jquery, #scrollTop, #linear gradient,  #웹디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

https://youtu.be/ibKx1VNouzE

예제 주소: https://codepen.io/alikerock/pen/gZoqYw

2Depth navigation 2
- css 스타일
- script 구현하기
- outerHeight
- SetTimeout


에디터: notepad++
트위터: #eztoweb

#jquery, #2depth, #linear gradient,  #웹디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

https://youtu.be/bIPwAEigyn4

Sample Download: https://codepen.io/alikerock/pen/gZoqYw

2Depth navigation menu
- html 구조
- css 스타일
- script 구현하기


Code Editor: Notepad++
Twitter: #eztoweb
https://github.com/alikerock/ezweb
#jquery, #2depth, #linear gradient,  #웹디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

https://youtu.be/vh5hDOjeVvk

Sample Download: https://goo.gl/meFzJ1

스크롤 메뉴
- scrollTop 스크롤양 확인하기
- scrolltop 애니메이트 메서드
- addClass, removeClass
- each 메서드


Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb

#jquery, #scroll , #each,  #웹디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

https://youtu.be/NFhaLV2I830

Sample Download: https://goo.gl/7H9LhQ

라이트박스 효과
- lightbox
- attr
- preventdefault

Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb

#jquery, #lightbox, #attr,  #웹디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

https://youtu.be/8O6htF4tEho

예제 다운로드: https://goo.gl/Ft5uwB

[ 탭(tab)구현 방법 3 ]
- jqueryUI
- show, hide Option


에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#jquery, #tab, #index, #고정헤더, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

https://youtu.be/r4JHvKFYzOc

예제 다운로드: https://goo.gl/jLR28m

[ 탭(tab)구현 방법 2 ]
- index() 활용
- hide, show
- eq


에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#jquery, #tab, #index, #고정헤더, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

https://youtu.be/94K5cot4GVs

Sample Download: https://goo.gl/m6Un7W

[ 탭(tab)구현 방법 1 ]
- attr 활용
- hide, show

Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb

#jquery, #tab, #탭, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

https://youtu.be/EoTnanurO-I

예제 다운로드: https://goo.gl/iWtb6c

[ 헤더고정하기 Shrink ]
- 로고 변경하기
- 높이 변경하기
- 함수 작성
- fadeIn, fadeOut


에디터: notepad++
트위터: #eztoweb

#jquery, #Shink, #고정헤더, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사