impress.js_javascript 기술에 대한 사전 이해에 대해 이야기해 보세요.

1. impress.js 이해

　impress.js는 CSS3 및 JavaScript 언어를 사용하는 개발자가 사용하는 프레젠테이션 레이어 프레임워크(프레젠테이션 도구)입니다.

이제 일반 개발자는 impress.js를 사용하여 비슷한 효과를 가지면서도 FLASH 기반 Prezi보다 성능이 더 뛰어난 프레젠테이션 도구를 개발할 수 있습니다. 그 기능에는 캔버스의 무제한 회전 및 크기 조정, 모든 각도에서 모든 크기의 텍스트 배치, CSS3 3D 효과 지원 등이 포함됩니다. 동시에 기존 PowerPoint 형식의 슬라이드 프레젠테이션도 지원됩니다.

현재 impress.js는 웹킷 브라우저(크롬, 사파리)를 기반으로 개발되었지만 웹킷이 아닌 엔진 기반이지만 CSS3 3D를 지원하는 다른 브라우저에서도 정상적으로 실행될 수 있습니다.

2. impress.js를 사용하세요

impress.js 소개:

코드 복사 코드는 다음과 같습니다.

이제 새 슬라이드쇼를 만드는 것이 얼마나 쉬운지 확인하실 수 있습니다. 각 슬라이드는 클래스 이름이 'step'인

요소입니다(래퍼 내).

코드 복사 코드는 다음과 같습니다.

나의 첫 슬라이드

간단한 슬라이드쇼를 만들더라도 슬라이드쇼에 데이터 속성을 추가하기 시작하면 재미있습니다. 데이터 속성은 활성 슬라이드가 아닌 경우 슬라이드의 속성을 나타냅니다.

data-x = 슬라이드의 x 좌표

data-y = 슬라이드의 y좌표

data-scale = 값을 지정하여 확대/축소합니다. 데이터 규모 5는 슬라이드를 원래 크기의 5배로 확대합니다.

data-rotate = 숫자만큼 슬라이드를 회전합니다

data-rotate-x = 3D의 경우 이 숫자는 x축을 기준으로 얼마나 회전해야 하는지를 나타냅니다. (앞으로 기대기/뒤로 기대기)

data-rotate-y = 3D의 경우 이 숫자는 y축을 기준으로 회전해야 하는 정도입니다. (왼쪽/오른쪽으로 스윙)

data-rotate-z = 3D의 경우 이 숫자는 z축을 기준으로 얼마나 회전해야 하는지를 나타냅니다.

인스턴스 디렉터리:

위 내용은 impress.js에 대한 저의 사전 이해입니다. 나중에 깊이 있게 공부하겠습니다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.