목록웹디자인 고급/HTML5 (21)

Scikit Web

013 - 유투브 배경 만들기 - YTPlayer

유튜브 영상으로 배경을 만들어주는 라이브러리인 YTPlayer를 사용하는 예제 입니다. https://github.com/pupunzi/jquery.mb.YTPlayer 에서 사용 가능한 많은 옵션들을 확인할 수 있습니다. GitHub - pupunzi/jquery.mb.YTPlayer: use a custom yutube player for a video as background on jQuery framework use a custom yutube player for a video as background on jQuery framework - GitHub - pupunzi/jquery.mb.YTPlayer: use a custom yutube player for a video as backgroun..
웹디자인 고급/HTML5 2022. 5. 30. 20:46
012 - 3D Text 마퀴(marquee)

htm5 에서는 text를 간단하게 움직이는 효과를 주는 marquee 라는 테그가 있습니다. 해당 예제는 marquee tag를 사용하지 않고 css 에 있는 속성으로 구현되어 있는 예제 입니다 HTML 삽입 미리보기할 수 없는 소스
웹디자인 고급/HTML5 2022. 5. 29. 12:57
011 - 글자에 무지개 효과 애니메이션 적용

CSS에 있는 linear-gradient 효과를 이용하여 글자에 무지개 효과는 넣는 예제 입니다. 텍스트가 무조건 대문자로 보이게 text-transform: uppercase; 라는 속성도 적용되어 있습니다. HTML 삽입 미리보기할 수 없는 소스
웹디자인 고급/HTML5 2022. 5. 28. 09:21
010 - 마우스 따라다니는 효과 TweenMax

html5 에서 마우스를 따라다는 효과를 만들 수 있는 라이브러리 입니다. TweenMax 라는 라이브러리 이며 아래와 같이 사용 할 수 있습니다. 사용 하고 싶은 영역에 position: absolute; 를 선언하는 것이 중요합니다. 또는 position: fixed; 를 사용하여 선언되어야 합니다. HTML 삽입 미리보기할 수 없는 소스
웹디자인 고급/HTML5 2022. 5. 26. 21:15
009 - 달력(풀 캘린더 v5) 자바스크립트 라이브러리

https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullcalendar.io 자바스크립트로 되어 있는 달력 라이브러리입니다. 한국에 최적화 해서 쓸려면 조금더 옵션을 손보고 써야 되지만 기본적으로 제공해주는 기능이 가장 훌륭한 라이브러리 라고 생각합니다. HTML 삽입 미리보기할 수 없는 소스
웹디자인 고급/HTML5 2022. 5. 23. 21:14
008 - 애니메이션 배경 만들기 TS Particle

화려하게 움직이는 모션이 있는 배경 만드는 예제입니다 사용된 라이브러리는 tsparticle 이라는 라이브러리 입니다. jquery가 필수적으로 필요한 라이브러리 입니다. HTML 삽입 미리보기할 수 없는 소스
웹디자인 고급/HTML5 2022. 5. 19. 21:56
007 - Canvas Tree Fractal

https://curran.github.io/HTML5Examples/ https://curran.github.io/HTML5Examples/ HTML5 Canvas Code Examples Hello Canvas run Drawing a blue rectangle. This example demonstrates: Getting the canvas 2D context Setting the fill style filling a rectangle using the Canvas pixel coordinate space Smiley Face run Drawing a smiley face. This ex curran.github.io 캔버스를 활용한 그림 효과 입니다. HTML 삽입 미리보기할 수 없는 소스
웹디자인 고급/HTML5 2022. 5. 12. 20:43
006 - 안드로이드 처럼 웹 디자인 하기(Material Design Kit)

구글 안드로이드에는 Material Design 이라는 것이 반영되어 있습니다. 이것은 https://material.io/ Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io 사이트에서 공식적으로 사용하는 방법 및 예제가 있습니다. 웹용으로는 모바일보단 Component 가 적지만 Material Design 을 기반으로 만들어진 무료 템플릿도 많이 있어서 참고하시어 사용하시면 됩니다. 다음 예제는 Material ..
웹디자인 고급/HTML5 2022. 5. 9. 21:19
이전 Prev 1 2 3 Next 다음