이 사이트 원리는 어떤거죠
갈매빛
http://outdatedbrowser.com/en
마우스 오버할때 자기자신의 콘텐츠는 width값 늘어나고
다른오브젝트들은 위드가 줄어들고 left값도 같이 바뀌는건데
이거 아무리해도 원리를 제가 이해를 못하나
안되네요 ;
ㅁ ㅁ ㅁ ㅁ ㅁ
요렇게 있어서 각각 레프트값 0 20% 40% 60% 80% 이렇게 처리되어서
애니메이트로 비슷하게 구현할려고하거든요
애니메이트 width를 쓰면 좌우가 늘어나는게 아니라
우측만 늘어나던데
해당 사이트에서는 또 보면 가운데 항목은 마우스 오버한 콘텐츠가 좌우가 늘어나네요...어떤식으로 하면되는건지 힌트좀 얻을수있을까요
예를들어 마우스 오버할때 어떻게 줄어들고 다른 나머지값들은 어떻게 처리해라
이런식의 조언이요
고수님들 항상 감사드립니다 !!
-
나래
1번콘텐츠.mouseover(function (){
\t1번.css({left:1번left, width:1번 width});
\t2번.css({left:2번left, width:2번 width});
\t3번.css({left:3번left, width:3번 width});
\t4번.css({left:4번left, width:4번 width});
\t5번.css({left:5번left, width:5번 width});
});
2번콘텐츠.mouseover(f -
보미
네 그래서 코드자체를 앱솔로트로 각각 레프트 20%씩 대입해서 시작하였습니다...
-
Sweeety
그 계산을 잘 해야 될거 같습니다. 순간 아래로 내려가는 현상이 왜 생기는지 알거 같네요. 앱솔루트로 하면 좀 더 안전하게는 할수 있을거 같네요.
-
연하얀
그렇게되면 마지막 항목에서는 아래로 내려가는 현상(버그?) 이런게 보이드라구요.
보면 전체적으로 항목들이 20프로ㅆ기이라고하면 마우스를 오버한순간 전체적인 항목이 다시한번 작아지고 시작하드라구요 -
철죽
그냥 마우스 오버 했을때 넓이값만 바뀌면 될거 같은데요. 넓이값 변화에 애니메이션을 주는거죠.
윈도우창 넓이에 유동적인거 보니 100%프로 기준인거 같고, 넓이를 %로 잡아서 주시면 될거 같네요.
마우스가 올라간 객체는 넓게 나머지는 4등분해서 각각 애니메이션 주고요.