Scikit Web

https://mattboldt.github.io/typed.js/ Typed.js - Type your heart out mattboldt.github.io html5의 data 속성을 사용하여 설정해 놓은 문장을 자동으로 쓰고 지우는 라이브러리인 Typedjs를 사용한 예제입니다. Typedjs에서 사용가능한 애니메이션 효과는 공식 깃허브에서 확인해보실 수 있습니다. HTML 삽입 미리보기할 수 없는 소스

https://ko.reactjs.org/docs/hooks-custom.html 자신만의 Hook 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org 위의 예제를 바탕으로 실제로 사용하는 예제를 만들어 보았다 useCustomHook.tsx 파일을 생성한다, 여러개의 리턴을 주고 싶다면 {} 안에 선언해주면 된다 import { useCallback, useEffect, useState } from 'react'; const useCustomHook = () => { const [isOnline, setIsOnline] = useState(null); const onCallBack = useCallback(); ret..

데이터를 받는 쪽 Parent(부모)에서는 Child(자식)쪽에서 부터 보내지는 데이터를 받기 위해 이벤트 리스너를 등록해 놓고 있어야 한다 window.addEventListener('message', function (event) { console.log(event.data); }); 데이터를 보내는 쪽 Child(자식)에서는 window.parent.postMessage('Hello pop up post message', '*'); 개발을 하다보면 팝업을 띄워놓고 다른 사이트로 이동했다가 되돌아오거나 팝업을 띄운 사이트의 다른 페이지로 이동시키는 경우가 있는데 그 경우에는 window.opener 를 사용하면 된다 window.opener.parent.postMessage("Hello post me..

html5 글자 효과 라이브러리 중 lettering js 사용 예제 이다. Text를 span 단위로 글자를 나눠주는 게 특징이다. 그래서 소스코드를 보면 html5 영역에는 span이 없지만 class에 등록해 놓은 span class의 영향을 받는 것을 확인할 수 있다. HTML 삽입 미리보기할 수 없는 소스

명언들을 자동으로 재생하는 예제 입니다. jQuery 와 animate.css를 사용하였으며 animate.css 를 재 실행 하기 위해 글자를 새로 설정하고 너비를 읽는 것으로 변화를 감지하게 하여 새로운 애니메이션 이벤트가 실행 되도록 합니다. $("#quotes").text(quotes[idx]); $("#sources").text(sources[idx]); // triger $("#quotes").width(); $("#sources").width(); 사용 예 HTML 삽입 미리보기할 수 없는 소스