웹사이트에 플래시와 포트폴리오 페이지를하는 건 오래된 일종이되었습니다. 빠른 기계 및 차세대 브라우저 요즘 정말 자바 스크립트와 CSS와 함께 엉덩이를 걷어차 수 있습니다. JQuery 어떤 효과를 다루는 매우 깔끔한 방법이 있습니다. 모든 애니메이션은 "애니메이션"이라는 기본 메서드에서 줄기. 그것 animates는 DOM 요소의 속성을 tweens. 긴 이야기를 만들기 위해서는 짧은 이것 좀보세요.
그래서, 당신은 이미 클릭하고 오른쪽 보셨나요? 당신이 코드를 보면 좋아, 그것은 매우 간단합니다.
$ (문서) 준비 (함수 () {VAR hover_in_easing = "easeOutExpo";. VAR hover_out_easing가 = "easeOutBounce";. $ ( ". info_container") (표시). $ ( "div.portfolio_div") 하버 (함수 ( ) {$ (이) ( "info_container.") 찾을 애니메이션 ({상단 : "0px"}, {기간 : 400, 완화 :.. hover_in_easing});}., 함수 () {$ (이) "(찾기 ., {기간 : 500, 완화 : hover_out_easing} : info_container가 "{100px"). (상단} 애니메이션 ");}); / / 100 픽셀)가} 마스크의 크기입니다; 그것은 상대적 위치에 의해 숨겨져 보관되어 이미지 위에 마스크를 애니메이션하는 애니메이션 기능을 사용합니다. 그리고 플러그인을 완화와 함께, 우리는 당신이 이미지에서 밖으로 가져가서 때 수신 거부의 멋진 효과를 얻을 수 있습니다. 그것이 국경을 넘어 가지 않습니다만큼 긴 info_container 사업부 요소 내부에 HTML을 넣을 수 있습니다. 스타일 시트를 봐 당신은 아주 gramatical 그것을 찾을 수 있습니다. 당신은 사업부 클래스를 수정하여 크기를 사용자 정의할 수 있습니다.
영감 : http://dibusoft.com/portfolio
최근 댓글