vue 웹 페이지 오 프 닝 동 영상 인 스 턴 스 코드 만 들 기
이 demo 배경 은 비디오 입 니 다.문 자 는 프린터 효과 입 니 다.단 추 는 텍스트 가 끝나 야 표 시 됩 니 다.단 추 를 누 르 면 배경 을 위로 접 고 기본 홈 페이지 구성 요 소 를 표시 합 니 다.(예 를 들 어 vue 프로젝트 목록 을 처음 만 들 었 을 때 hello World.vue 의 구성 요소 내용 입 니 다)
회사 컴퓨터
글 끝 에 데모 주 소 를 첨부 합 니 다.효 과 를 보 려 면 다운로드 하 러 갈 수 있 습 니 다.
저 는 홈 페이지 의 오 프 닝 에 영상 이나 애니메이션 이 있 는 것 을 좋아 했 습 니 다.개인 적 으로 홈 페이지 의 오 프 닝 애니메이션 이 탐색 을 유도 하 는 역할 을 한다 고 생각 합 니 다.홈 페이지 의 시작 에 해당 하고 좋 은 시작 이 반 으로 성공 하 며 사 이 트 를 방문 하 는 사용자 에 게 도 큰 주 의 를 끌 었 습 니 다.
이상 은 모두 쓸데없는 소리 입 니 다.홈 페이지 오 프 닝 애니메이션 은 모 바 일 에서 의 응용 이 매우 광범 위 합 니 다.구체 적 으로 조작 한 후에 업 무 는 간단 한 책 에서 업 데 이 트 될 것 입 니 다.오늘 우 리 는 주로 vue 가 pc 엔 드 홈 페이지 오 프 닝 애니메이션 을 하 는 것 을 이야기 합 니 다.
vue 프로젝트 목록 에 src 와 같은 등급 의 index.html 가 있 습 니 다.저 희 는 주로 여기 서 글 을 씁 니 다.
1.우선 vue 렌 더 링 구성 요 소 는 모두 이 홈 페이지 index 를 기반 으로 하고 vue 새 항목 으로 웹 페이지 를 열 때 기본 으로 열 리 는 구성 요소 가 있다 는 것 을 알 아야 합 니 다.이것 은 설명 이 많 지 않 습 니 다.우리 가 해 야 할 일 은 이 구성 요 소 를 숨 기 는 것 이다.그렇지 않 으 면 그의 내용 이 이 동 영상 위 에 나타 날 것 이다.
helloWorld.vue 구성 요소 에서:
index.html 에서 hello World 구성 요소 의 hello
를 제거 합 니 다.물론 그 전에 다른 용기 에 저장 하거나 복제 하 셔 야 합 니 다.임시 저장 의 역할 은 바로 뒤에 이 노드 를 다시 페이지 로 복원 하기 위 한 것 이다.
2.index 페이지 에 비디오 를 직접 도입 합 니 다.이 demo 는 비디오 플러그 인 을 직접 찾 아 넣 었 습 니 다.이 단 계 는 간단 합 니 다.도입 해 야 할 파일 은 모두 정적 폴 더 static 에 넣 습 니 다.
주의해 야 할 것 은 첫 페이지 의 스타일 이 구성 요소 의 탭 스타일 에 직접적인 영향 을 미 치기 때문에 플러그 인 을 도입 할 때 스타일 조절 에 주의 하고 탭 으로 스타일 을 직접 쓰 지 않도록 하 는 것 입 니 다.
3.만약 에 배경 이 동 영상 이 라면 심미 적 인 측면 에서 홈 페이지 에 글 자 를 많이 추가 하면 되 고 스타일 이 너무 많 으 면 어 지 럽 고 과장 된다.이 demo 도 type:write.js 라 는 플러그 인 을 사 용 했 습 니 다.하나하나 글 자 를 치 는 효과.
4.버튼 에 시간 을 정 하고 글자 가 끝 난 시간 을 계산 합 니 다.단 추 를 누 르 면 index 의 전체 배경 용 기 를 위로 접 고(홈 페이지 의 모든 html 내용 을 한 용기 에 넣 습 니 다)hello 구성 요소 내용 을 복원 합 니 다.hello 아무 거나 써.
...
demo 는 element 등 설정 문제 와 관련 되 어 있 습 니 다.두 페이지 코드 를 직접 꺼 내 도 제 가 보 여 준 효 과 를 실현 하지 못 할 수도 있 습 니 다.관심 이 있 으 면 github 주 소 를 방문 할 수 있 습 니 다.
https://github.com/JOSIE1988/Vue-start-video
총결산
위 에서 말 한 것 은 편집장 이 소개 한 vue 가 홈 페이지 오 프 닝 영상 을 만 드 는 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
2.index 페이지 에 비디오 를 직접 도입 합 니 다.이 demo 는 비디오 플러그 인 을 직접 찾 아 넣 었 습 니 다.이 단 계 는 간단 합 니 다.도입 해 야 할 파일 은 모두 정적 폴 더 static 에 넣 습 니 다.
주의해 야 할 것 은 첫 페이지 의 스타일 이 구성 요소 의 탭 스타일 에 직접적인 영향 을 미 치기 때문에 플러그 인 을 도입 할 때 스타일 조절 에 주의 하고 탭 으로 스타일 을 직접 쓰 지 않도록 하 는 것 입 니 다.
3.만약 에 배경 이 동 영상 이 라면 심미 적 인 측면 에서 홈 페이지 에 글 자 를 많이 추가 하면 되 고 스타일 이 너무 많 으 면 어 지 럽 고 과장 된다.이 demo 도 type:write.js 라 는 플러그 인 을 사 용 했 습 니 다.하나하나 글 자 를 치 는 효과.
4.버튼 에 시간 을 정 하고 글자 가 끝 난 시간 을 계산 합 니 다.단 추 를 누 르 면 index 의 전체 배경 용 기 를 위로 접 고(홈 페이지 의 모든 html 내용 을 한 용기 에 넣 습 니 다)hello 구성 요소 내용 을 복원 합 니 다.hello 아무 거나 써.
...
demo 는 element 등 설정 문제 와 관련 되 어 있 습 니 다.두 페이지 코드 를 직접 꺼 내 도 제 가 보 여 준 효 과 를 실현 하지 못 할 수도 있 습 니 다.관심 이 있 으 면 github 주 소 를 방문 할 수 있 습 니 다.
https://github.com/JOSIE1988/Vue-start-video
총결산
위 에서 말 한 것 은 편집장 이 소개 한 vue 가 홈 페이지 오 프 닝 영상 을 만 드 는 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
