키프레임, 애니메이션 속성 웹사이트 자동 슬라이드 배너 만들기
#웹사이트 #웹디자인 #슬라이드#자동슬라이드 #캐러셀 #HTML #CSS#키프레임 #애니메이션안녕하...
blog.naver.com
스크립트 없이 만드는 자동 슬라이드
input type="radio"
radio 타입의 input은 한번 체크되면 해제가 안되고,
같은 name을 가진 input들은 그룹을 묶은 것과 같이 하나만 체크된다.
input은 label과 함께 사용될 수 있다.
input에 id값을 주고, label의 for 속성에 해당 id값을 넣어주면
label을 클릭했을 때, input이 체크가 된다.
그래서 슬라이드 스크린 개수에 맞춰 input을 만들고
스크린 위에 label 버튼을 만들어 input에 연결해주면...
label을 클릭했을 때, 연결된 input이 체크되면서
css 선택자로 인해 체크된 input 아래 스크린의 위치가 바뀌도록 설정 가능 = 수동클릭 슬라이드
<스크린>
ul, li의 list 태그로 만든다.
부모 요소인 <ul>에 white-spce:nowrap; 속성값으로 자식요소들의 줄바뀜을 없앤다.
li가 width:100%이면 한개의 li가 한 화면에 보이는 것
+ <ul> 요소에 overflow:hidden; 값을 주면
영역밖으로 튀어나간 li들이 가려져
보여지는 영역 안에서만 움직이는 슬라이드 형태가 되는 것!
여기서
시간대 별로 진행하는 애니메이션을 만들어서
input이 체크될 때마다, 각 애니메이션이 작동되도록 하면...
클릭했을 때 화면 전환이 되고, 이후에 자동으로 넘어가는 슬라이드 완성 = 자동 슬라이드
여기서 중요한 속성 attribute는 left, transform:translateX();
자동슬라이드를 위해 키프레임을 만들 때, 사용하는게 left
left = 포지션 속성에 작동되는 위치 지정값.
시간의 흐름에 따라 왼쪽 위치가 바뀌는 값을 지정해 자동으로 슬라이드 되는 효과로 사용
<전체 HTML>
slidebox class를 갖고 있는 div로 전체 감싸줬고,
radio 속성의 input이 4개 있는데 input 한개가 한개의 슬라이드 스크린이다.
슬라이드의 첫 화면을 설정해주는 값으로 첫번째 input에 checked 속성을 넣어준다.
그 아래로 슬라이드 스크린을 위해 <ul>과 <li> 태그 활용
<li>은 장면의 개수이기 때문에 input 개수만큼 만든다.
<li> 안에 <div>로 2개의 라벨과 이미지를 넣어준다. -> 한개는 left 화살표, 한개는 right 화살표
이미지는 <a> 태그 활용했는데, 나중에 링크로 활용될 수 있기 때문
(이미지는 가로,세로 동일 사이즈 사용해야)
<전체 CSS>
1. 모양 만들기
RESET CSS : 모든 요소를 선택하는 * 로
브라우저에 설정된 모든 패딩과 마진을 없애준다.
ul,li의 기본 리스트스타일도 지워준다.
속성 선택자 name 값이 slide인 요소를 선택해서 display:none;으로 안보이게 설정해준다.
이 스타일로 인해 화면에서 input 이 안보이게 된다.
전체를 담고 있는 .slidebox를 선택해서
최대 가로 넓이를 지정하고, block요소를 가운데 정렬하도록 margin 위아래는 0, 좌우는 auto로 지정
슬라이드 박스 안에 있는 이미지에 대해
자신의 최대 가로 넓이를 갖도록 스타일을 주어, 자신의 넓이 이상으로 커지지 않고,
부모 크기에 맞춰 줄어드는 값을 주어, 반응형으로 사용할 수 있도록 한다.
ul에 준 .slidelist를 선택해서
자식요소의 줄바꿈을 없애고 빈공간을 없애기 위해 폰트사이즈 0을 준다.
이 영역을 벗어나면 가리워지도록 overflow:hidden; 값을 준다.
.slideitem 클래스를 선택해서
position:relative으로 absolute의 기준을 잡는 스타일을 준다.
display, vertical-align으로 세로정렬을 가운데로 맞춘다.
이 스타일로 인해 한개의 ui가 한개의 스크린 페이지가 된다.
또 자연스러운 스크린의 전환을 위해 transition 속성을 넣어준다.
좌우 방향버튼으로 사용할 label을 선택해 공통 스타일을 둔다.
position:absolute로 자율배치하는 값을 주었고, absolute의 우선순위는 기본값인 1을 주었다.
위로부터 50%지점, 세로크기의 반만 남겨 가운데에 위치하도록 한다.
20px의 패딩으로 버튼의 크기를 지정하고, 둥그런 버튼모양을 위해 boder-radius 값을 준다.
또 마우스가 올라가면 커서가 포인터로 바뀌도록 스타일을 주었다.
label 요소 중 .left 클래스가 있으면
왼쪽으로부터 20px 지점에 위치시키고,
왼쪽 화살표에 투명이미지를 배경이미지 속성으로 준다.
.right 클래스가 있으면
오른으로부터 20px 지점에 위치시키고,
오른쪽 화살표에 투명이미지를 배경이미지 속성으로 준다.
2. 수동 클릭 슬라이드 효과 설정
이제 좌우 버튼을 클릭하면 반응하도록 스타일을 만들어주자.
첫번째 input이 체크가 되면
input 아래에 있는 slidelist 안에 있는 slideitem 클래스를 선택해서
translateX(0); 값을 주어 첫번째 화면으로 이동되는 값을 넣어준다. 두번째 화면은 (-100%) 당기는 값을 주는 식.
3. 자동 슬라이드 효과 설정
먼저 keyframe을 만들어준다.
keyframe 이름은 slide01.
4개의 화면이 보이는 것이므로 25%로 나눠준다.
한페이지가 보여지는 시간과 페이지가 넘어가는 시간을 위해 사이사이에 2%를 제외한 구간을 넣어준다.
0에서 23% 까지는 첫번째 스크린
23%에서 25%는 두번째 위치로 이동
25%에서 48%까지는 두번째 스크린
첫번째 input이 체크되면
animation 속성으로 slide01 키프레임을 작동시키는데 0~100%까지 20초동안 진행되도록,
그리고 계속 반복되도록 만들어준다.
그런데 두번째 키프레임을 보면 75%에서 100%로 밀어주는 값을 주었다. why?
두번째 키프레임에서는 2번째 스크린이 기준으로
50%일 때, 네번째 스크린이 보이게 된다.
그 다음은 다시 첫번째 스크린으로 넘어가야하는데
그러려면 최초 좌표에서 오른쪽으로 +100만큼 밀어줘야하므로, 100%값을 주는 것.
이런식으로 계산해 값을 모두 넣어주어야 한다.
단점: 페이징 할 수 없음
좌우버튼을 스크린 밖으로 빼내어 사용할 수 없음. (자동슬라이드에 맞춰 좌우버튼도 바뀌어야 하므로)
오류: 자동스크린 효과로 다른 페이지로 넘어가면 이동이 안 먹을 수 있다....
css로만 자동 슬라이드 구현은 어렵다..omg