sasasak v1.0.1-0

SaSaSak.js

Element를 사사삭! 하고 지워보자

SaSaSak.js는 html2canvas 라이브러리를 사용하여 Element를 canvas로 만든 뒤 사사삭!하고 지웁니다

Notice

• scrollbar 문제

  페이지가 길어져서 scrollbar가 생기면 canvas가 그려질 때 scrollbar의 크기만큼 밀리는 현상이 발생합니다.

  이 문제를 해결하기 위해 인스턴스를 생성할 때 document.body의 overflow를 hidden으로 변경하였다가 canvas가 그려지면 overflow를 지워주고 있습니다.

  document.body에 overflow를 변경하고 싶으시면 Mounted 옵션을 사용해주세요.

Demo

• https://divlook.github.io/SaSaSak.js

Run

$ npm install --only=prod
$ npm run start

or

$ npm install
$ npm run dev

or

$ npm install
$ npm run build
$ npm run start

Use

Use module

Module 방식은 NodeJs를 사용한 컴파일이 필요합니다.컴파일 된 파일만 필요하신 분은 Use script tag 방식을 사용해주세요.

npm install sasasak

import SaSaSakJs from 'sasasak'

// or

var SaSaSakJs = require('sasasak').default

Use script tag

SaSaSak.js 파일을 다운로드 받은 후 dist/js/sasasak.min.js 파일을 찾습니다.

이 파일을 본인의 프로젝트 경로에 복사한 뒤 아래와 같이 사용합니다.

<script type="text/javascript" src="project_path/sasasak.min.js"></script>

<script>
    var sasasak = new SaSaSakJs(document.querySelector('.sasasak'), {
        wrapStyle: {
            display: 'inline-block',
            border: '4px solid #eee',
            backgroundColor: '#eee',
        },
    })

    document.querySelector('#btn').addEventListener('click', function() {
        sasasak.play()
    })
</script>

Guide

new SaSaSakJs(Element [, Options])

Options

Default wrapStyle

{
    "position": "relative"
}

Event

모든 이벤트는 정해진 상황에 발생하며 this를 통해 SaSaSakJs 인스턴스에 접근할 수 있습니다.

Mounted

mounted는 canvas가 완전히 그려진 후 실행됩니다.

mounted 안에서 this.play를 실행하면 canvas가 그려진 후 바로 애니메이션이 재생됩니다.

new SaSaSakJs(document.querySelector('.sasasak'), {
    mounted: function() {
        // this.play는 예제입니다. 원하는 내용으로 변경해주세요.
        this.play()
    },
})

Completed

play가 끝난 후 실행됩니다.

new SaSaSakJs(document.querySelector('.sasasak'), {
    completed: function() {
        // 원하는 내용을 입력해주세요.
        alert('애니메이션이 끝났습니다.')
    },
})

Property

Methods

sasasak.play()

애니메이션을 시작합니다

• Return value

  play에 실패하면 ErrorCode를 반환합니다.

  ErrorCode
  is_not_mounted	mounted가 되지 않음
  is_playing	이미 실행중
  is_complete	실행이 완료됨

var sasasak = new SaSaSakJs('.sasasak')
var btn = document.querySelector('button')

btn.addEventListener('click', function() {
    var errorCode = sasasak.play()

    switch (errorCode) {
        case 'is_not_mounted':
            alert('아직 준비되지 않았습니다.')
            break
        case 'is_playing':
            alert('실행중입니다.')
            break
        case 'is_complete':
            alert('실행이 완료되었습니다.')
            break
        default:
            alert('실행이 시작되었습니다.')
            break
    }
})

Browser compatibility

브라우저 호환성은 html2canvas와 동일하며 아직 테스트를 진행하지 않아서 정확하지 않을 수 있습니다.

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Edge
• Safari 6+