위에 debug.addIndicators.min.js 파일은 스크롤매직을 구현한 화면에 인디케이터를 표시하여,
스크롤매직 라이브러리 웹퍼블리싱 마크업을 좀 더 편안하게 할 수 있도록 도와줍니다.
ScrollMagic 동작 원리 문법
ScrollMagic 동작 원리를 이해할 수 있다면, 문법 작성 또한 어렵지 않을 것입니다.
코드를 설명하기 전에, 동작원리를 쉽게 풀어서 설명하자면 다음과 같습니다.
1. ScrollMagic 애니메이션을 실행하기 위한 Controller 를 생성합니다.
2.GSAP(TweenMax) 애니메이션 오브젝트를 생성합니다.
3.ScrollMagic 상세 옵션 설정을 위한 Scene 오브젝트를 생성합니다.
4.GSAP(TweenMax) 애니메이션 오브젝트(2번)를 Scene 오브젝트(3번)에 추가 설정합니다.
5.Controller(1번)을 Scene 오브젝트(3번)에 추가 설정합니다.
ScrollMagic 동작 원리 맛보기 예제
다음 포스팅에 ScrollMagic 본격적인 옵션 설명과 예제를 다루기에 앞서서, 위에서 설명한 동작 원리로 간단하게 만든 ScrollMagic 예제는 아래와 같습니다.
ScrollMagic Script
$(function(){
var controller = new ScrollMagic.Controller(); // 1. ScrollMagic 컨트롤러 생성
var tween = TweenMax.to('#animate', 0.5, { //2. animation object 생성
backgroundColor: "#6431ff",
scale: 2.5,
rotation: 360,
x: 600,
y: 500
});
var scene = new ScrollMagic.Scene({ //3. Scene object 생성
triggerElement: '#trigger1', //스크롤 애니메이션 시작 지점 설정
duration: '100%', //애니메이션 재생 시간 '100%'지정하면 화면 높이에 따라 유동적으로 end위치가 정해짐
})
.setTween(tween) //4. 2번을 3번에 추가
.addTo(controller) //5. 1번(controller)을 3번에 추가
.addIndicators();
});
ScrollMagic Result + HTML + CSS + ScrollMagic Script
var galleryTop = new Swiper('.gallery-top', {
pagination: { //페이징 사용자 설정
el: ".pagination_bullet", //페이징 태그 클래스 설정
type : 'bullets',
// Bullet Numbering 설정
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
}
});
Swiper 슬라이더를 동작시키기 위해서는 JavaScript에서 Swiper를 초기화하고 필요한 기능에 대해서는 Swiper 메서드 옵션을 사용해야 합니다.
여기까지 작업을 완료하면 Main Swiper 와 Thumbnail Swiper 연동되지 않고 각각 동작하는 것을 확인할 수 있습니다.
사용해야 할 Swiper 옵션설명 및 사용방법은 아래와 같습니다.
✔spaceBetween:슬라이드 간격 설정
✔pagination: 페이징 사용자 설정(type : bullets, fraction, progressbar)
✔loop:슬라이드 반복 여부 설정
✔loopedSlides: loop 값이 true 일 경우 파라미터 duplicate 개수 설정
✔navigation:네비게이션 사용자 설정(이전, 다음 버튼 설정)
✔slidesPerView:한번에 보여지는 슬라이드 개수 설정
✔centeredSlides:슬라이드 중앙 배치 여부 설정
✔touchRatio:드래그 비율 설정(기본값: 1, 값을 0으로 변경할 경우 드래그 불가능)
✔slideToClickedSlide: 슬라이드가 여러개 나열되어 있을 경우, 클릭시 해당 슬라이드 위치로 이동 여부 설정
<script>
var swiperTopNum = $('.gallery-top').find('.swiper-slide');
var swiperSubNum = $('.gallery-thumbs').find('.gallery-thumbs');
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10, //슬라이드 간격
pagination: { //페이징 사용자 설정
el: ".swiper-pagination", //페이징 태그 클래스 설정
clickable: true, //버튼 클릭 여부
type : 'bullets', //페이징 타입 설정(종류: bullets, fraction, progressbar)
// Bullet Numbering 설정
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
loop: true, //슬라이드 반복
loopedSlides: swiperTopNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 0, //슬라이드 간격
navigation: { //네비게이션 사용자 설정
nextEl: '.swiper-button-next', //다음 버튼 클래스 설정
prevEl: '.swiper-button-prev', //이전 버튼 클래스 설정
},
centeredSlides: true, //슬라이드 중앙 배치
slidesPerView: 'auto', //한번에 보여지는 슬라이드 개수(auto 가능)
touchRatio: 0.2, //드래그 비율 설정(기본값: 1, 기본값을 0으로 설정할 경우 드래그 불가능)
slideToClickedSlide: true, //슬라이드가 여러개 나열되어 있을 경우, 클릭 시 해당 슬라이드 위치로 이동
loop: true, //슬라이드 반복
loopedSlides: swiperSubNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
});
</script>
Swiper API - controller
각각 동작하는 Main Swiper 와 Thumbnail Swiper를 서로 연동하여 제어하려면, 어떻게 해야 할까요?
Main Swiper는 Thumbnail Swiper에 연결하고, Thumbnail Swiper는 Main Swiper에 연결하고 제어해야 합니다.
이를 위해서 Swiper의 controller 모듈의 control의 파라미터 옵션을 사용한다면 Main Swiper 와 Thumbnail Swiper를 연결하여 제어할 수 있습니다.
JavaScript와 Swiper API의 controller를 결합한 스크립트 전체 코드는 아래와 같습니다.
var swiperTopNum = $('.gallery-top').find('.swiper-slide');
var swiperSubNum = $('.gallery-thumbs').find('.gallery-thumbs');
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10, //슬라이드 간격
pagination: { //페이징 사용자 설정
el: ".swiper-pagination", //페이징 태그 클래스 설정
clickable: true, //버튼 클릭 여부
type : 'bullets', //페이징 타입 설정(종류: bullets, fraction, progressbar)
// Bullet Numbering 설정
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
loop: true, //슬라이드 반복
loopedSlides: swiperTopNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 0, //슬라이드 간격
navigation: { //네비게이션 사용자 설정
nextEl: '.swiper-button-next', //다음 버튼 클래스 설정
prevEl: '.swiper-button-prev', //이전 버튼 클래스 설정
},
centeredSlides: true, //슬라이드 중앙 배치
slidesPerView: 'auto', //한번에 보여지는 슬라이드 개수(auto 가능)
touchRatio: 0.2, //드래그 비율 설정(기본값: 1, 기본값을 0으로 설정할 경우 드래그 불가능)
slideToClickedSlide: true, //슬라이드가 여러개 나열되어 있을 경우, 클릭 시 해당 슬라이드 위치로 이동
loop: true, //슬라이드 반복
loopedSlides: swiperSubNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
});
//Main Swiper와 Thumbnail Swiper가 연동제어 서로를 제어
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
Swiper 구현 화면 및 예제 다운로드
위에 'Swiper 슬라이더를 2개로 연동 및 제어하기' 설명에 대한 실제 구현한 화면과 포스팅한 예제를 만들어 다운로드 받아서 공부하실 수 있도록 하였습니다.
다운로드 예제는 구현된 화면은 같으나 Swiper 옵션인 loopedslides 적용한 방법과 적용하지 않은 방법 2개로 만들었습니다.
swiper.css 에서 .gallery-thumbs 클래스 내용중 overflow: hidden; 속성을 주석처리 하고 보시면,
Swiper 옵션인 loopedslide 에 대해서 위에서 설명드렸지만 적용된 여부의 차이점을 확인하실 수 있으리라 생각됩니다.
이번 포스팅에서는 repeat(), repeatDelay(), delay(), yoyo(), start(), resume(), restart(), reverse(), isActive(), pause(), seek(), timeScale() 에 대해 예제와 설명을 통해 알아가 보겠습니다.
repeat(number)
애니메이션(트윈이라 정의) 반복 횟수 설정합니다.
기본값은 1이며, -1을 설정하면 무한반복됩니다. delay가 포함되어 있는 경우 첫 번째 트윈만 delay가 적용되고, repeat가 반복 실행되는 두 번째부터는 delay가 적용되지 않습니다.
프로젝트를 하다 보면 동적으로 웹 퍼블리싱해야 할 경우 jQuery animaion을 사용하거나, css animaition을 대부분 사용합니다. 애니메이션을 더 사용하기 쉽고 강력크한 퍼포먼스를 구현할 수 없을까? 바로~~ 바로!!! 트윈맥스 애니메이션 자바스크립트 라이브러리에 대해 여러 편에 걸쳐 포스팅하여 제대로 알아보겠습니다.
GSAP
GreenSock Animation Platform (GSAP)는 퍼블리싱을 하면서 애니메이션을 쉽게 사용할 수 있는 강력한 타임라인 기반의 전용 애니메이션 자바스크립트 라이브러리입니다.
GSAP는 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있습니다.
슬라이드의 진행 방향을 정합니다. horizontal = 가로(기본) | vertical = 세로
effect: 'slide'
'slide' | 'fade' | 'cube' | 'coverflow' | 'flip'
다섯 가지의 슬라이드 전환 효과를 부여할 수 있습니다.
effect: 'slide' // 기본 슬라이드 전환 effect: 'fade' // 희미해지면서 슬라이드 전환 effect: 'cube' // 큐브 형태로 전환 effect: 'coverflow' // 약간의 그림자와 함께 슬라이드를 밀어내며 전환 effect: 'flip' // 카드를 뒤집듯이 전환
enabled: false
슬라이드의 활성화 여부를 정할 수 있습니다. false 값을 넣으면 슬라이드의 모든 요소가 비활성화됩니다.
followFinger: false
슬라이더를 터치하고 놓을 때만 애니메이션이 적용됩니다. effect 옵션과 함께 사용하면 슬라이드 사용자가 터치로 슬라이드 애니메이션을 마음대로 움직일 수 없고 터치를 끝냈을 때만 적용됩니다.
요즈음 웹퍼블리싱을 배우는 학생들의 이야기드를 들어보면, jQuery를 안쓰게 좋을것 같다고 또는 안쓰게 될 것 같다고 이야기 합니다. 그럼 Why? 라는 질문을 하면, 이유를 대답하지 못합니다. 개념조차 이해하지 못하고, 어디서 들은것 같다고만 이야기 하기 때문입니다. 물론 모든 학생이 모두 그렇게 이야기 하는것은 아닙니다. 그럼 저는 왜 jQuery를 써야 하는지 설명해 줍니다.
jQuery 사용하는 첫번째 이유
jQuery는 자바스크립트 DOM을 좀더 쉽게 작업하기 위한 라이브러리 입니다. 결론부터 말하자면 jQuery의 정체는 자바스크립트 문법 중 프로토타입 방식으로 만들어진 클래스입니다. 쉽게 이야기해 jQuery 메서드는 자바스크립트 DOM으로 이루어져 있습니다. 그렇기에 jQuery를 배운다는것은 메서드를 배우는 것이며, 이를 통해 자바스크립트로 코딩하면 10줄, jQuery로 코딩하면 2-3줄로 처리 할수 있을 만큼 효율적인 코드작업을 할 수 있습니다. 그렇다고 jQuery로 모든것을 다 할 수 있는것도 아니며 무조건 좋다는 말은 아닙니다. 제일 좋은 방법은 jQuery와 자바스크립트를 같이 사용하여 최적화 하는방법이 좋다고 말씀드리고 싶습니다. jQuery는 쉬운데 자바스크립트는 어렵다고 하는 분들은 자바스크립트도 충실히 공부하셔야 합니다.
jQuery 사용하는 두번째 이유
jQuery는 DOM 제어보다 크로스 브라우징 처리가 편리합니다. IE7은 비표준 브라우저이기 때문에 이벤트 등록시 자바스크립트로 처리할 경우 attachEvent(), addEventListener()를 사용하여 코드를 작성하여야, IE7과 기타 브라우저의 크로스브라우징을 정상적으로 처리해야 합니다. 이와달리 jQuery 내부에는 이런 번거로운 작업들을 대신 처리해주기 때문에 이벤트를 아주 쉽게 처리할 수 있습니다.
jQuery 학습 방법 및 결론
자바스크립트의 경우 기본 문법을 모를 경우 공부하기가 힘듭니다. 그러나 jQuery의 경우 수많은 메서드로 구성되어 있기에 순서없이 메서드를 하나씩 학습하시면 됩니다. 굳이 공부하는 순서를 따져야 한다면, jQuery는 css와 연관성이 많기에 css를 기본적으로 이해하셔야 하며, 노드를 찾아가는 방법(체인기능) 메서드부터 진행하면 될 것 같습니다. 이것은 웹퍼블리싱을 전문적으로 하는 (주)맑은커뮤니케이션에서 진행하는 신입 퍼블리셔 교육방법 입니다. 아래는 jQuery 메서드 정리입니다. 메서드 정리는 사용 용도에 따라 1, 2부로 나누어 올릴 것 입다다
노드 메서드
노드를 선택하거나, 찾아가는 방법(체인기능)의 메서드 입니다.
분류
핵심 내용
핵심 프로퍼티 및 메서드
일반 노드 찾기
아이디 이름으로 노드 찾기
$("아이디 이름")
태그 이름으로 노드 찾기
$("태그 이름")
클래스 이름으로 노드 찾기
$("클래스 이름")
속성으로 노드 찾기
$("[속성이름=값]")
찾은 노드 다루기
찾은 개수 구하기
$대상.length
n번째 노드 접근하기
$대상.eq(index)
자바스크립트 DOM 객체 접근하기
$대상.get(index) $대상[index]
순차적으로 노드 접근하기
$대상.each(function(index){ $(this) 또는 $대상.eq(index); });
placeholder 플러그인입니다. placehilder는 input의 입력값 작성에 도움을 주는 역할을 하는데요. 접근성에 맞추기 위해 placeholder를 작성하는것이 좋다고 되어있습니다. 하지만 placeholder속성은 html5에 해당하는 속성으로 IE6,7,8에서는 사용이 불가능합니다. 이 플러그인은 비표준브라우저에서도 html5처럼 속성값으로 사용할 수 있으니까 편리하게 사용이 가능할 것 같습니다.
웹퍼블리싱을 실무에서 하다보면 자바스크립트를 꼭 해야하나? 해야 한다면 과연 어디까지 해야하나? 에 대해 많은 퍼블리셔들은 고민을 할 것입니다. 저 또한 이런 문제로 고민할 때가 많았습니다. 그 고민에 대한 결과로 퍼블리셔는 front end, 또는 UI에 관련된 부분만 작업하는 것이라고 저는 정의 내리고 있습니다. 예를 들어 메인 페이지부분의 개발 소스가 들어가지 않는 부분을 말하는 것입니다. 비쥬얼 움직임이 그 예 입니다. 개발이 들어가는 부분에 대해서는 간단한 자바스크립트라 하더라도 하지 않는게 제 원칙입니다. 나중에 프로젝트 완료시 그부분이 제대로 작동하지 않을시 서로 책임을 떠 넘기는 식의 문제가 발생하기 때문입니다. 그래서 저는 프로젝트 시작 시 그부분에 대해 명확히 개발자 분들과 이야기 합니다. 그렇게 하다보면 대략 웹페이지 같은 경우는 20가지 정도 기능의 스크립트 예제만 있어도 어떤 홈페이지든 제작이 가능합니다. 하지만 예제가 있더라도 소스를 읽지 못한다거나 간단한 수정을 할 수 없다면 무용 지물이겠지요? 그래서 퍼블리셔분들의 개발자만큼 스크립트를 다루지 않더라도 일하는데 지장이 되지 않을 정도의 부담없이 배울수 있는 강좌를 하려고 합니다. 모르시는 분들을 위해 완전 기초부터 시작하겠습니다.
페이지 내에 자바스크립트 추가하기
<script>는 평범한 THML입니다. 그리고 HTML을 다루다 보면 웹 페이지의 <head> 부분에 다음과 같이 <script> 태그를 추가할 일이 심심치 않게 생깁니다.
<script> 태그의 type 속성은 포함되는 스크립트의 형식과 종류를 가리킵니다. 이 경우에 type="text/javascript"는 스크립트가 보통의 텍스트(HTML과 같은)이고, 자바스크립트로 작성되었다는 것을 의미합니다.
외부 자바스크립트 파일
페이지 내 <script> 태그를 사용하면 자바스크립트를 하나의 페이지에 추가할 수 있습니다. 하지만 대부분의 경우에는, 하나의 스크립트를 여러페이지에서 사용하게 될 것입니다. 예를 들어 메인 메뉴 스크립트는 한페이지가 아닌 모든 페이지에서 사용하게 될 것 입니다. 모든 페이지에 메인메뉴 스크립트를 사용하기 위해 자바스크립트 코드를 복사하고 붙인다면, 이는 효율적이지 않을 것입니다. 또한 자바스크립트 코드 변경하거나 개선하려고 한다면 모든페이지를 다시 열어서 수정해야하는 수고를 하게 될 것입니다. 프로그램 코드가 모든 페이지에 다 있다면 각 페이지는 덩치가 꽤 커져서 다운로드 속도를 더 늦추게 될 것입니다. 이 모든것들을 해결하기 위한 접근법으로 사용하는 것이 외부 자바스크립트 파일을 사용하는 방법입니다. 이는 .js라는 파일 확장자 텍스트 파일을 <script> 태그를 사용해 웹 페이지에 자바스크립트 코드를 포함한 파일을 링크하면 되는 것입니다.
alert() 함수처럼, document.write()는 여는 괄호와 닫는 괄호 사이에 있는 문장을 출력하는 명령어 입니다. alert() 함수가 새창을 띄워 문장을 출력하는 것이라면 document.write() 는 페이지 내에서 문장을 출력 합니다.
에러추적하기
스크립트를 작성하면서 할 수 있는 실수는 단순한 오타부터 로직상의 복잡한 에러까지 다양합니다. 자바스크립트 프로그래밍 초보라면 실수의 대부분은 오타입니다. 세미콜론, 따옴표, 괄호 등을 빼먹거나, 자바스크립트 명령어를 잘 못 치기도 합니다. 그러면 간단한 몇 가지 예를 들어 보겠습니다.
실수의 종류
검사결과
인수 목록 뒤에 닫는 괄호 ')'를 빼먹는 경우
명령어의 마지막 닫는 괄호를 깜박할 수 있습니다. 예를 들어 'hellow' 뒤에 닫는 괄호를 빠뜨려서 alert('hello';가 되는 등의 경우가 있습니다.
종료되지 않은 문자열
문자열(string)은 따옴표로 감싼 문자들의 집합니다. 'hello'는 alert('hello')라는 코드 안에 있는 문자열입니다. 열거나 닫는 부호를 빼먹기 쉽습니다.
복합문에서 }를 빼먹는 경우
프로그램을 작성하다 보면 괄호와 따옴표뿐만 아니라 {}기호와 같은 다른 형태의 구두 기호도 사용하게 될 것입니다. 이런 류의 오류를 만나면, 여는 괄호와 닫는 괄호의 쌍을 제대로 맞추었는지 확인해야 합니다.
복합문에서 }XXX가 정의되지 않았습니다.
자바스크립트 명령어에 aler('hello')처럼 오타가 있는 경우, 명령어가 정의되지 않았다는 에러 메시지를 받습니다. 인터넷 익스플로러에서는 "aler는 정의되지 않았습니다." 라는 메시지가 나타납니다.
문법상 실수
문법상 실수라는 것은 오타는 아니지만 허용되지 않는 방식으로 하나 혹은 하나 이상의 자바스크립트 문장이 섞였을 때 나타나는 에러를 통칭합니다.
마치며
위 예제는 '거침없이 배우는 자바스크립트' 책의 예제를 사용 하였습니다. 처음에 어려운 것보다는 기본부터 쉽게 부담가지지 않고 접근할 수 있는 간단한 것부터 정리해 보았습니다.
HTML5 이전에는 드래그앤드롭 기능을 사용하기 위해선 복잡한 스크립트 작업을 해야 했습니다. 그러나 HTML5에서 새로이 추가된 확장태그 중에 draggable 속성이 있는데 이 속성을 활용하면 쉽게 드래그앤드롭 기능을 사용할 수 있습니다. draggable 속성중에는 ture, false, auto 3가지 값을 가지고 있으며, 사용방법은 아래와 같습니다.
HTML5에 추가된 드래그앤드롭 관련 이벤트
이벤트 이름
이벤트 설명
ondragstart
드래그가 시잘될 때 발생하는 이벤트
ondrag
요소가 드래그 중일 때. 드래그 중 마우스를 떼지 않았을때 발생하는 이벤트
ondragend
드래그가 끝날 때. 드래그를 하고 마우스를 뗄 때 발생하는 이벤트
ondragenter
정확히 드롭을 목표한 공간에 마우스를 떼어 드래그를 끝낼때 발생하는 이벤트
ondragleave
드롭을 목표로한 공간에서 요소를 꺼낼때 발생하는 이벤트
ondragover
드롭을 목표로한 공간을 드래그한 상태로 요소가 지나갈 때 발생하는 이벤트
ondrop
드롭이 될 때 발생하는 이벤트
dataTransfer 전송 타입
드래그앤드롭으로 이동을 시킬때에는 서로 데이터를 주고 받아야 합니다. 이때 사용되는 것이 'dataTransfer' 오브젝트 입니다. 사용방법은 아래와 같습니다. event.dataTransfer.전송타입('데이터타입');
Type
이벤트 설명
dataTransfer.setData(type, data)
- key/value 쌍으로 MIME 타입과 데이터 저장(여러 세트 저장 가능)
- Draggable의 dragstart 이벤트에서 Draggable의 정보를 저장하기 위해 사용
- 브라우저의 기본 드래그 요소나 외부 애플리케이션의 드래그 요소는 자동으로 여러 세트의 MIME 타입이 지정됨
dataTransfer.getData(type)
- 지정한 MIME 타입의 데이터 반환
- droppable의 drop 이벤트에서 draggable의 정보를 꺼내기 위해 사용
드래그앤드롭 실습예제
여러나라의 음식이미지를 이미지를 각 화면에 맞게 분류하는 예재룰 만들어야 합니다. 그럼 먼저 HTML 마크업을 해야 합니다. 마크업은 아래와 같이 하면 됩니다.
일단 위와같이 4개의 각각 드래그앤드롭될 div 박스를 만든 후 이미지 드래그를 시작하자마자 'drop' 함수를 자바스크립트에서 호출할 것입니다. 또한 드래그앤드롭되는 동안 발생하는 문제를 막기위해 'ondragenter', 'ondragover' 를 'false' 시켰습니다. 또한 각 이미지에는 드래그를 시작하자마자 이벤트가 발생해야 하므로 'ondragstart' 이벤트 핸들러를 사용 하였습니다.
자바스크립트
function drag(target, food) { //드래그 시작시 호출 할 함수
food.dataTransfer.setData('Text', target.id);
};
function drop(target, food) { //드롭시 호출 할 함수
var id = food.dataTransfer.getData('Text');
target.appendChild(document.getElementById(id));
food.preventDefault();
};
drag 함수에서는 'food.dataTransfer.setData'를 이용하여 아미지 정보를 셋팅하였고, 'food.dataTransfer.getData'를 이용하여 드래그 되고 이는 정보를 가져왔습니다. 그리고 'food.preventDefault()'를 사용하여 이벤트를 종료하였습니다.
위 예제를 응용한다면 장바구니 담기 등 여러방면에서 응용하여 사용이 가능할 것입니다. 위 예제를 첨부하오니 학습하는데 도움이 되었으면 합니다.
invalid-file
invalid-file
