스크립트 없이 만드는 자동 슬라이드 효과 /* transform:translateX */ [HTML+CSS{코남}]

Описание: #슬라이드 #코딩 #배너 #자동슬라이드 #퍼블리셔 #프론트앤드
안녕하세요 HTML과 CSS로 비쥬얼 아트 코딩을 지향하며 코딩하는 남자 코남입니다.

---
※ 동영상 내용 수정사항
white-space:nowrap; 속성을 읽을 때 노웝이라고 했는데, 이 부분은 노랩이라고 말하는게 맞습니다
---

이번에 준비한 컨텐츠는 자동슬라이드 효과 입니다.
클릭 슬라이드의 업그레이드 버전이라 HTML과 CSS가 거의 동일하지만 각 컨텐츠마다 중요하게 다룬 속성값이 다르니 이전 컨텐츠도 참조하시기 바랍니다 ( 클릭슬라이드 :    • 스크립트 없이 만드는 슬라이드 효과 [HTML+CSS{코남}]   )

이번 효과의 주요 속성은
① transform:translateX(value); - 클릭으로 위치전환을 위해
② left - 애니메이션으로 위치전환을 위해
입니다

클릭으로 화면전환되는 효과는 transform:translateX(); 로 만들고 자동슬라이드 되는 애니메이션은 left 속성값을 사용해서 만들었습니다.

※ 만약, 한가지 속성으로 클릭전환과 애니메이션을 만들게 되면 속성값이 자연스럽게 바뀌는게 아니고 리셋 전환되어 애니메이션없이 화면전환됩니다.

예제파일은 준비되는대로 블로그에 업로드하여 아래에 링크하도록 하겠습니다.

업로드된 파일은 스크린이 2개짜리 스크린이 3개짜리 스크린이 4개 짜리로 각각 키프레임
짜여진 소스를 보실 수 있습니다.

시청해주셔서 감사합니다
앞으로도 멋진 효과를 준비해보도록 하겠습니다

-
background music : https://www.bensound.com
-
본 강좌가 도움이 되셨다면
좋아요와 구독하기 부탁드립니다.
문의사항은 이메일로 보내주셔도 됩니다.
-
B/블로그 : https://blog.naver.com/co-nam/2221982...
E/이메일 : [email protected]