inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

273

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

5

1

13. (App 2) 기본기 훈련 에서

0

12

1

17강 강의에 목데이터 첨부파일이 없습니다.

2

16

2

2. 어떤 도구를 사용하는 것이 가장 유리할까? 강의 중

0

15

1

11차시 Antigravity IDE 설치 후

0

17

1

처음 에이전트 설정을 잘못 했을 경우 수정 하는 방법

0

15

1

5,6,7,8 내용이 없어요

0

15

1

푸터에 있는 카테고리 폰트 컬러 어떻게 바꾸나요?

0

27

1

장치 의존성과 CSR

0

30

1

순수 함수 / 순수 컴포넌트

0

22

1

css box-sizing 관련 질문

0

33

2

여태 만들던걸 다른 도메인으로 옮길 수도 있을까요?

0

25

1

node.js 설치 (LTS버전)

0

29

1

Cursor & Antigravity 소개 및 설치

0

33

2

뉴스페이퍼 테마 관련

0

35

1

지우지 말아야할걸 지운상태로 저장해버렸어요....

0

34

1

모달과 light box차이점

1

517

1

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

1

399

1

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

1

688

1

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

1

447

1

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

1

434

1

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

2

239

1

안녕하세요

1

233

1

UIKIT snippets 설정

1

349

1