2009-07-13 5 views
1

나는 당신의 모든 웹 전문가의 두뇌를 고를 것을 요구하고 있습니다.웹 페이지 이미지 효과 - JavaScript? 어떻게?

구현하려고하는 생각이 있습니다.

화면에 여섯 개의 그림을 원 모양으로 표시하고 마우스로 마우스를 가져 가면 회색과 흰색이 풀 컬러로 변하고 어쩌면 조금 더 커지거나 생성됩니다 마우스가 위에있을 때 머무르는 드롭 그림자 효과.

VB6 및 SQL Server에서 너무 초라한 편은 아니지만 액티브 데스크톱에서 즐겨 찾는 폴더, 웹 사이트 및 문서에 대한 링크 등을 표시하는 원시 HTML을 생성하기 위해 메모장을 사용하는 것으로 확장되었습니다.

w3schools.com과 같은 프로그래밍 리소스 웹 사이트, 특히 자바 스크립트 또는 다른 방법을 사용해야하는지 여부에 대해 살펴 보겠습니다. 특정 메소드 호출도 좋을 것입니다.

"이 코드를 사용해보십시오"다음 10 개의 코드 스크린을 잘라내어 붙여 넣기 만하면됩니다. "예를 들어, 위치 지정을 위해 www.thiswebpage.com을 참고하십시오. XYZ를보십시오 "그리고"페이드 효과를 위해, JavaScript에 ABC 방법을보십시오 "또는 무엇 이건을.

미리 감사드립니다.

EDIT : 14/07/2009 - 이것이 적절할 수도 있다고 생각했습니다. Google Apps 호스팅 웹 사이트에서 페이지를 호스팅 할 예정입니다.

또한 흑백 페이드 효과가 내가 고려한 유일한 효과는 아니 었습니다. 단지 한 가지 가능성 일뿐입니다. 다른 멋지고 미묘한 효과가 고려 될 수 있습니다.

답변

3

구현하려는 것은 그렇게 어려운 것이 아닙니다. 그러나 JS를 모른다면 W3C 학교가 시작하기에 좋은 곳입니다.

Mootools도 확인해야합니다. JS 요구에 맞는 훌륭한 프레임 워크입니다. 그들은 또한 어떤 위대한 demos you can try 있습니다.

-1

Javascript 형식이 필요합니다. 제가 수행 중이라면 Script.aculo.us 라이브러리를 살펴 보겠습니다. (즉각적인 효과는 CSS로 할 수 있지만 점진적인 페이드의 경우에는 자바 스크립트가 필요합니다.)

+0

새로운 브라우저에는 CSS 애니메이션이 있습니다. 자바 스크립트가 전혀 없으면 IE에서 "팝"하고 더 나은 브라우저에서 부드럽게 사용할 수 있습니다. 이는 사람들이 자바 스크립트를 사용하지 않는 상황에 좋습니다. – Nosredna

+0

그들은 퇴색 효과를합니까 cometbill은 (흑백으로 색을 바꾸고 싶습니까?) –

0

Scriptaculous을 사용하고 싶습니다. 사용하기 쉬운 수많은 애니메이션 명령이 있습니다. DIV에서 여러 효과를 동시에 실행할 수 있으므로 동일한 객체에서 MOVE 및 SCALE 효과를 쉽게 수행 할 수 있고 동기화를 처리 할 수 ​​있습니다.

일반적인 자바 스크립트로이 모든 작업을 수행 할 수 있습니다. - 일의이 유형을 연구의 jQuery 플러그인 거기에서 JQuery

: 사용자 경험이 유형의 일반적인 효과를

new Effect.Move('yourDIV', { x: 0, y: 0, mode: 'absolute' }); 
2

및 시작점 : 여기

은 무브의 예입니다. 좋은 검색어는 캐 러셀 일 수 있습니다.

0

CSS 속성을 멋지게 애니메이트 할 수있는 일부 JS 라이브러리를 사용하면 상당히 유사한 효과를 얻을 수 있습니다. 예를 들어, Scriptaculous 및 jQuery는 작업에 적합 할 수 있으며 배우기 쉽다.

기본 아이디어는 div에 이미지가있는 것입니다. 이미지의 투명도는 0.5로 설정 될 수 있으므로 div의 배경색이 음영 처리됩니다. 이렇게하면 배경을 올바르게 선택하여 흑백 이미지와 비슷한 효과를 얻을 수 있습니다.

정확한 흑백 효과를 원한다면 이미지의 흑백 버전을 생성하거나 HTML5 캔버스 요소를 사용하여 수동으로 이미지에 색상 변환을 적용해야합니다. 하지만 오래된 브라우저와 인터넷 익스플로러에서는 작동하지 않습니다.

0
  1. Crockford처럼 알려진 작가의 기사로이 지식을 확장 http://www.w3schools.com/JS/default.asp
  2. 에서 문법을 배울 수있는, JS 알아보십시오.
  3. 선도적 인 프레임 워크 중 하나를 배우면서 소금을 모두 (나는 Mootools처럼).
  4. 1 ~ 3 단계 코드를 작성하는 동안 더 많은 코딩 작업을 수행하십시오.