[javascript] 요즘 웹페이지에서 영상 플레이시 스크롤이 플레이어를 지나가면 레이어팝업으로 따라가는 스크립트. 

페이스북에서도 영상 플레이하면 스크롤 되었을때 좌측 상단에 레이어로 따라오더라. 

JTBC 뉴스 페이지에서 그렇게 나오길래 보니 jwPlayer를 사용하고 있다. 

jQuery로 적용되어있다. document.ready 에서 window.on('scroll',fun~~~  로 스크롤시 고정 플레이어의 위치를 확인해서 플레이어의 top을 벗어나면 플레이어 사이즈를 변경하고 우측 하단에 bottom 100px, right 50px 주고 fixed 하는 것으로 되어있네. 멋짐. ㅎㅎ 

영상을 보면서 들으면 지문을 읽을 수 있어서 좋다. 

...

[javascript] Nuxt.js란 무엇인가?

가이드 : https://ko.nuxtjs.org/guide

GitHub : https://github.com/nuxt/nuxtjs.org

Nuxt.js란 무엇인가?

Nuxt.js는 범용 Vue.js 애플리케이션을 만들기 위한 프레임워크로, 주요 범위는 클라이언트/서버 배포를 추상화하면서 UI 렌더링 을 하는 것입니다.

우리의 목표는 Nuxt.js를 기반 프로젝트로 하거나 Node.js 기반의 프로젝트에 추가해서 사용할 수 있도록 충분히 유연한 프레임워크를 만드는 것입니다.

Nuxt.js는 더 즐거운 서버 사이드 렌더링 Vue.js 애플리케이션 개발을 위해 필요한 모든 설정들이 미리 준비되어 있습니다.

또한 우리는 nuxt generate 라고 부르는 배포 옵션을 제공하며, 이는 Vue.js 애플리케이션을 정적으로 생성 하는 옵션입니다. 이 옵션이 마이크로 서비스를 지향하는 웹 애플리케이션 개발의 다음 단계가 될 수 있다고 생각합니다.

Nuxt.js 프레임워크는 비동기 데이터, 미들웨어, 레이아웃 등과 같이 클라이언트 측과 서버 측 사이에서 개발하는데 도움되는 많은 기능을 제공합니다.

어떻게 동작합니까?

Nuxt.js는 훌륭한 웹 애플리케이션을 만들기 위해 아래의 기능들을 포함합니다:

• Vue 2
• Vue-Router
• Vuex (store 옵션을 사용할 때만 포함됩니다.)
• Vue-Meta

총 용량은 28kb min+gzip 밖에 되지 않습니다. (vuex를 포함하면 31kb입니다.)

vue-loader와 babel-loader와 함께 Webpack을 사용해서 코드를 묶고, 분할하며, 압축합니다.

특징

• Vue 파일 작성
• 코드 분할 자동화
• 서버 사이드 렌더링
• 비동기 데이터 기반의 강력한 라우팅 시스템
• 정적 파일 전송
• ES6/ES7 지원
• JS & CSS 코드 번들링 및 압축
• HTML head 태그 관리
• 개발 단계에서 핫 리로딩 사용하기
• 전 처리기 지원: SASS, LESS, Stylus 등

구조

아래의 구조는 <nuxt-link>를 서버가 호출하거나 이를 통해 사용자가 이동한 경우, nuxt.js가 어떻게 동작하는지를 보여줍니다:

...

[javascript] Vue.js - 트렌지션 상태

https://kr.vuejs.org/v2/guide/transitioning-state.html

Vue의 전환 시스템은 진입, 진출 및 목록을 애니메이션으로 만드는 많은 간단한 방법을 제공하지만 데이터 자체에 대한 애니메이션은 어떻게 해야할까요?

• 숫자와 계산
• 색 표시
• SVG노드의 위치
• 엘리먼트의 크기 및 기타 속성

이들 모두는 이미 원시 숫자로 저장되어 있거나 숫자로 변환 될 수 있습니다. 그렇게하면 Vue의 반응성 및 컴포넌트 시스템과 함께 써드파티 라이브러리를 사용하여 트윈 상태로 상태 변경 사항을 애니메이션으로 만들 수 있습니다.

...

[javascript] Vue.js - 전환효과

https://kr.vuejs.org/v2/guide/transitions.html

패키지 :  https://unpkg.com/vue

전환 효과

개요

Vue는 항목이 DOM에 삽입, 갱신 또는 제거 될 때 전환 효과를 적용하는 다양한 방법을 제공합니다. 여기에는 다음과 같은 도구가 포함됩니다.

• CSS 전환 및 애니메이션을 위한 클래스를 자동으로 적용합니다.
• Animate.css와 같은 타사 CSS 애니메이션 라이브러리 통합
• 전환 훅 중에 JavaScript를 사용하여 DOM을 직접 조작
• Velocity.js와 같은 써드파티 JavaScript 애니메이션 라이브러리 통합

이 페이지에서는 진입, 진출 및 목록 전환만 다루지만 다음 섹션에서는 전환 상태 관리를 볼 수 있습니다.

Vue.js 컴포넌트간-전환

Vue.js 리스트 전환

Vue.js 리스트-이동-전환

Vue.js - 리스트 진입/진출/이동 전환

Vue.js - 비틀거리는목록/동적전환

...

[javascript] Vue.js 응용 프로그램 디버깅을위한 Chrome devtools 확장 프로그램.

GitHub :  https://github.com/vuejs/vue-devtools

크롬브라우저에서 확장프로그램 들어간 다음 "vue.js" 로 검색하면 나옴. 설치!

vue-devtools

Important Usage Notes

1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.

2. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.

Works with vuex for time-travel debugging:

Installation

• Get the Chrome Extension

• Get the Firefox Addon

• Workaround for Safari

Manual Installation

Make sure you are using Node 6+ and NPM 3+

1. Clone this repo
2. npm install (Or yarn install if you are using yarn as the package manager)
3. npm run build
4. Open Chrome extension page
5. Check "developer mode"
6. Click "load unpacked extension", and choose shells/chrome.

Hacking

1. Clone this repo
2. npm install
3. npm run dev
4. A plain shell with a test app will be available at localhost:8080.

Testing as Firefox addon

1. Install web-ext

   $ npm install --global web-ext
   

   Or, for Yarn:

   $ yarn global add web-ext
   

   Also, make sure PATH is set up. Something like this in ~/.bash_profile:

   $ PATH=$PATH:$(yarn global bin)
   

2. Build and run in Firefox

   $ npm run build
   $ npm run run:firefox
   

   When using Yarn, just replace npm with yarn.

...

[javascript] Vue.js 컴포넌트 

https://kr.vuejs.org/v2/guide/components.html

...