2012-06-04 3 views
2

웹 사이트의 이미지와 텍스트에 흔들리는 프레임을 사용하고 싶습니다 (이동 가능한 경우 최적 일 수 있습니다). 그러나 어떻게해야할지 모르겠습니다. 나는 paperjs.org를 조사해 왔지만, HTML 텍스트를 불규칙한 형태로 감쌀 수 있을지 모르겠습니다.CSS - bobbly 테두리가있는 프레임

여러분도이 효과를 내기 위해 사용할 수있는 라이브러리 나 기술을 알고 있습니까? 또는 웹의 현재 상태에서 불가능할 수도 있습니까?

enter image description here

+0

은 포토샵과 같은 프로그램에서 사용하는 일반 마스크와 비슷합니다. 웹에서는 CSS 마스크를 사용하여이를 수행 할 수 있습니다. 그것이 도움이 될 수 있으면 이것을보십시오 : http://www.webkit.org/blog/181/css-masks/ – Saturnix

+0

그러나 그들은 움직일 수 있습니까? –

+0

아니요! 이는 좀 더 복잡합니다. http://www.html5rocks.com/en/tutorials/3d/css/ 및 http://www.adobe.com/devnet/html5/articles/css를 살펴보십시오. -shaders.html – Saturnix

답변

0

간단하지만 최적의 솔루션은 하나의 Z- 인덱스와 HTML 콘텐츠를 게시 한 다음 2의 Z- 인덱스와 내용의 정상에 배경의 PNG를 배치하는 것입니다 적은 다음.

게시 한 그림을 시뮬레이션 할 수는 있지만 콘텐츠 모양의 애니메이션을 추가 할 수는 없습니다. 배경 화면을 왼쪽이나 오른쪽으로 가질 수는 있지만 (왼쪽이나 오른쪽으로 걸어 가면서 창을 들여다 보는 효과를 시뮬레이션 함).

동일한 효과를 만들고 싶지만 도형에 애니메이션을 적용 할 가능성이 있다면 HTML5 Canvas을 사용하고 싶지만 정확하게 수행 할 수있는 방법은 저 밖에 있습니다.

+0

또한이 방법으로 텍스트를 선택할 수 없습니다. 당신의 아이디어에 감사드립니다. –

+0

z-index가 3 인 텍스트를 맨 위에 놓고 계속 강조 표시 할 수 있습니다. –