JS. skrollr 해석하기(1)

개요

얼마전, 스크롤 이펙트인 scrollr에 대해 배웠다

사실 어떻게 하는지 따라만했지 혼자 해보라고 하면 못할 것만 같다 

 

적을알면 백전백승, skrollr 깃허브에 나와있는 readme.md를 파파고와 함께 해석해보고 

중요한 부분은 빨간색으로 강조하겠다 

 

-- 다 쓰고 하는 말--

1. 쓰다보니 가독성이 똥이 됐다

일단 쓴 글은 어쩔 수 없고, 다음부터 잘 써보겠다 알아서 한글만 쏙쏙 보길 바람

 

2. let's get serious가 가장 중요한 듯 하다

 

3. 여기는 그냥 앞부분만 있다. 즉, let's get serious가 없다.

 

 

참조 https://github.com/Prinzhorn/skrollr

Please note: 일러두기

skrollr hasn't been under active development since about September 2014 

(check out the contributions graphs on https://github.com/Prinzhorn/skrollr/graphs/contributors)

and I don't have any plans for doing major changes to it.

Please consider this before using skrollr in production as problems with new browser versions, especially on mobile, will most definitely surface.

To be honest, mobile support always sucked (because mobile browsers are hard)

and you shouldn't compromise UX for some fancy UI effects. Ever.

 

skrollr은 2014년 9월 이후 개발되지 않았습니다.

(https://github.com/Prinzhorn/skrollr/graphs/contributors의 기여 그래프를 참조)

그리고 큰 변경 계획은 없습니다.

새로운 브라우저 버전, 특히 모바일에서 문제가생길수도 있으므로 skrollr을 프로덕션에서 사용하기 전에 이 점을 고려하시기 바랍니다.

솔직히 모바일 지원은 항상 형편없습니다.

그러니 화려한 UI(인터페이스) 효과를 넣게 이전에, UX(사용자 경험) 고려하는 것을 추천드립니다.

 

skrollr 0.6.30 (특징 설명하려는 듯)

Stand-alone parallax scrolling JavaScript library for mobile (Android, iOS, etc.) and desktop in about 12k minified.

Designer friendly. No JavaScript skills needed. Just plain CSS and HTML.

Actually, skrollr is much more than "just" parallax scrolling.

It's a full-fledged scrolling animation library.

In fact, you can use it and still have no parallax scrolling at all.

But I wanted to sound hip and use some buzz-words. By the way, skrollr leverages HTML5 and CSS3 ;-)

 

패럴럭스 스크롤 JavaScript 라이브러리는 약 12k로 최소화되었습니다.

그리고 HTML과 CSS만 있다면 구현 가능합니다.
skrollr은 평범한 패럴럴스 스크롤이 아닙니다.

스크롤 애니메이션 라이브러리입니다. (중요한 내용이 아니라 생략)

 

Resources

Plugins (연결)

클릭해서 들어가면 조금 더 세부적인 설명이 적혀있다.

Official

• skrollr-menu - Hash navigation
• skrollr-ie - IE < 9 CSS fixes
• skrollr-stylesheets - Keyframes inside CSS files

Third party

• skrollr-colors - Mix and match hex, rgb and hsl colors.
• skrollr-decks - Fullpage presentation decks.

In the wild (실제로 적용된 홈페이지를 알려줌)

Check out the wiki page for websites using skrollr and feel free to add your own website :).

You can also shamelessly add yourself to the list here if you are offering paid skrollr support.

 

(해석보단 설명에 가까운 듯) 위에 참조 페이지에 가서 wiki page를 클릭하면 skrollr을 적용한 홈페이지가 많이 나오는 데 대표적인 사이트를 가져왔다.

그리고 skrollr을 통해 새로운 페이지를 만든다면, wiki page에 추가도 가능하다고 한다.

대표 사이트 : https://phoenix-startup.com/

Further resources (tutorials etc.)

Moved to the wiki.

튜토리얼 사이트들을 나열했다.

 

Documentation(문서)

First of all: look at the examples and read the source ;-). This might give you a feeling of how stuff works and you can see how some patterns can be implemented.

예제를 먼저 읽으세요. 그게 더 쉽습니다.

Abstract (개요, 길지만 한 줄 요약 가능)

skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position. All you need to do is define key frames for each element at certain points in top scroll offset.

Other libraries require you to write JavaScript in order to define your animations. This introduces two main problems:

• Animation and element are not at one place. In order to find out if any animations are defined for a given element, you have to scroll through many (sometimes thousands) of lines of JavaScript.
• You have to learn a new syntax which is often very verbose and limited at the same time.

With skrollr, you put the definition of your key frames right where they belong (to the element) using a syntax you already know (plain CSS).

If you would rather have the keyframes inside a separate file, take a look at skrollr-stylesheets.

If you prefer to use JavaScript to define your animations make sure to take a look at ScrollMagic. It depends on both jQuery and the Greensock Animation Platform (GSAP) and gives you full control over every detail of your animations.

 

다른 어떠한 라이브러리나, 자바스크립트들에 비해 애니메이션의 모든 세부 사항을 완벽 제어 가능하다고 할 수 있습니다.