vue는 웹페이지 열기 비디오 코드를 구현합니다.-JS 튜토리얼-php.cn

vue는 웹페이지 열기 비디오 코드를 구현합니다.

小云云

풀어 주다： 2018-01-04 13:25:09

원래의

2532명이 탐색했습니다.

이 글은 웹페이지 오픈 영상을 만들기 위한 Vue의 예제 코드를 주로 소개하고 있으니, 필요한 친구들이 참고하시면 도움이 될 것 같습니다.

이 데모의 배경은 비디오이고 텍스트는 프린터 효과이며 텍스트를 입력할 때까지 버튼이 표시되지 않습니다. 버튼을 클릭하면 배경이 위쪽으로 축소되고 기본 홈페이지 구성 요소가 표시됩니다. 새로 만든 vue 프로젝트 목록입니다. vue 구성 요소 콘텐츠입니다.

회사 컴퓨터에는 gif 애니메이션이 없으므로 양해해 주시기 바랍니다.

원하시는 경우 데모 주소를 첨부하겠습니다.

저는 항상 웹페이지 시작 부분에 동영상이나 애니메이션이 있는 것을 좋아합니다. 저는 개인적으로 웹페이지 시작 애니메이션이 탐색을 안내하는 역할을 한다고 생각합니다. 웹 페이지 시작. 웹 사이트를 탐색하는 사용자에게는 좋은 시작이 많은 관심을 끄는 경우가 많습니다.

위 내용은 모두 말도 안되는 내용입니다. 웹페이지 열기 애니메이션은 모바일 단말기에서 널리 사용됩니다. 구체적인 작업은 짧은 책에서 업데이트됩니다. 오늘 우리는 Vue가 PC 측 웹 페이지의 오프닝 애니메이션을 만드는 방법에 대해 주로 이야기합니다.

vue 프로젝트 목록에는 src와 같은 레벨의 index.html이 있습니다. 여기서 주로 기사를 작성합니다.

1. 우선 Vue 렌더링 구성 요소는 이 홈페이지 색인을 기반으로 한다는 점을 이해해야 합니다. vue를 사용하여 웹 페이지를 열면 기본적으로 열리는 구성 요소가 있습니다. 자세히 설명하지 않았습니다. 우리가 해야 할 일은 이 구성 요소를 숨기는 것입니다. 그렇지 않으면 해당 콘텐츠가 비디오 위에 표시됩니다.

helloWorld.vue 구성 요소:

index.html의 helloWorld 구성 요소에서 hello

를 제거하기 전에 임시 저장을 위해 다른 컨테이너에 저장해야 합니다. 그렇지 않으면 복제도 가능합니다. (복제 코드는 시연되지 않으나 궁금한 사항이 있으면 댓글을 달거나 개인 메시지를 보낼 수 있습니다.) 임시 저장소의 목적은 나중에 이 노드를 페이지에 복원하는 것입니다.

2. 인덱스 페이지에서 직접 영상을 소개합니다. 이번 데모에서는 영상 플러그인을 직접 찾아 넣어보겠습니다. 이 단계는 매우 간단합니다. 정적 폴더에 static.

홈페이지의 스타일은 컴포넌트의 라벨 스타일에 직접적인 영향을 미치므로 플러그인 도입 시 스타일 조정에 주의하고 라벨을 직접 사용하여 스타일을 작성하는 것은 피하세요

3. 배경이 이미 동영상인 경우 미학적 관점에서 볼 때 각도 측면에서 웹 페이지에 몇 단어만 추가하면 너무 많은 스타일이 지저분해지고 과장됩니다. 이 데모에서는 typewrite.js라는 플러그인도 사용합니다. 단어를 하나씩 입력하는 효과.

4. 버튼에 타이머를 설정하고, 입력 후 시간을 계산하면 버튼이 표시되고, 버튼을 클릭하면 인덱스의 전체 배경 컨테이너가 접힙니다(모든 html 콘텐츠). 홈페이지가 하나의 컨테이너에 배치됨) hello 구성 요소 콘텐츠를 복원합니다. 안녕하세요 그냥 아무거나 쓰세요.