음악, 삶, 개발

popmotion.io Popmotion: The animator's JavaScript toolbox Quick start import { animate } from "popmotion" animate({ from: 0, to: 100, onUpdate: latest => console.log(latest) }) Animation animate animate performs a keyframes or spring animation. import { animate } from "popmotion" animate({ from: 0, to: 100, onUpd popmotion.io www.npmjs.com/package/popmotion npm install popmotion < 용도와..

MDN : preserveAspectRatio stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container 복잡한 모양을 순수 CSS 에서 만들어내는것은 꽤나 고통스러운일이다. 따라서 SVG 를 HTML 에서 사용하는 방법을 다루어보고자한다. 나는 Vue 를 사용하고있기때문에, Vue 에서 사용법을 다루겠다. 1. 일러스트레이터에서 Cmd + C (복사) ---> VSCode 에서 Cmd + V (붙여넣기) 위와 같이 일러스트레이터에서 VScode 로 복사 붙여넣기를 할수있다. 이때 중요한것은 독립된 .vue 파일을 만들고 안에 붙여넣기하는것이다. 2. svg 안에 style 태그안에 내..

developer.mozilla.org/en-US/docs/Web/CSS/filter css-tricks.com/almanac/properties/f/filter/ CSS 에는 해당 요소에 먹일수있는 filter 속성이 있다. 이 filter 의 파라미터들은 라이트룸에서 사용하는것과 동일하다고 생각하며 된다. 하나씩 살펴보자. div { filter: blur(50px); } div { filter: brightness(0.5); } brightness 는 0 이 되면 검정색이 되고, 1이 되면 background-color 색이 된다. div { filter: contrast(50%); } contrast 는 사진 보정할때 contrast 를 생각하면 된다. constrast 값 10..

.parent-setting { perspective : 1000px; } .child-setting { animation : flip 1.5s infinite linear normal; } @keyframes flip { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); } }

CSS 에서 @keyframes 속성을 정의하면 위와 같이 애니메이션을 만들어낼수있다. 이 애니메이션은 css 속성들의 특정한 시간안에 전환 + 반복이다. @keyframes 속성을 활용하는것은 mouse 와 JS 를 통해 연동하기전에, 무언가를 프로토타이핑하기에도 유용하다. @keyframes 를 정의하는 방법은 2가지가 있다. 먼저 시작과 끝을 정하는 방법이다. @keyframes 내가정하는애니메이션명 { from { /* 시작점의 여러 속성 값들 */ } to { /* 끝점의 여러 속성 값들 */ } } 만약 여러 단계의 애니메이션을 가지고싶다면 아래와 같이 정의한다. @keyframes 내가정하는애니메이션명 { 0% { /* 시간의 0% 에서 일어날 일 */ } 50% { /* 시간의 50% 에서..

codepen.io/depy/pen/amoXGB stackoverflow.com/questions/24344859/html5-canvas-create-fading-trail-from-object www.growingwiththeweb.com/2012/10/creating-trail-effect-with-canvas.html

css-tricks.com/the-shapes-of-css/ developer.mozilla.org/ko/docs/Web/CSS/::after 1. :before, :after 2. border-left, border-right, border-bottom, border-top 3. transform 4. transform-origin

developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient() 아래 > #g { background: linear-gradient(red, blue); }

developer.mozilla.org/ko/docs/Web/CSS/clip-path stackoverflow.com/questions/7324722/cut-corners-using-css https://css-tricks.com/almanac/properties/c/clip-path/ codepen.io/stoumann/pen/abZxoOM css-tricks.com/animating-with-clip-path/ CSS 의 clip-path 속성을 정의하게되면, 요소의 일부분을 잘라낼수있다. div { clip-path : polygon(0 0, 0 100%, 100% 100%, 100% 55%, 55% 0); } 이 clip-path 로 잘린 부분은 당연히 event 리스너가 작동하..