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

마우스 호버시 다양한 효과를 한번에 확인 할 수 있습니다. SLIDE IN : 왼쪽에서 오른쪽으로 슬라이드 SLIDE UP : 아래쪽에 위로 슬라이드 SLIDE DOWN DELAY : 위에서 아래쪽으로 슬라이드 ( 아이콘은 출력시간 딜레이 효과 ) ROTATE : 꼭지점을 기준으로 회전하면서 출력 SCALE : 아이콘의 크기 변경 FLIP : 좌우 뒤집기 SKEW : 비스듬한 모양으로 변형 CORNER : 꼭지점에서 슬라이드 효과별 css 를 확인할 수 있습니다.

마우스 오버시 애니메이션 효과가 나타나는 버튼 5개 입니다. 자바스크립트를 사용하지 않고 CSS만으로 구현하였습니다. 홈페이지에 포인트를 주고 싶을때 여러가지 효과를 낼 수 있습니다. CSS에서 효과를 수정 가능합니다. 예를들어 첫번재 버튼에 마우스 오버시 나타나는 효과를 변경하려면 이 부분을 수정하면 됩니다.

Icon Hover Effect 에서는 css를 이용한 9가지의 hover 효과를 확인할 수 있습니다. 해당 효과는 아이콘 이미지가 아닌 아이콘이 출력되는 폰트를 사용하여 색상을 쉽게 변경하고 스타일을 주고 있습니다. 효과를 주는 기본 소스는 아래와 같습니다. 홈페이지에서 소스를 다운 받아 사용해보시거나 데모사이트에서 구현된 아이콘 hover효과를 확인하시고 참고 하실 수 있습니다.

css를 이용한 사각형태의 정형화된 마우스 오버효과가 아닌 다른 느낌의 마우스 오버효과 css를 이용하여, 대각선의 hover 효과를 만들어주며, 마우스 오버시 위아래로 효과가 적용됩니다. 새로운 마우스 오버 효과로 사이트에 포인트를 줄 수 있네요. ​ ​ ​ ​

위 영역에 마우스를 오버할 경우 부드럽게 좌우로 움직이는 animation 효과입니다. 소스상에서 @keyframes slide { 0% { left: 0; top: 0; } 50% { left: 30px; top: 0px; } 100% { left: 0; top: 0; } 위 keyframes 영역은 위 녹색 구영역의 움직임을 주기 위한 영역입니다. 0% 는 첫번째 위치, 50% 는 두번째 위치할 부분, 100% 는 되돌아올 위치를 말합니다. (되돌아올 위치를 100px 로 적용하면 한번더 좌측으로 이동되므로 되돌아올 위치가 아닌 다음번 이동될 위치입니다.) slide 라는 부분은 animation-name 으로 적용할 네이밍으로 아래 추가 설명으로 안내드리겠습니다. 본 소스에서는 라는 형태의 구조이며..

* Menu Hover Image Animation 이미지 호버 효과 (Image Reveal Hover Effects)를 제공하며 메뉴 항목을 가리킬 때 멋진 애니메이션으로 이미지를 보여줍니다. * License MIT License * 적용방법 첨부된 압축파일을 다운로드하여 적용할 웹루트 디렉터리에 압축을 해제하여 위치합니다 html 문서상에 상단에css 및 script 를 선언합니다 각 메뉴 및 이미지를 아래와 같이 선언합니다 (관련 class 참고 및 확인은 base.98fd6c19.css 에서 확인이 가능합니다) body 끝나는 지점 윗부분에 js 파일을 불러오도록 선언해줍니다 페이지 호출시 아래와 같은 메뉴효과를 확인할 수 있습니다 ​첨부된 압축파일을 해제하여 index.html 파일의 예제를..

위 이미지와 같이 마우스오버를 했을때 서서히 글자색이 채워지는 효과를 낼 수 있는 css 입니다. 각도 및 모양 조절에 따라 다양한 효과를 낼 수 있습니다. ^^ 첨부된 index.html 파일을 통해서 소스를 자세히 확인하실 수 있습니다. ​ ​ ​

비틀고 일그러뜨리는 링크 이펙트효과를 표현한 링크효과 입니다. 라인, 원, 네모등 다양한 왜곡 효과들을 확인하실 수 있으며 데모사이트에서 자료를 받아 확인하실 수 있습니다.

마우스의 이동방향에 따라 캡션이 열리는 방향이 달라집니다. 해당사이트에서 html, css, js 소스를 확인할 수있습니다.

카드형태의 정보출력시 반응형 마우스오버 효과입니다. 마우스 오버시 이펙트 css 만으로 작동 브라우저 크기에 따른 반응형 소스