inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

299

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

18

1

모바일 로고 이미지가 날아갔어요...

0

48

2

사주 판매를 위해서, 사업자등록증 업종 추가해야하나요?

0

63

0

연애인 사주는 그냥 넣어도 상관없나요?

0

63

1

14강. 업체 연결이 필요하신 분은 개인톡으로 문의해주세요.

0

66

1

인프당 무당 캐릭터 뽑는 프롬프트

0

92

2

10월 15일 삭제예정 강의 문의

0

62

1

강의가 중복됐어요

0

72

1

결제가 이루어지는 방식에 대한 문의

0

91

1

강의제목에 10/15일 삭제라고 나와있는데,

0

65

1

선생님 강의자료를 받을수 없어요! 메일보냈어요.

0

73

2

1강 동영상 재생 오류

1

82

2

헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?

0

52

1

Composition단계에서 `Layer`는 누가 만드는지

0

58

1

Strict Mode 예시 질문!

0

75

2

해당 플러그인을 설치했는데 추가 지원 안될 수 있다고 다른 플러그인을 깔아보라는데 어떻게 해야하나여?

0

71

2

모달과 light box차이점

1

541

1

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

1

415

1

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

1

720

1

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

1

475

1

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

1

460

1

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

2

263

1

안녕하세요

1

258

1

UIKIT snippets 설정

1

371

1