HTML5 – 페이지 2 – GIS Developer

DOM 요소에 CSS3의 animation-name을 지정해 애니메이션을 지정해 플레이하고 난 뒤, 다시 이 DOM 요소에 animation-name을 지정하면 애니메이션이 플레이 되지 않는다. 이에 대한 CSS와 JS 코드는 다음과 같다.

<style>

.blank {

animation-name: keyframes-blank;

animation-duration: 1s;

animation-iteration-count: 1;

}

@keyframes keyframes-blank {

0% {

opacity: 1;

transform: scale(1,1);

}

100% {

opacity: 0;

transform: scale(20,20);

}

</style>

var domCounting = document.querySelector("#dom_id");

domCounting.classList.remove("blank");

domCounting.classList.toggle("blank");

</script>

id가 dom_id인 DOM 객체에 blank 클래스를 처음 지정할때는 애니메이션이 발생하지만, 두번째부터는 애니메이션이 발생하지 않는다. 이럴 때는 23번과 24번 코드 사이에 아래의 코드를 추가한다.

1	domCounting.offsetWidth;

이건 Bug일까.. 아니면 의도된 것일까..

아래와 같은 DOM 계층이 있다고 하자.

<div>

</div>

위의 div에 아래와 같은 스타일을 적용해 안쪽 그림자(Inner Shadow) 효과를 넣고자 한다면..

div {

box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px inset;

}

div 요소의 자식인 img에 부모인 그림자 효과가 표시되어야 할 것이라고 기대했지만, 부모인 div의 그림자가 자식인 img에 가려져 아래와 같은 결과만을 볼 수 있다.

그렇다면 자식인 img에 의해 가려진 부모의 그림자를 들어내기 위해서 어떻게 해야할까? 부모의 그림자 역시 DOM 계층적으로 보면 또 하나의 공개되지 않은 DOM 요소이다. 이 그림자 DOM 요소가 img에 가려지므로 이 img의 z-index의 값과 z-index 속성값이 영향을 받도록 하기 위해 position 속성을 relative나 absolute로 지정하면 되는데, 아래와 같다.

img {

position: relative;

z-index: -1;

}

이제 그 결과를 보면, div 요소에 안쪽 그림자 효과가 반영되어, 좀더 입체적으로 이미지가 표현되는 것을 확인할 수 있다.

카테고리: HTML5

한번 적용된 CSS3 애니메이션(@keyframes)을 다시 적용하기

div 안의 img에 Inner Shadow 적용하기