part 4 Sample download:
https://drive.google.com/file/d/1hnKyjOZw7VfCBNPAFD1EomTMPxa5TY0C/view?usp=sharing
https://bxslider.com/
part 4: 슬라이드 활성화 애니메이션
part 5: 슬라이드 옵션 활용하기, 자동슬라이드 구현
part 6 : 슬라이드에 동영상 구현하기
part 7: 탭과 슬라이드 연동하기
에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#bxslider, #슬라이드, #jquery, #웹퍼블리셔, #프론트엔드
Sample LINK : http://bitly.kr/KMHTYd
https://bxslider.com/
part 1 : 기본사용법
part 2 : 좌우 컨트롤
part 3: 멀티플 슬라이드
part 4: 슬라이드 활성화 애니메이션
part 5: 슬라이드 옵션 활용하기
part 6 : 자동슬라이드 구현
part 7 : 슬라이드에 동영상 구현하기
part 8: 탭과 슬라이드 연동하
에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#bxslider, #슬라이드, #jquery, #웹퍼블리셔, #프론트엔드
Sample LINK : http://bitly.kr/KMHTYd
http://detectmobilebrowsers.com/
에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#웹퍼블리셔, #프론트엔드
| jQuery 56 [ BX slider #2] bx 슬라이더 완벽 설명 8편중 2편 - 좌우 컨트롤 변경하기 (0) | 2019.07.09 |
|---|---|
| jQuery 55 [ BX slider #1] bx 슬라이더 완벽 설명 8편중 1편 - 기본 사용법 (0) | 2019.07.09 |
| jQuery 53 [ Progress JS ] 프로그레쓰 JS를 이용한 SVG Line, circle, 나만의 Path를 애니메이션으로 구현하기 (0) | 2019.07.01 |
| jQuery 52 [ Cleave JS ] 클리브 JS를 이용한 폼 패턴 쉽게 구현하기, 전화번호, 날짜, 카드번호 구현하기 (0) | 2019.07.01 |
| jQuery 51 [ SVG Scroll Animation ] SVG 스크롤 애니메이션 (0) | 2019.07.01 |
Sample Link : https://codepen.io/alikerock/pen/PmpMGO
폼입력을 빠르게 도와주기 infield Input Form
- Label Animation
- input Animation
Code Editor: Microsoft visual studio code
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb
#form, #label animation, #jquery, #웹디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사
Sample Download: http://bitly.kr/Hzzhr
스크롤양에 맞춰 숫자 애니메이션 구현하기(라이브러리 활용)
Number animation by Scroll with libraries
- waypoint
- animate Number
Code Editor: Microsoft visual studio code
Twitter: #eztoweb
https://github.com/alikerock/ezweb
#jquery, #number, #animate, #setInterval, $animate_number, #animation #웹디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사
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 #웹디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사
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, #웹디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사
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://goo.gl/Ft5uwB
[ 탭(tab)구현 방법 3 ]
- jqueryUI
- show, hide Option
에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#jquery, #tab, #index, #고정헤더, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사
예제 다운로드: https://goo.gl/jLR28m
[ 탭(tab)구현 방법 2 ]
- index() 활용
- hide, show
- eq
에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#jquery, #tab, #index, #고정헤더, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사
