Scikit Web

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

데이터를 받는 쪽 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 삽입 미리보기할 수 없는 소스

홈페이지에 찾아온 사람들에게 보여줄 광고 팝업 에제 입니다. 정적인 위지에 띄우는 팝업 예제 입니다. CodePen이라는 글자를 클릭하시면 동작 확인을 더 원활하게 하실 수 있습니다. HTML 삽입 미리보기할 수 없는 소스

Bootstrap 기반 아코디언 메뉴 아이오닉 스타일 예제 입니다. HTML 삽입 미리보기할 수 없는 소스

Bootstrap에서 제공해주는 Bootstrap Icon을 사용하는 예제 입니다. 정의 되어 있는 아이콘들은 아래 사이트에서 확인가능합니다. https://icons.getbootstrap.com/ Bootstrap Icons 사이트에서는 CDN 주소를 제공하고 있습니다. Bootstrap Icons 라이브러리를 추가하고 i Tag를 선언해서 사용하는 법과 SVG를 선언하여 사용하는 방법 2가지를 제공하고 있습니다. i Tag를 선언해서 안보이는 아이콘들이 있는데.. SVG를 사용하는 방법으로 사용하시면 됩니다. HTML 삽입 미리보기할 수 없는 소스

html5 canvas tag를 사용하여 눈 내리는 효과 배경을 만드는 예제 입니다. 기본적으로 배경이 흰색으로 되어 있는데 이것은 cavas tag에 background-color 속성을 이용하여 변경 가능합니다. HTML 삽입 미리보기할 수 없는 소스