Sprites
사용할 이미지를 한 파일에 연달아 놓고, 필요한 부분만 사용하는 기법
이미지를 로딩할때 한번만 불러와서 재사용하는 방식을 통해 요청횟수를 최소화 하고 웹페이지 로딩속도를 향상하기 위해 사용한다.
css sprites generator 사이트들을 이용하여 sprites 이미지를 만들고 css코드도 가져올수 있다.
CSS Sprite Generator, Editor, and Code
예제
html
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
#next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">
</body>
</html>태그의 원하는 가로세로 길이를 만들고, 배경이미지를 불러와 내가 원하는 이미지가 보일때까지 위치를 조정한다.
예시는 1x1픽셀 이미지의 크기를 조정하여 배경이미지를 넣은 예제로, 이미지를 숨기는 기능까지 하고있다.
animation:
- @keyframes 아이디명 { }
from - to로 나눌수도 있고, 퍼센트로 나눠 각각 줄수도있다.``` @keyframes 애니메이션이름 { from{ 시작할때의 상태 } to{ 끝날때의 상태} } /*혹은*/ @keyframes 애니메이션이름 { 0%{ 시작할때의 상태 } 50%{ 중간의 상태} 100%{ 끝날때의 상태} } ```
W3Schools online HTML editor각각의 이미지를 사용하는 방법이 있고, Sptrites animation으로 만드는 방법이 있다 각각의 이미지를 활용하면 방법은 각 퍼센트마다 배경이미지를 지정하는 방법이고, 전환될때 페이드아웃 효과가 생기게 된다 Sptrites animation방식으로 만들면 페이드아웃 효과 없이 바로 전환된다. ---
이 시 속 대 무 반 모 ! - animation-name 이름
- animation-duration 시간 ( 5s, 60s 등)
- animation-timing-function 속도
-
ease; 빠른시작→보통속도→느린종료
-
linear; 일정한 진행
-
ease-in; 느린시작 → 보통속도 진행 및 종료
-
ease-out; 보통속도→종료할때만 느림
-
ease-in-out; 느리고→빠른 진행 →느려짐
-
cubic-bezier(n,n,n,n); 함수로 커스텀
→설정하기 어려우니 만드는 사이트를 활용하자.
-
- animation-delay 대기시간 (5s → 5초뒤 애니메이션 시작)
만약 -5를 주면 애니메이션이 5초부터 시작된다 - animation-iteration-count
반복회수. 기본값은 1회. 3; 5; 처럼 회수로 하거나 infinite를 이용하여 무한반복 하게 만든다. - animation-direction 재생방향
- nomal; 기본값. 정방향
- reverse; 역방향
- alternate; 와리가리
- alternate-reverse; 와리가리 역방향
- animation-fill-mode
- none 디폴트값.애니메이션의 시작과 끝에 @keyframes이 적용되지 않았을때의 모습이 나온다.
- forwards 마지막 장면을 계속 유지한다
- backwards @keyframes 의 to나 0에 시작하는 모습으로 시작하고, 끝나면 @keyframes이 없을때 모습으로 돌아간다.
- both
Sptrites animation
div{
animation:movie 5s steps(5) infinite
}
@keyframes movie {
to{background-positin:0;}
from{background-positin:-500px;}스프라이트 기법을 이용하여 각 프레임별로 해당하는 위치만 노출시켜 이미지를 만든다.
6컷으로 구성되어있다면 단계를 steps(6)을, from에는 총 넓이를 음수로 적어준다.
#prayman{
width:69px; height:93px; position:absolute; top:130px; left:475px;
background:url(img/prayman.png);
-webkit-animation:pray 0.8s steps(20) infinite;}
/*프레임0번에 해당하는 위치만 나오도록 만들고
이시단무순으로 입력한다*/
@-webkit-keyframes pray{
from{background-position: 0px;}
to{background-position: -1380px;}
}
/*마지막 프레임이 시작하는 위치를 입력한다*/animation: 이름 시간속도 대기시간 무한반복 반대 모드
이시단무를 필수로 적어주면 된다.
풀스택 국비수강중