스크롤 배경 애니메이션

콘텐츠 및 3 개의 버튼 "portfolio", "about", "contact"라는 요소를 만들었습니다. 배경을 클릭 할 때마다 특정 부분으로 스크롤해야합니다. 순간 너무스크롤 배경 애니메이션

@-webkit-keyframes toPortfolioBg { 
    from {background-position:inherit; } 
    to {background-position: 0px ;} 
} 
@-webkit-keyframes toAboutBg { 
    from {background-position: inherit;} 
    to {background-position: 1920px ;} 
} 
@-webkit-keyframes toContactBg { 
    from {background-position: inherit; } 
    to {background-position: 3840px ;} 
}

같은 각각의 스크롤에 대한 애니메이션과 나는 각각의 버튼을 클릭 할 때 첫 번째로 바로 돌아가는 순간에

$(".portfolio").click(function() { 
    reset() 
    $("#portfolio").show(); 
    $("#content").css({"-webkit-animation": "toPortfolioBg 5s forwards" });  
    $("#content").css({"animation": "toPortfolioBg 5s forwards" });  
}) 
$(".about").click(function() { 
    reset() 
    $("#about").show(); 
    $("#content").css({"-webkit-animation": "toAboutBg 5s forwards" });   
    $("#content").css({"animation": "toAboutBg 5s forwards" }); 
}) 
$(".contact").click(function() { 
    reset() 
    $("#contact").show(); 
    $("#content").css({"-webkit-animation": "toContactBg 5s forwards" }); 
    $("#content").css({"animation": "toContactBg 5s forwards" }); 
})

그러나 각 애니메이션을 실행하는 JS가있다 이미지는 애니메이션을 수행 할 때마다 스크롤됩니다. 현재 위치에서 특정 위치로 스크롤하고 싶습니다. 가능한가?

참고 : 여기는 스크롤하는 그림에 대한 링크입니다. http://imgur.com/BE1Inmp 큰 이미지 하나에 3 개의 이미지가 있습니다. backgroundPositionX : 이미지의 각각은 등

출처

2014-07-12 Boaprivate

[** fiddle **] (http://jsfiddle.net)을 만들 수 있습니까? –

나는 당신에게 당신의 문제와 관련이없는 하나의 질문만을하고 싶다. CSS3를 사용하여 간단한 작업을 수행하는 이유는 무엇입니까? 나는 또한 훨씬 더 광범위하게 지원되는 간단한 jQuery 애니메이션을 사용할 것입니다. – kfirba

jquery animation을 어떻게 사용합니까? 나를 위해 뭔가를 연결시켜 주시겠습니까? – Boaprivate

사용 .Animate 대신 .CSS reference

$("#content").animate({ 
    backgroundPositionX:"xpos", 
    backgroundPositionY:"ypos" 
    },5000);

팁을 "약"에 대한 "포트폴리오"에 대한 서로 다른 비트 하나 하나입니다 "+ = 200px "값을 value = value + 200으로 설정하십시오.

출처

2014-07-13 10:24:48

thankyou soo much : D 하나의 질문 : 그것이 생기거나 지연/연결 일 때 덜 불안정해질 수있는 방법이 있습니까? – Boaprivate

$ (선택자) .animate ({params}, 속도, 콜백); 속도를 낮은 값으로 변경하십시오. –

스크롤 배경 애니메이션

답변

관련 문제