웹사이트에 플래시와 포트폴리오 페이지를하는 건 오래된 일종이되었습니다. 빠른 기계 및 차세대 브라우저 요즘 정말 자바 스크립트와 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}).; }, 함수 () { . $ (이) ( ". info_container") 찾을 애니메이션 ({상단 : "100px"}, {기간 : 500, 완화 : hover_out_easing}).; }); / / 100 픽셀 마스크의 크기이다 });
그것은 상대적 위치에 의해 숨겨져 보관되어 이미지 위에 마스크를 애니메이션하는 애니메이션 기능을 사용합니다. 그리고 플러그인을 완화와 함께, 우리는 당신이 이미지에서 밖으로 가져가서 때 수신 거부의 멋진 효과를 얻을 수 있습니다. 그것이 국경을 넘어 가지 않습니다만큼 긴 info_container 사업부 요소 내부에 HTML을 넣을 수 있습니다. 스타일 시트를 봐 당신은 아주 gramatical 그것을 찾을 수 있습니다. 당신은 사업부 클래스를 수정하여 크기를 사용자 정의할 수 있습니다.
영감 : http://dibusoft.com/portfolio
최근 댓글