일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 해피씨지아이
- jquery
- #웹솔루션
- #cgimall
- 게시판
- #솔루션
- #image
- 솔루션
- 쇼핑몰
- #이미지
- #jQuery
- #happycgi
- 웹솔루션
- 사이트제작
- 홈페이지제작
- #홈페이지제작
- javascript
- happycgi
- #뉴스
- #동영상
- CSS
- 홈페이지
- php
- #쇼핑몰
- #CSS
- #업종별
- 해피CGI
- #해피CGI
- CGIMALL
- #홈페이지
- Today
- Total
목록#happycgi (1324)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
jQuery 를 이용하여 물파장 이펙트를 주는 플러그인 입니다. 사용방법은 매우 심플 합니다. # 라이브러리 호출 합니다. # 컨테이너를 만듭니다. # 스크립트를 실행 합니다. $(".full-landing-image").ripples({ resolution: 200, perturbance: .004, }); 한가지 아쉬운점은 데모 사이트는 멋지게 작동하지만 샘플 코드는 너무 심플한것 같습니다. 라이센스는 별도 안내가 안되어 있지만 코드힘에서 확인했을 때 이미지에 MIT 라이센스로 명시가 되어 있네요.
탭을 클릭하면 해당 탭의 컨텐츠가 슬라이딩 되면서 변경됩니다. css와 js 로 구현되어 있습니다. 해당 사이트에서 소스코드 확인 및 다운로드가 가능합니다. 첨부파일에서 소스를 다운로드 받으실 수 있습니다.
메뉴버튼을 클릭하면 사이드메뉴가 펼쳐집니다.(1차메뉴) 1차메뉴를 클릭하면 2차메뉴가 1차메뉴 위로 펼쳐집니다. 이전메뉴를 볼려면 메뉴버튼을 클릭하면 이전메뉴로 돌아갑니다. 해당 사이트에서 소스확인 및 소스파일을 다운로드 받을 수 있습니다. 또는 첨부파일을 통해 소스파일을 다운로드 받을 수 있습니다.
간단하지만, 유용한 input 버튼 css 입니다. 기본 시스템 input 버튼이 아닌 디자인을 하기 위한 기본적인 소스이며, 간단한 css와 javascript로 구현이 가능합니다. 별도의 프로그램 작업없이도 디자이너가 사용이 가능합니다.
사이드에서 1차 메뉴 마우스 오버시 2차 메뉴가 나오는 jQuery 높이는 1차 메뉴 영역 높이에 맞춰서 나옵니다. CSS내 2차메뉴 좌우 위치값과 스크립트내 좌우 위치값을 변경하시면 오른쪽에서 나오는 메뉴로도 변경이 가능하며, 나오는 애니메니션 속도 설정도 가능합니다. 가장 기본적이지만, 활용도가 높은 소스입니다.
위 상태에서 배경색상 및 폰트 색상을 변경할 수 있으며 아래와 같이 대문자, 소문자로 나뉘어 등록할 경우 같은 글자지만 전혀 다른 문자로 표현되어 출력됩니다. 위 아이콘은 다운로드도 받을 수 있습니다. 신기하고 재미있긴한데 어떻게 이용할지 고민이되네요.^^ 이런 시스템도 있구나하고 한번 구경해보시기 바랍니다.
무료 아이콘 및 백터이미지, 음원 파일등 다양한 콘텐츠를 무료로 이용이 가능한 icons8 입니다. 원하는 아이콘을 검색하면 위 화면처럼 종류별로 아이콘을 확인할 수 있으며, 검색된 아이콘에서 style 로 내가 원하는 리소스를 비교적 정확하게 검색할 수 있습니다. 검색된 아이콘은 클릭시 다운로드 및 소스를 이용하여 SVG 형태로 이용도 가능합니다. 이렇게 편리하게 이용이 가능한 무료 아이콘 사이트인데 모든것이 무료냐? 그건 아닙니다.^^ icons8 이미지를 무료로 이용을 하시는 경우 적용할 홈페이지내에 해당 사이트의 출처를 표시해두셔야 문제가 되지 않는다고 합니다. 이외에도 모바일, 오프소스 상에서도 이용시 출처를 남겨야 합니다. 또한 무료버전일 경우 받을 수 있는 형태가 PNG, ico 파일 2가지..
화면을 스크롤하면 텍스트가 우측으로 이동되며 이미지를 가로지르는 듯한 효과를 보여줍니다. 홈페이지, 첨부파일을 확인하시면 사용된 소스를 확인하실 수 있습니다. [html] 기본 html 소스에서 배경이미지와, 동일한 텍스트 2개를 만들어 줍니다. [style] position, overflow, z-index 스타일을 설정하여 지나가는 텍스트 > 이미지 > 이미지 안 텍스트 가 출력되도록 조정합니다. [script] 스크롤시 텍스트를 이동해주는 스크립트 소스입니다. 본 소스를 상단이 아닌 html 하단에 추가하셔야 작동됩니다. 소스를 참고하셔서 응용하여 다양하게 적용해보세요 ^^
CSS만으로 화살표 아이콘을 만들어 볼 수 있습니다. 홈페이지, 첨부파일에서 3가지의 화살표 스타일을 확인할 수 있으며 적용해서 사용해보세요 ^^ 화살표 모양은 border 스타일로 표현되었으며, 전체적인 색상은 *에 지정된 color 값으로 변경하실 수 있습니다. [첫번째 스타일] - 기본 style 소스 [두번째 스타일] - 기본 style 소스 [세번째 스타일] - 기본 style 소스
Jquery stop()메서드는 현재 실행중인 애니메이션(모션)을 필요에 의해서 정지를 시킬때 사용하때 주로 사용이 됩니다. $(선택자 ).stop( stopAll, goToEnd ); 첫번째 인수는 대기열에 등록되어 있는 모든 모션을 중지할지를 선택하는 옵션입니다. 기본은 false이며 두번재 인수는 현재 실행되고 있는 모션을 중지할지를 여부를 선택합니다. 기본은 false입니다. 자세한 예제는 링크를 통해서 확인하실 수 있습니다. https://www.w3schools.com/jquery/jquery_stop.asp