부트 5 애니메이션

부트 애니메이션이란 무엇입니까?

미묘하고 매끄러운 MDB 애니메이션을 부트하면 UI와 상호 작용할 때 고유한 경험을 할 수 있습니다.수십 개의 애니메이션을 사용할 수 있고, 많은 사용자 정의와 실현 옵션도 있습니다

장치

수동 설치(지퍼 백)

이 구성 요소를 사용하려면 먼저 설치해야 합니다MDB 5 Free package.

MDB CLI

Dell Quick Start Tutorial 프로그램을 통해 MDB 5 및 MDB CLI의 잠재력을 파악하고 활용

NPM

선결 조건
프로젝트를 시작하기 전에 설치Node LTS (12.x.x recommended)를 확인하십시오.

장치
프로젝트에 MDB UI KIT를 설치하려면 터미널에서 다음 명령을 쉽게 입력합니다.

npm i mdb-ui-kit 

JS 모듈 가져오기
전체 라이브러리 또는 개별 모듈을 가져올 수 있습니다.

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module 

CSS 파일 가져오기
MDB 스타일시트를 가져오려면 다음 구문을 사용합니다.

@import '~mdb-ui-kit/css/mdb.min.css'; 

SCSS 모듈 가져오기
단일 SCSS 모듈을 가져올 수도 있습니다.이 동작을 정확하게 실행하기 위해서, node modules/mdb ui kit/src/scss 위치에서 프로젝트로 직접 복사하고, CSS 파일과 같은 방식으로 가져오는 것을 권장합니다.

웹 패키지 통합
DellStarter을 사용하면 Webpack을 기반으로 새 프로젝트를 작성하는 과정을 크게 가속화할 수 있습니다.

CDN

CDN 설치는 MDB UI KIT를 프로젝트와 통합하는 가장 간단한 방법 중 하나입니다.최신 컴파일된 JS 스크립트 태그와 CSS 링크 태그를 cdnjs에서 응용 프로그램으로 복사하기만 하면 됩니다.
만약 당신이 필요하다면, 글씨체가 정말 훌륭하고 로보토 글씨체를 추가하는 것을 잊지 마세요.다음은 샘플 코드입니다.

CSS

<!-- Font Awesome -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
  rel="stylesheet"
/>
<!-- Google Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  rel="stylesheet"
/>
<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css"
  rel="stylesheet"
/>

JS

<!-- MDB -->
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js"
></script>

개시하다

애니메이션을 실현하는 가장 간단한 방법은 데이터 mdb 속성을 사용하는 것이다.다음 예에서는 아이콘<i class="fas fa-car-side fa-3x"></i>을 사용하고 클릭할 때 애니메이션 효과를 낼 수 있도록 속성data-mdb-toggle="animation" data-mdb-animation-reset="true" data-mdb-animation="slide-out-right"을 추가합니다.data-mdb-toggle="animation"는 각 애니메이션의 필수 속성입니다.data-mdb-animation-reset="true" 애니메이션의 반복 가능 여부를 결정하는 데 사용data-mdb-animation="slide-right" 요소에 적용할 애니메이션을 지정합니다.demo section에서 사용 가능한 애니메이션을 찾을 수 있습니다.

<i
  data-mdb-toggle="animation"
  data-mdb-animation-reset="true"
  data-mdb-animation="slide-right"
  class="fas fa-car-side fa-3x"
></i>

응용 프로그램 프로그래밍 인터페이스

사용법

CSS 클래스를 통해

<i class="fas fa-car-side fa-3x animation slide-out-right"></i>

데이터 속성 통과하기

<i
  data-mdb-toggle="animation"
  data-mdb-animation="tada"
  data-mdb-animation-start="onLoad"
  class="fas fa-star fa-3x"
></i>

너는 웹 페이지에서 더 많은 용법 예시를 볼 수 있다📄 API 페이지 애니메이션하기

맞춤형 구성

멈추다data-mdb-animation-start="onHover"를 사용하여 마우스를 롤오버할 때 애니메이션을 시작합니다.

<i
  data-mdb-toggle="animation"
  data-mdb-animation-start="onHover"
  data-mdb-animation-reset="true"
  data-mdb-animation="slide-right"
  class="fas fa-car-side fa-3x"
></i>

스크롤에서 애니메이션 반복하기
스크롤할 때마다 애니메이션을 시작하려면 data-mdb-animation-on-scroll="repeat"를 사용합니다.

<i
  data-mdb-toggle="animation"
  data-mdb-animation-start="onScroll"
  data-mdb-animation-on-scroll="repeat"
  data-mdb-animation="slide-in-left"
  class="fas fa-car-side fa-3x"
></i>

상영하다
애니메이션onScroll을 사용하는 경우 기본적으로 페이지를 로드할 때 모든 요소가 표시됩니다.그것들은 사라지고 첫 번째 두루마리 다음에 애니메이션을 시작합니다.설정data-mdb-animation-show-on-load="false"을 사용하여 이 설정을 변경할 수 있습니다.하지만 이는 SEO에게 부정적인 영향을 미칠 수 있다는 점에 유의하십시오.

<i
  data-mdb-toggle="animation"
  data-mdb-animation-start="onScroll"
  data-mdb-animation-on-scroll="repeat"
  data-mdb-animation="slide-in-left"
  class="fas fa-car-side fa-3x"
></i>

웹 사이트에서 더 많은 맞춤형 예시를 볼 수 있습니다📄 애니메이션 문서 페이지

주요 리소스

다음은 이 구성 요소를 사용할 수 있도록 저희가 준비한 자원입니다.

읽기📄 Animations tutorial & documentation<--여기서부터

당신의 프로젝트를 최대한 활용하기 위해서는 애니메이션과 관련된 다른 내용과 스타일 옵션도 익혀야 합니다.목록을 찾으려면 아래 부분을 참조하십시오.

미리 디자인된 내용과 스타일 요소를 📥 Starter Bootstrap 5 templates에 사용할 수 있습니다.

템플릿은 📦 Free UI Kit for Bootstrap 5의 일부입니다.

프로젝트를 완료하면 CLI를 사용하여 프로젝트를 게시할 수 있습니다💽 Free hosting (beta).

관련 컨텐트 및 스타일 옵션 및 기능

Theme

Background Image

Colors

Figures

Flags

Hover effects

Icons

Images

Masks

Shadows

Typography

Bootstrap 5 를 1.5시간 동안 배우기

추가 자원

학습 로드맵을 사용하여 네트워크 개발 학습:
🎓 Start Learning
저희 메일 리스트에 가입하여 개발자에게 전속 자원을 제공합니다
🎁 Get gifts
우리 개인 식당 단체에 가입하여 영감과 지역사회 체험을 얻다
👨‍👩‍👧‍👦 Ask to join
GitHub에서 STAR가 포함된 오픈 소스 패키지 생성 지원