http://scaleofuniverse.com/과 같은 사이트 모음에는 확대/축소가 가능한 인터페이스가있어 항목을 "확대/축소"하여 해당 항목에 포함 된 "더 작은"항목을 나타낼 수 있습니다. 필자는 Flash에서이 작업을 수행하는 것을 항상 보았지만 JavaScript 및 CSS를 사용하여 어떻게 만들 수 있는지 궁금합니다. 이 기능을 지원하는 오픈 소스 라이브러리가 있습니까?확대/축소 전환 효과
또한 매우 인상적인 impress.js를 보았지만이 라이브러리를 사용하여 원하는 효과를 얻을 수 있을지 확신 할 수 없습니다. 올바른 CSS 스타일을 사용하는 것일까 요?
모든 DOM 요소를 확대 할 수있는 zoom.js의 줄여서 내려간 버전을 사용했습니다. 이것은 Zoomooz와 비슷하지만 비 대한 성향이 훨씬 적어 외부 라이브러리를로드 할 필요없이 효과를 내기 위해 필요한 몇 줄의 코드를 분리 할 수있었습니다.
과정은 매우 복잡하지만 수행 할 수있는 방법은 다음과 같습니다. Create a zoomable user interface with CSS3 및 찾는 방법에 가까운 효과를 제공하는 jQuery 플러그인 Zoomooz.
인터페이스 요소가 HTML 요소 인 경우 화면을 채울 때까지 요소를 확장하면서 불투명도를 0으로 낮추면서 동시에 확장 할 수 있습니다.이 기술은 인터페이스 요소에 사용되는 이미지 확장 가능 (가능하면 background-size: cover 사용).
CSS 전환 또는 자바 스크립트를 사용하여 효과를 얻을 수 있습니다.
위 링크는 이제 종료되었습니다. [wayback machine] (http://web.archive.org/web/20120318081036/http://www.netmagazine.com/tutorials/create-zoomable-user-interface)을 사용하여 아카이브 된 버전에 액세스 할 수 있습니다. 그러나 원본 기사는 온라인 [여기] (http://www.creativebloq.com/create-zoomable-user-interface-css-transforms-9114269) 인 것처럼 보입니다. – Deleet