Scrollmagic : 재미있는 웹 디자인

웹 디자인 에서 트렌드는 일반적으로 일시적인 기간에 사용자가 강력하게 받아들이는 사이트 구현에 채택 된 스타일과 같습니다. 지금까지 2016 년까지의 트렌드 중 일부는 2017 년에도 계속 톤을 설정할 것입니다. 애니메이션 과 스크롤 이 많은 긴 섹션입니다.

이 스타일이 사용자에게 매우 매력적이고 재미 있다는 것은 비밀이 아닙니다. 애니메이션을 사용하면 사이트를 잘 사용하는 한 직관적이고 즐겁게 사이트를 탐색 할 수 있습니다. 이러한 이유로 jQuery ScrollMagic 플러그인을 사용하여 웹 사이트 에 애니메이션 스크롤을 포함하는 자습서를 만들었습니다.

ScrollMagic: 재미있는 웹 디자인

ScrollMagic 은 웹 사이트를 이동할 때 상호 작용을 수행하기 위해 Javascript 로 만든 라이브러리입니다. 이전 Superscrollorama를 완전히 다시 작성했으며 아키텍처는 쉬운 사용자 정의 및 확장 성을 제공하는 플러그인을 기반으로합니다.

다음 중 일부를 구현하려는 경우에 이상적입니다.

• 사이트의 위치 또는 변위를 기반으로하는 애니메이션 애니메이션을 트리거하거나 스크롤의 움직임과 동기화 애니메이션 많은 노력없이 시차 효과 추가 Ajax로 컨텐츠 로딩을 처리하는 무한 스크롤이있는 페이지를 만듭니다.

ScrollMagic 기능

• 최적화 된 성능, 가볍고 유연하며 확장 가능 이벤트 관리 및 객체 지향 프로그래밍 적응 형 웹 디자인 지원 양방향 (수평 및 수직) 이동 지원 컨테이너 (div) 내 이동 지원 Firefox 26 이상, Chrome 30 이상, Safari 5.1 이상, Opera 10 이상, IE 9 이상 등 브라우저에서 완벽하게 작동합니다.GitHub 리포지토리에는 자세한 설명서와 많은 응용 예제가 있습니다.

ScrollMagic 받기

다양한 방법으로 구할 수 있습니다.

1: 깃 허브

자식 클론 자식: //github.com/janpaepke/ScrollMagic.git

2: 바우어

정자 설치 scrollmagic

3: 노드 패키지 관리자

npm 설치 scrollmagic

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

Outlook에서 전자 메일 디자인을 사용자 지정하는 방법을 읽을 수도 있습니다.

설치 및 사용

설치는 매우 간단합니다. 커널 파일을 사용하려는 html 파일에만 포함시킵니다.

;

플러그인은 하나 이상의 장면이 추가되는 컨트롤러 지향 디자인 패턴을 제공합니다. 이러한 장면은 컨테이너가 특정 지점으로 이동할 때 컨테이너에서 발생하는 상황을 정의하는 데 사용됩니다.

이것은 기본적인 예입니다.

// 초기화 컨트롤러 var controller = new ScrollMagic.Controller (); // 새로운 Scene을 생성합니다. ScrollMagic.Scene ({duration: 100, // 스크롤 거리가 100px 오프셋 동안 지속되어야합니다. 50 // 50px 동안 스크롤 한 후이 장면을 시작합니다}).setPin element ") // 장면의 지속 시간 동안 요소를 고정합니다..addTo (controller); // 장면을 컨트롤러에 할당

보다 발전된 예는 여러 오프셋을 달성하는 것입니다.

$ (function () {// 문서 준비 대기 // 초기화 컨트롤러 var controller = new ScrollMagic.Controller (); // 트윈 빌드 var tween = TweenMax.to ("# animate", 0.5, {scale: 3, ease: Linear.easeNone}); // 빌드 장면 var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", 지속 시간: 400, 오프셋: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // 인디케이터 추가 (플러그인 필요).addTo (controller); // init controller horizontal var controller_h = new ScrollMagic.Controller ({vertical: false}); // 트윈 가로 var 작성 tween_h = TweenMax.to ("# animate", 0.5, {rotation: 360, ease: Linear.easeNone}); // 장면 빌드 ​​var scene_h = new ScrollMagic.Scene ({duration: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // 인디케이터 추가 (플러그인 필요).addTo (controller_h);});

플러그인 문서에서 소스 코드와 함께 더 많은 예제를 찾을 수 있습니다.

USB 스틱을 사용하여 Windows 10을 새로 설치하는 방법