2012-11-27 6 views
0

오늘은 일부 사이트를 확인하고 있었지만 이전에 보지 못했던 새로운 CSS 또는 JS 트릭을 발견했습니다. 나는 그것이 어떻게 행해졌는지, 또는 그것에 대해 더 많이 배울 수있는 곳을 이해할 수 없었다. 여기 내가 효과를 본 사이트에 a link입니다. 상단의 '로그인'버튼을 클릭하면 이런 일이 발생합니다. 해당 코드를 작성하는 데 사용되는 언어는 무엇이며 어디에 대해 배울 수 있습니까?스크롤 요소와 소멸 요소

+1

스크린 샷과 코드를 사용하면 해당 링크보다 훨씬 더 많은 정보를 얻을 수 있습니다. –

+0

팁을 주셔서 감사합니다. – Marcus

답변

2

그들은 이것을 구현하기 위해 간단한 jquery & css 함수를 사용했습니다.

$(document).ready(function(){ 
var toggleLogin = 1; 
$(".toggleLogin").click(function() { 
    if (toggleLogin == 1) { 
     toggleLogin = 0; 
     $("#login").animate({ top: 0 }); 
     $("#IconBenchUsername").focus(); 
    } else { 
     toggleLogin = 1; 
     $("#login").animate({ top: -43 }); 
    } 
    $("#invisLoginArea").slideToggle(); 
}); 
}); 
+0

나는 [지연된] 이벤트를 방지하기 위해 지연시 애니메이션을 실행합니다. [http://edackoverflow.com/questions/13490536/animate-queue-simulation-for-older-jquery -verions-drupal-conflict/13556380 # 13556380) –

0

당신은 자바 스크립트 또는 CSS3와 함께, 그것은 간단한 애니메이션 효과 있다고 할 수 그들의입니다. 그건 그렇고, CSS3는 내가 생각하기에는 훨씬 쉽습니다. 자세한 내용은 Google에서 애니메이션을 검색하고 변형 할 수 있습니다.