inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

animation transition

285

air_guri

작성한 질문수 24

1

선생님 여쭤볼게 있어서 글을 남기게 되었습니다.

큰 테두리를 div라고 했을때 overflow: hidden을 준 다음 이미지에다가도 animation속성을 줘서 y축을 변경해 슬롯머신처럼 작업을 해보고 싶습니다.

만약 이미지가 3개가 저렇게 있다는 가정하에 한쪽방향으로 쭉 돌아가도록 하고 싶은데 이미지가 3개라 한쪽방향으로 전환하면 3개가 끝이라 연속적인 느낌이 안들어서 고민하다가 선생님께 조언을 듣고 싶습니다.

감사합니다.

<div class="wrap">

                <img src="">

                <img src="">

                <img src="">

</div> --wrap

HTML/CSS jquery

답변 1

0

코딩웍스(Coding Works)

이건 순수 CSS로 만들기 어렵습니다.

모양은 되지만 3번에서 1번으로 바로 이어지게 하는게 어렵습니다.

어렵다는건 가능은 하다는건데 방법을 아는건 아니고... 저도 해본적은 없습니다. 3번에서 다시 1번으로 돌아가려면 제이쿼리 또는 플러그인을 활용하셔야 합니다.

Slick 슬라이더, Swiper 슬라이더, UIkit 슬라이더를 사용하세요.

0

air_guri

제가 설명을 잘못했네요 선생님

background 이미지로 넣은 다음에 애니메이션으로 백그라운드 포지션 조절해서 작업했습니다.

답변 감사합니당!!

class 값 한 번에 부여하는법

2

95

1

@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.

1

79

1

div#css-checker-widget의 해결방

1

71

2

input의 포커스되었을때 검정선이 사라지지 않아요

0

94

2

강의듣는법

1

86

1

아코디언 만들기 100%이하의 화면으로 보았을때

1

75

2

input checked 질문합니다.

0

81

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

152

2

Part 1 영상 안나옵니다

1

97

1

제이쿼리 작동이 안됩니다

1

211

3

강의 내용 질문있습니다.

1

128

2

일정 부분만 주석하는 방법

1

222

2

폰트어썸

1

144

2

인접선택자에 대한 질문드립니다!

1

135

2

delay 적용 안됨

1

137

1

rotateY(360deg)가 적용이 안됩니다!

1

190

2

세로이동할때 height값

1

142

2

폰트어썸이 안되요..

1

504

2

화면 정중앙에 오게끔 할수있나요?

1

175

1

어코디언 네비게이션 중

1

127

1

라이브서버 문제

1

241

2

넷플릭스 어코디언 예제 질문

1

107

1

이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?

1

163

1

active 관련 질문

1

150

2