Gif 위젯: "페인트 잇 블랙"

템플릿에는 gif.com.ai에서 도구 모음 앱을 만드는 데 필요한 모든 것이 포함되어 있습니다.


오늘 우리는 "Paint it Black"위젯을 분해할 것입니다. 이것은 도구 모음에 고정하는 매우 기본적인 위젯입니다. "Paint it Black"위젯의 템플릿은 이 게시물 하단에 포함되어 있습니다.



두 부분으로 나뉩니다.

1) JS 컨텍스트

JS는 단일 jquery 선택기로 구성됩니다.

도구 모음 버튼을 클릭할 때마다 코드가 실행되어 캔버스의 모든 항목이 회색조로 바뀝니다.

$('#gifcanvas > *').css('filter', 'grayscale(1)');

2) 설정 컨텍스트

설정에 title , description 및 mode 속성을 포함했습니다. 제목과 설명은 간단한 추가 사항입니다.

값이 mode 인 특수 pin 속성에 유의하십시오. 이 속성을 포함하고 값을 pin로 설정하면 이 항목이 도구 모음에 속해 있음을 gif 웹탑에 알립니다.

{
    title: "Paint it BLACK",
    description: "No colors anymore I want them to turn black. Turns everything in the gif canvas grayscale.",
    mode: "pin"
}

아래의 시작 템플릿으로 "Paint it Black"을 확인하세요.

템플릿 열기