~/work/other/smooth-zoom $ cat article.md
# Smooth Zoom

Smooth Zoom

Other · · 1분 읽기
Smooth Zoom

Medium이나 Google Photos처럼 이미지를 부드럽게 확대할 수 있게 하는 가벼운 자바스크립트 라이브러리입니다.

👀 Demo
Github

설치

npm install smooth-zoom

# or

yarn add smooth-zoom

브라우저 버전을 사용하시려면 건너뛰셔도 됩니다.

사용

<script src="https://cdn.jsdelivr.net/npm/smooth-zoom@latest/dist/zoom.min.js"></script>

<!-- or -->

<script src="node_modules/smooth-zoom/dist/zoom.min.js"></script>

브라우저 버전을 사용하시려면 위 cdn 링크를, npm 패키지를 설치하셨다면 아래 링크를 사용하실 수 있습니다.

브라우저 버전을 사용할 때 latest 버전을 불러오시면 업데이트가 한참 진행 중일 땐 최신 버전이 유지되지 않을 수 있습니다.
npmjs 에서 최신 버전을 확인하셔서 latest 대신 해당 버전 명을 넣으셔도 됩니다.

import Zoom from "smooth-zoom";

모듈로 가져오는 방법도 있습니다.

Zoom(".zoomable");

그 뒤 CSS 셀렉터를 넘기며 호출하시면 됩니다.
추후 React 등에서도 편하게 사용하실 수 있게 element를 넘기는 방법 등도 업데이트하도록 하겠습니다.

옵션

Zoom(".zoomable", {

    originalizer: (src) => src.replace(/-[0-9]+\.jpg/, ".jpg"),

    background: "auto",

});

originalizer

  • 타입 : (src: string) => string
  • 기본값 : (src) => src
  • 설명 : image-768x768.jpg를 image.jpg로 바꾸듯 이미지의 주소를 원본 주소로 바꾸기 위한 함수입니다.
(src) => `${src.replace(/\/(R|C)[0-9]+x[0-9]+\//, "R0x0")}?original`;

티스토리 예제

(src) => src.replace(/-[0-9]+x[0-9]+/, "");

워드프레스 예제

(src) => src.replace(/=w[0-9]+/, "=w0");

Google Photos 예제

background

  • 타입 : string
  • 기본값 : rgb(0, 0, 0)
  • 설명 : 이미지가 줌 인 되었을 때 배경에 나타나는 색상입니다. “auto“를 사용하시면 자동으로 이미지의 평균 색상으로 지정됩니다. CORS 설정이 되지 않은 외부 이미지는 기본값인 rgb(0, 0, 0) 값으로 지정되니 참고해주세요.
공유하기 X LinkedIn
~/comments $ tail -f comments.log
marshall@blog: ~/comments#comments
↳ 님에게 답글
내 아바타

— 작성한 댓글은 수정하거나 삭제할 수 없습니다 —

댓글을 불러오는 중...

Other 카테고리 관련 글

위 글이 유용하셨다면, 아래 글도 읽어보세요!

#ReactJS #아이유

About IU

소개 React.js와 친해지기 프로젝트 일환으로, 앞서 html, css, javascript로 제작한 트와이스 팬 페이지의 디자인을 기반으로 React로 아이유 팬 페이지를 제작했습니다.팬 페이지 만들 대상을 고민하다, 로고를 중심으로 Home, About / Discography, Filmography로 두 개씩 대칭을 맞출 수 있는 아이유를 선택했습니다. 앨범 데이터 JSON으로 작업하면서 양이 워낙 많아 괜히 했나 생각도 잠깐

·3분 read →
#JavaScript #infinite scroll

[JS] Infinite Scroll 플러그인

스크롤을 움직이거나 버튼을 클릭하면 다음 / 이전 페이지의 내용을 불러오는 플러그인입니다. 깃허브 데모 페이지Masonry 데모 설치 CDN &lt;!-- 압축 --&gt; &lt;script src=&quot;https://cdn.jsdelivr.net/gh/marshallku/infinite-scroll/dist/infiniteScroll.min.js&quot;&gt;&lt;/script&gt; &lt;!-- 원본 --&gt; &lt;script src=&quot;https://cdn.jsdelivr.net/gh/marshallku/infinite-scroll/dist/infiniteScroll.js&quot;&gt;&lt;/script&gt; 다운로드 infiniteScroll.min.js - 압축된 jsinfiniteScroll.js - 원본 js 시작하기 JS 파일 삽입 &lt;script src=&quot;파일/경로/infiniteScroll.js&quot;&gt;&lt;/script&gt; cdn을 사용하시면 cdn 경로를, 본인이 js 파일을 업로드해 사용하신다면 해당 경로를 script 태그에 넣어서 사이트에 삽입해주세요. 기본적인 HTML 구조 &lt;article id=&quot;container&quot;&gt; &lt;div class=&quot;item&quot;&gt;내용&lt;/div&gt;

·3분 read →
#확장 프로그램 #크롬 #TWICE New Tab

크롬 확장 프로그램 - TWICE New Tab

크롬 웹 스토어 링크 밋밋한 새 탭이 지겨워 만든 확장 프로그램입니다. 새 탭을 트와이스, 할 일 목록, 날씨, 포커스 타이머 등으로 채울 수 있습니다. 할 일 목록 (투 두 리스트) 좌측부터 북마크, 검색, D-day, 현재 날씨 대부분 설정에서 간단하게 사용자화가 가능합니다. 집중을 유지하기 위해, 집중할 시간을 설정하면 해당 시간 동안 유튜브 등의 사이트에 접속을 차단합니다.

·1분 read →