일상, 그리고 휴식

jQuery animate()를 이용한 헤더 navigation 만들기 오늘은 jQuery effects 중 animate()를 이용한 헤더 부분의 navigation bar를 제작해보자.스크롤을 내렸을 때 navigation bar에 효과를 주려고 한다. 먼저 html, css로 간단하게 header 부분의 navigation bar를 만들어보자. 12345678910111213141516171819202122232425262728293031body{ height: 2000px;}#header { width: 100%; height: 45px; background:#cdd;}div{ float: left; padding: 12px 20px; letter-spacing: 2px;} HOME MYHOME ..

자신의 스킬이 어느 정도인지를 나타내는 이른바 스킬바(Skill-bar)를 한 번 만들어보자. 우선 기본적인 bar를 구성해보자. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 Skill-barh1 { padding: 15px 0 30px 0;}.skill{ width: 980px;}.skill-title{ font-size: 20px;}.skill-bar-wrap{ width: 100%; background: #000;}.skill-bar1{ width: 90%; text-align: center; backgro..

1234567891011121314151617181920212223242526272829303132333435363738 jQuery mouseenter와 mouseleave이벤트 $(function(){ $(".img1").mouseenter(function(){ $(this).css({opacity : 0.5 , transition: "all .5s"}); }); }); Colored by Color Scriptercs 공부하다가 헷갈리는 부분이있어서 정리하는 폴더를 하나 만들었다. 위의 소스코드는 mouseenter 이벤트 시 작동되는 소스코드예제이다. mouse를 갖다 대니 위에처럼 사진이 뿌옇게 변했다. (opacity: 0.5)값을 넣어 주어서 변환된 것. 이제 mouse를 떼었을 때의 효과를..