inflearn logo
강의

講義

知識共有

最高のフロントエンド CSS フレームワーク、UIkit

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

251

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

codingworks

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

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

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

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

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

6-6

0

6

0

Json 플러그인 사용시 variable collection 없음

0

14

1

배리어블 목록 없음

0

22

3

Token 등록 방법 문의

0

21

1

6-6 실습 문의

0

24

2

섹션5 노션링크 는 따로 없나요?

0

30

2

Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.

0

33

2

첨부자료 Part 4 코드 확인 부탁드리겠습니다.

0

29

2

선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서

0

24

1

퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.

0

54

2

claude plugin 방법 자세히 부탁드려요

0

40

2

강의에 적용한 스크립트를 받아 볼수 있을까요?

0

40

2

최근 코테, 과제 테스트 트렌드

0

68

2

노션 25 인터렉션 구현 파트 안 보입니다!

0

39

2

파트3 13F부분도 짤린거같은데 확인해주세요

0

39

2

Gemini로 진행가능 여부 궁금합니다.

0

60

2

모달과 light box차이점

1

489

1

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

1

372

1

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

1

653

1

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

1

393

1

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

1

408

1

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

2

218

1

안녕하세요

1

200

1

UIKIT snippets 설정

1

313

1