inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

최고의 프론트엔드 CSS Frameworks, UIkit

Slider의 Content parallax 처음부터 애니메이션 작동되게 하는 법이 궁금해요

255

tyrant078

작성한 질문수 1

1

총 3장의 이미지를 넣어서 parallax 로 h2는 위에서 아래로 텍스트가 내려오고 p는 아래에서 위로 텍스트가 올라오는 효과를 넣은
슬라이드를 만들었는데요
이 효과가 맨 처음 화면 뜬 상황에서는 작동이 안되고 꼭 한번 슬라이드가 실행된 후에야 작동이 되더라구요
처음 화면 떴을때부터 텍스트 애니메이션이 작동되게 하는 그런 방법이 궁금합니다.
 
 
 
<div class="uk-position-relative uk-visible-toggle uk-light " tabindex="-1" uk-slideshow="animation: fade; autoplay: true; autoplay-interval: 3000;  ">

    <ul class="myslide uk-slideshow-items uk-grid-match" uk-height-viewport="min-height: 300">
     
      <li>
        <img src="images/image01.jpg" uk-cover>
        <div class="uk-position-center uk-position-small uk-text-center">
          <h2 uk-slideshow-parallax="y: -150,0,0; opacity: 1,1,0">Heading</h2>
          <p uk-slideshow-parallax="y: 100,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
        </div>
      </li>
      <li>
        <img src="images/image02.jpg" uk-cover>
        <div class="uk-position-center uk-position-small uk-text-center">
          <h2 uk-slideshow-parallax="y: -150,0,0; opacity: 1,1,0">Heading</h2>
          <p uk-slideshow-parallax="y: 100,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
        </div>
      </li>
      <li>
        <img src="images/image03.jpg" uk-cover>
        <div class="uk-position-center uk-position-small uk-text-center">
          <h2 uk-slideshow-parallax="y: -150,0,0; opacity: 1,1,0">Heading</h2>
          <p uk-slideshow-parallax="y: 100,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
        </div>
      </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous
      uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next
      uk-slideshow-item="next"></a>

  </div>

uikit HTML/CSS 포트폴리오

답변 1

0

코딩웍스(Coding Works)

개인적인 일로 답변이 늦었습니다. 양해 바랍니다.

uikit에서 parallax 부분은 강의에 넣지 않은건 저도 쉽게 이해가 안되는 부분이 있었고 이걸 강의로 담기가 좀 어렵다는 생각 때문이었어요.

저도 사용할 때 기본적인 html 가지고와서 수정하는 방식으로 하거든요.

혹시 지금 부분이 중요하게 반드시 해결해야 하는 부분이라면 코드를 복사해서 올려주세요.

캡쳐 코드로는 에디터에 넣어서 볼 수가 없어서요.

강의를 다 듣고난 후

0

33

2

part3. spy 쪽 / part3,part4 강의자료

0

32

2

최종 코드

0

38

2

Open AI 결제

0

39

2

figma 파일을 받을 수가 없어요

0

48

1

다운로드 연결이 되지 않을 때는 어떻게 해야할까요?

0

36

1

Visual Studio Code 대신 Pycharm 써도 되나요?

0

42

2

커서, 클로드, 피그마는 모두 유료버전을 사용해야하나요?

0

55

1

구글 서치콘솔 도메인 소유권 확인 실패

0

37

2

antigravity로 하던 작업 이제 visual code로 하면 되는 거죠?

0

57

1

다음 강의 얼른 올려주세요

0

44

2

일반 강의와 차이점?

1

53

1

중요하진 않지만 설명하신부분에서 안된부분..

1

34

1

안녕하세요, 강좌 5의 피그마 파일은 어디서 볼 수 있나요?

0

65

2

stopPropagation()에 대해서 질문 있습니다.

0

49

2

뉴스페이퍼 싱글템플릿 모바일 화면 디자인 질문

0

41

2

모달과 light box차이점

1

496

1

부모요소에 uk-child-width-*

1

382

1

modal 유튜브 동영상 안들어가요

1

662

1

UIkit 라이트박스 반응형 질문드려요

1

406

1

강의 자료는 어디서 받나요?

1

413

1

아이콘 유니코드 넣는거 유뷰트에 강사님 강의가 있는 건가요 ??

2

221

1

안녕하세요

1

211

1

UIKIT snippets 설정

1

325

1