박스 hover시 줌효과를 주고 싶은데 어떻게해야 할까요...ㅜㅜ??
본문
안녕하세요 코드를 배운지 이제 막 5개월 된 신입입니다.
제가 홈페이지를 경험삼아 하나 만들어 보려하는데....
박스 hover시 background이미지를 addClass()를 주어 변경시키는데까지는 성공했는데
여기서 자연스럽게 변경하거나 줌효과를 주면서 이미지를 변경하고 싶습니다.
줌에 관련하여 이것저거 찾아보는데 마우스 휠이나 원클릭은 쉽게 찾았지만
hover를 찾을 수가 없어서요 ....
혹시 hover에는 따로 플러그인을 사용해야 하나요 ??
사용해야한다면 어떻게 해야 할까요 ㅠㅠ....?
이틀째 혼자 해보려 하는데 도저히 혼자서는 안될것 같아서요 ....
부디 좋은 조언 부탁드립니다 !!
----------------------------------------------------------------------------------
밑에는 제가 짠 제이쿼리 클래스 붙여다가 떼는거입니다...
여기서 추가적으로 뭔가 빨려들어가는 느낌을 원하는데.....
너무 부자연스럽네요....ㅠㅠ
자연스럽게 커지는 방법이나 이럴 경우 줌효과를 어떻게 줘야 하는지....
너무 알고싶습니다 ...ㅠㅠ
function gallery(){
var cnt=0, timer=0, delay=2000;
var $bglBox=$(".left"), $bgH2=$("#contents > div > h2"), $leftBg=$(".leftBg");
$bglBox.css({ display:"block"})
$(".leftWrap").hover(function(){
$bglBox.removeClass("on").css({ display:"block"});
$bglBox.addClass("on").delay().css({transform:"scale(1.3)", display:"block"}).fadeIn(1000);
},function(){
$bglBox.removeClass("on").css({transform:"scale(1.0)"}).fadeIn(1000)
})
}
답변 3
hover 는 단순히 이벤트일뿐이니 윗분처럼 hover 이벤트를 걸어주시기만 하면 됩니다. jquery 사용버전에 따라 이벤트 거는법이 조금씩 달라지니 사용하시는 버전에 맞추시면 됩니다.
참고로 jQuery 애니메이션이 CSS 애니메이션, 트랜지션보다 성능이 떨어지고 버벅입니다. 그래서 CSS 트랜지션, 애니메이션을 지원하는 브라우저에서는 CSS로 구현하고 해당 기능을 지원하지 않는 구형 브라우저들에서 꼭 필요한 기능이라고 생각될때만 jQuery등의 애니메이션으로 대체합니다.
또한, jQuery 같은 스크립트로 애니메이션을 구현할 생각이면 그것보다 애니메이션 성능이 좋은 다른 라이브러리들이 있습니다. velocity.js나 vue.js 같은 것들이 더 좋은 성능을 발휘합니다.
jquery의 fadein과 fadeout 기능을 써보는 건 어떨까요?^^
$(".leftWrap").hover(function(){
$bglBox.fadeIn( "slow", function() {
// Animation complete
});
});
scale 줌 효과를 css 에서 주고,
jquery 에서의 줌 효과는 빼는 방법이 효과가 있을수도 있습니다.
.leftBG:hover {
scale : (1.3)
}
