음악, 삶, 개발

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 < 용도와..

tagilog.tistory.com/539 인기 JavaScript 애니메이션 라이브러리 11 선 쓸만한 자바스크립트 라이브러리를 찾고 있던 중에 git 허브의 스타 순으로 작성된 아래의 목록을 찾을 수 있었습니다. 이 시간에서는 웹개발시에 유용하게 사용할 수 있는 자바스트립트 애니메 tagilog.tistory.com github.com/thednp/kute.js/wiki/How-To-Use thednp.github.io/kute.js/svgMorph.html svg path 를 다양한 방식으로 변형하게해주는 라이브러리이다. 가장 중요한 svg morph 기능을 가장 잘 표현해준다. 2015년에 시작하여.. 2021년 9월에 마지막으로 업데이트도있다. < 예..

앞서 일러스트레이서 만든 SVG 를 VSCode 로 Copy & Paste 하면 코드가 된다고 하였다. 하지만 꽤나 지저분해보이며, 쓸데없는 코드를 일일히 지워야하는 수고가 있다. 이를 해결해주는 사이트가 있다. jakearchibald.github.io/svgomg/ VSCode 에 복붙하기전에, 위 사이트에 붙여넣기를 하면 쑬데없는 코드를 지워주고, path 또한 간결하게 만들수있어서, 최종 용량이 줄어준다. 한가지 기억해야할것은, 이 사이트를 이용시 polygon 이 path 로 변환된다. style 링을 css 에서 할거라면, style 태그또한 삭제할수있다.

일러스트레이서의 Stroke 패널의 Align Stroke 메뉴는, Stroke 를 중심을 기준으로 커지게할지 (Center), 안쪽으로 커지게할지 (Inside), 바깥쪽으로 커지게할지 결정할수있다 (Outside). 이 기능을 사용할때 주의할점은 SVG 코드로 뽑아냈을때, polygon 인지 path 인지 달라진다는것이다. Align Stroke to Center : Align Stroke to Inside : Align Stroke to Outside : 위의 결과는 VSCode 에 각각을 붙여넣기해보면 확인할수있다. Align Stroke to Center 일때. Align Stroke to Inside 일때. Inside 나 Outside 는 결국 가운데가 뚤려있다. 따라서 보다시피 path 가..

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 태그안에 내..

stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter box-shadow 속성은 매우 비싼 속성이므로, box-shadow 자체에 바로 애니메이션을 걸어버리면 성능 저하가 발생할수있다. 따라서 ::before 와 ::after 에 미리 box-shadow 를 만들어놓고, 마우스가 hover 할때만 opacity 를 1로 주는것이 효과적이다. ::before 와 ::after 가 햇깔리는데 아래와 같은 문법이다. div {} div::before {} div:hover::before {} div::after {} div:hover::after {} 주의할것은, div::after:hove..

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..

wit.nts-corp.com/2017/06/05/4571

바로 코드를 보자. 원리는 6개의 div 를 만들어서 각 면을 css 로 만들어준다. 이때 사용하는것이 transform 의 rotate 와 translateZ 다. 그 다음 이 6개의 div 를 묶어주는 .cube 란 div 를 transform 으로 다시 회전시킨다. 이때 중요한것은, .cube 안에 transform-style 이 preserve-3d 여야한다. 또한 pespective 속성은 .parent 로 가거나, .cube 에 갈수잇는데, .cube 를 회전시킬것이기때문에, .parent 에 가는게 맞다.

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