윅스 (Wix) 코딩 강의 중급 (Intermediate) - 이미지 및 텍스트 애니메이션 (Image and Text Animation) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 이미지 및 텍스트 애니메이션 (Image and Text Animation) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 이미지 및 텍스트 애니메이션 (Image and Text Animation) - 상호작용 (Interactions)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

윅스 애니메이션 API (wix-animations API)를 활용하여 웹사이트내의 이미지와 텍스트를 움직이게 만드는 기능을 만듭니다.

 

 

예제 보러가기 (View Example)

Home | Timeline Anims T

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 이미지 구성요소 3개
• 텍스트 구성요소

 

코드 (Code)

Home

import { timeline } from 'wix-animations';

$w.onReady(function () {

	const target1 = $w('#image3');
	const target2 = $w('#image2');
	const target3 = $w('#image1');
	const target4 = $w('#title');

	$w('#hoverArea').onMouseIn(() => {

		timeline()
			.add(target1, { y: 40, x: -280, scale: 1, duration: 600, easing: 'easeOutCirc' })
			.add(target2, { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)
			.add(target3, { y: -40, x: 280, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)
			.add(target4, { y: -60, x: 0, scale: 1.15, duration: 400, easing: 'easeOutCirc' }, 0)
			.play();
	})

	$w('#hoverArea').onMouseOut(() => {

		const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' };

		timeline()
			.add(target1, reset)
			.add(target2, reset, 0)
			.add(target3, reset, 0)
			.add(target4, reset, 0)
			.play();
	})
})

 

 

API

Wix Animation API

wix-animations - Corvid API Reference

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 이미지 숨기기 보이기 (Hide and Show an Image) - 상호작용 (Interaction)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 이미지 숨기기 보이기 (Hide and Show an Image) - 상호작용 (Interactio

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Image and Text Animation | Corvid by Wix Examples | Wix.com