21.05.14 11:48 작성
·
399
0
greensock 홈페이지에서 번역기 돌려가며 찾아도보고
나름대로 구글검색도 해봤는데 잘 모르겠습니다.
현재 혼자 복습겸 이미지api를 이용해서 랜덤으로 이미지를 뿌려주고, 이미지에 마우스를 올릴시 css변경을 해주었습니다.
근데 다른 css는 먹는데 opacity값은 f12에서 확인해보면 적용이 안됩니다.
그러면 TweenMax에서 어떤식으로 해줘야할지 감이 잘 안잡힙니다 ㅠㅠ 도움 좀 부탁드려도될까요?
답변 2
1
지나가던 사람입니다.
소스코드를 본 적이 없어서 확실 하진 않은데
hover시 opacity: 1을 주시고 싶다는 뜻은
호버 하지 않았을 때에는 .image의 opacity가 0.9 ~ 0까지 의 숫자로
약간 불투명한 상태여야 하는것 아닌가 합니다.
opacity: 0은 불투명도가 낮아져서 아예 안보이는 상태로 만들겠다는 뜻이고
opacity: 1은 불투명도를 높여서 원본대로 보이겠다는 의미입니다.
그리고 0.1 / 0.2 / 0.3 / 0.4 ... 등등 소숫점은 0부터 1까지의 불투명도를 단계적으로 세세하게 조정해서 주기 위한 수치이구요.
이미 .image 선택자는 별도의 opcity속성값이 부여되지 않았기 때문에 기본적으로 opacity: 1의 상태입니다.
그런 .image선택자를 hover를 했을때 opacity: 1를 부여하신다면 이미 동일한 상태이기 때문에 변화가 없는것이구요.
.image { opacity: 0.5;}
.image:hover {opacity: 1;} 로 하시거나
---
.image {}에는 opacity값을 주지 않고 지금처럼 그대로 두시고
.image:hover {opacity: 0.5;} 정도로 변경해서 테스트 해보세용.
0
2021. 05. 14. 13:50
안녕하세요 질문자입니다.
css를 적용해봤는데 트윈맥스때문인지 opacity값만 적용이안되는 문제가있었습니다.
계속 삽질을하고 검색을 하며 아래 코드와같이 적용시켜서 해결했습니다.
이렇게 풀었습니다. 이 외의 더 좋은 방법 혹은 더 간단하게 구현하는 방법이있다면 의견주시면 정말 감사할것같습니다!
2021. 05. 14. 16:06
tweenMax를 사용하실거면 css에는 opacity 안 주셔도 됩니다.
tweenMax에서 autoAlpha만 사용하신다면 css로 해주셔도 될 것 같아요.
스크립트에서 제거를 하시고, 아래처럼 테스트해보세요
.image {
position: absolute;
cursor: pointer;
width: 110px;
height: 110px;
border-radius: 50%;
opacity: .5; <- 기본 값을 주세요
&:hover {
opacity: 1;
width: 300px;
height: 300px;
transition: all 0.3s ease-in-out
}
}
2021. 05. 14. 16:02
감사합니다 ^^