CODEWITHSUNDEEP
javascriptjquerycss
Boaprivate
Boaprivate

Reputation: 35

Scrolling Background Animation

I have created a element called content and 3 buttons "portfolio","about","contact". I want the background to scroll to a certain part for each one I click. At the moment there is animation for each scroll like so 

@-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 ;}  
}

and the js which runs each animation when I click on each button

$(".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" }); 
})

however at the moment it is going straight back to the first image then scrolls whenever it does any animation. I want it to scroll to a certain position from the current position. Is it possible?

Note: Here is a link to the picture I am scrolling. https://i.sstatic.net/cLGP1.jpg as you can see it is 3 images on one big image. Each one of the images is for a different bit one for "portfolio" one for "about" etc.

Upvotes: 0

Views: 237

Answers (1)

Mahdi Rostami
Mahdi Rostami

Reputation: 305

Use .Animate instead .css reference

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

tip:backgroundPositionX:"+=200px" set value to value=value+200 in px

Upvotes: 2

Related Questions