inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

268

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 가지고와서 수정하는 방식으로 하거든요.

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

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

class 이름을 section__title이라고 짓는 것에 대해서

0

3

1

수업자료와 노션 공유 문제

0

18

3

'CSS Level 3: grid'의 정리본 PDF도 올려주시면 좋을 듯 합니다.

0

54

2

경력기술서는 어떤 방향이 좋을까요?

0

52

2

왜 https://via.placeholder.com/150 등 링크가 연결이 안되나요?

0

74

3

어플리케이션 실행 후 에러에 관하여 질문 드립니다.

2

60

2

수강연장 가능할까요...

0

54

2

26,27강 진행 간 노션, html 프롬프트 파일 불일치

0

67

3

<div id="banner">배너 이미지</div> 관련 질문

0

34

1

변수 설정 시에 질문입니다.

0

40

2

설치 및 설정 가이드 노션 자료는 없나요 ?

0

45

2

counter01.html은 어디있을까요?

1

30

1

수업자료 문의

0

39

2

강의를 다 듣고난 후

0

68

2

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

0

58

2

최종 코드

0

63

2

모달과 light box차이점

1

510

1

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

1

394

1

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

1

683

1

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

1

442

1

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

1

429

1

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

2

234

1

안녕하세요

1

226

1

UIKIT snippets 설정

1

340

1