웹솔루션개발 25년 노하우! 해피CGI의 모든것

사진,목업,비디오,사운드,아이콘,폰트등 무료로 제공되고 있는 사이트를 한번에 모아서 보여주는 사이트입니다. 북마크에 보관되어 있는 사이트들을 찾아서 들어가도 되지만 한번에 모아서 보여주니 더 편리한거 같네요 사이트 제작에 많은 도움이 되길 바랍니다^^ ​

다운로드 받은 파일의 압축을 해제한 후, demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 축구 필드를 먼저 화면에 표시해주고, 각각의 포지션에 맞는 위치에 사람 그림이 표시가 되고, 해당 포지션에 배치된 선수가 누구인지를 서서히 표시해줍니다. 소스코드를 열어보면 1. jquery.js 와 soccerfield.js 를 로드를 먼저 합니다. 2. 선수의 이름과 포지션에 해당하는 데이터를 준비합니다. 3. 배경이 되는 축구 필드를 표시하는 스크립트를 실행하고, 해당 필드의 크기, 배경용 이미지 외 몇가지 옵션을 조절해서 아래와 같은 코드들을 작성하면 됩니다. 필드에 대한 옵션과, 선수에 대한 옵션이 나누어져 있네요. 모든 선수들이 필드에 표시된 이후에 작동 되는 콜백함수도 만들수..

HTML에서 둥근 범위 슬라이더를 만드는 jQuery 용 플러그인 입니다. 플러그인 "roundSlider"는 값 범위를 선택하기 위해 개발 되었습니다. 사용자 정의 가능한 원형 / 방사형 범위 슬라이더입니다. 터치, 마우스 휠 스크롤 및 키보드 화살표 키를 지원합니다. 또한 슬라이더는 순전히 CSS와 JavaScript로 빌드됩니다. 따라서 그래픽에 이미지를 사용하지 않습니다. 라이센스는 MIT 라이센스 입니다. 사용법은 아래와 같습니다. # 라이브러리를 호출 합니다. # 컨테이너를 생성 합니다. # 스크립트를 실행 합니다. $("#type").roundSlider();

jQuery 를 이용하여 물파장 이펙트를 주는 플러그인 입니다. 사용방법은 매우 심플 합니다. # 라이브러리 호출 합니다. # 컨테이너를 만듭니다. # 스크립트를 실행 합니다. $(".full-landing-image").ripples({ resolution: 200, perturbance: .004, }); 한가지 아쉬운점은 데모 사이트는 멋지게 작동하지만 샘플 코드는 너무 심플한것 같습니다. 라이센스는 별도 안내가 안되어 있지만 코드힘에서 확인했을 때 이미지에 MIT 라이센스로 명시가 되어 있네요.

탭을 클릭하면 해당 탭의 컨텐츠가 슬라이딩 되면서 변경됩니다. css와 js 로 구현되어 있습니다. 해당 사이트에서 소스코드 확인 및 다운로드가 가능합니다. 첨부파일에서 소스를 다운로드 받으실 수 있습니다.

사이드에서 1차 메뉴 마우스 오버시 2차 메뉴가 나오는 jQuery 높이는 1차 메뉴 영역 높이에 맞춰서 나옵니다. CSS내 2차메뉴 좌우 위치값과 스크립트내 좌우 위치값을 변경하시면 오른쪽에서 나오는 메뉴로도 변경이 가능하며, 나오는 애니메니션 속도 설정도 가능합니다. 가장 기본적이지만, 활용도가 높은 소스입니다.

Jquery stop()메서드는 현재 실행중인 애니메이션(모션)을 필요에 의해서 정지를 시킬때 사용하때 주로 사용이 됩니다. $(선택자 ).stop( stopAll, goToEnd ); 첫번째 인수는 대기열에 등록되어 있는 모든 모션을 중지할지를 선택하는 옵션입니다. 기본은 false이며 두번재 인수는 현재 실행되고 있는 모션을 중지할지를 여부를 선택합니다. 기본은 false입니다. 자세한 예제는 링크를 통해서 확인하실 수 있습니다. https://www.w3schools.com/jquery/jquery_stop.asp

모바일웹에서 숫자를 입력받기 위해서 좌/우로 슬라이드를 이용한 숫자 입력폼입니다. 다운로드 받은 파일의 압축을 해제한 후 index.html 파일을 웹브라우저로 열어보면 데모를 확인이 가능합니다. 좌,우로 스와이프를 이용해서 원하는 숫자를 선택할수 있고, 주변을 클릭하는 경우 원하는 숫자값을 직접 입력하는게 가능합니다. 사용하기 위한 방법은 위 설명을 참고해서 이용하는게 가능합니다. 숫자의 범위를 지정하거나, 어떤 단위로 증차감이 될런지를 지정하고, 사용자가 어떤 숫자를 선택했는지에 대한 콜백을 받아서 처리하는게 가능하네요.

* Typography Motion Effect - 글자와 이미지를 버튼클릭시 애니메이션 효과를 적용하여 보여줄 수 있습니다 * License - MIT LICENSE * 사용방법 첨부된 압축파일을 해제하고 폴더와 파일확인후 적용할 웹루트 디렉터리에 업로드 합니다 적용할 html 문서에 제공된 css 및 js 를 호출합니다 텍스트 및 이미지에 대한 애니메이션 효과를 버튼으로 교차하여 보여줄수 있게 class 선언 및 보여줘야될 문자와 이미지 태그를 삽입합니다 첨부된 압축파일안에 샘플 파일이 있으며 dist/index.html 파일을 참조하여 사이트에 적용하시면 좋을것으로 생각됩니다

* Magnetic Buttons - 호버 애니메이션이있는 작은 마그네틱 버튼입니다 마우스 포인터를 따라가면서 호버 애니메이션 효과를 보여줍니다 * License - MIT LICENSE * 사용방법 첨부된 압축파일을 해제하여 폴더와 파일 확인후 이용할 웹루트 디렉터리에 업로드 합니다 적용할 문서에 아래와 같이 css와 js 를 선언합니다 각 태그 영역의 class 선언 및 button 을 출력하게끔 코드를 삽입하고 원형 호버 애니메이션 효과를 넣기 위한 태그를 삽입합니다 적용시 아래와 같은 효과를 얻을 수 있으며 첨부된 파일 dist/index.html 파일에서도 샘플코들르 확인하실 수 있습니다