Animating background image

[335 3 Likes (Newbie)]

Hello everyone!

 

This is my first post here having started to learn jQuery very recently. Learning it is very exciting but there's so much to get your head around...

 

I look at lots of websites and try to learn as much as I can.

 

Can you tell me what would be the best way to achieve this effect-

 

http://spain.madeforspainandportugal.com/en/

 

-background image looping around a circle or a path?

 

Many thanks in advance!

[WarenGonzaga 64 Likes (Contributor)]

Hey buddy! We are glad you are here in this forum! You can achieve that in using css only! Even without GSAP! you can use the css animation here:

http://www.w3schools.com/css/css3_animations.asp

and then you can create a codepen so we can collaborate with you!

Thank you for posting!

[Jonathan 5,176 Likes (Superhero)]

Hello 335, and Welcome to the GreenSock forum!

That type of effect is called a Ken Burns Effect, and is usually done by animating the image with x (translateX), y (translateY) and scale.

 

One way is you can do this with the CSS property background-size:

 

See the Pen AigpI by jonathan (@jonathan) on CodePen

 

Have a look at some of our resources to get started:

 

GSAP Jump Start:

https://greensock.com/jump-start-js

 

GreenSock Learning Channel:

https://www.youtube.com/channel/UCFPckx3BFK_GvJag82CjDlg

 

GSAP Blog:

http://greensock.com/blog/

 

Resource:

CSS background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

[WarenGonzaga 64 Likes (Contributor)]

Hello 335, and Welcome to the GreenSock forum!

 

That type of effect is called a Ken Burns Effect, and is usually done by animating the image with x (translateX) and y (translateY).. sometimes also using scale.

 

But you can also do this with the CSS property background-size:

 

See the Pen AigpI by jonathan (@jonathan) on CodePen

 

Have a look at some of our resources to get started:

 

GSAP Jump Start:

https://greensock.com/jump-start-js

 

GreenSock Learning Channel:

https://www.youtube.com/channel/UCFPckx3BFK_GvJag82CjDlg

 

GSAP Blog:

http://greensock.com/blog/

 

Resource:

CSS background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

 

Hey there! You're still cool buddy! Yeah you got the point I realized that is a background-size not the background position! Any way thanks for the information!

[WarenGonzaga 64 Likes (Contributor)]

I think this code will help you a lot! This is only a concept! You can modify this!

CSS: (Only)

body {
  height: 100%;
  background: url("http://demo.all4coding.com/magento/media/background/background_8.jpg");
  background-size: auto;
  background-repeat: no-repeat;
  animation-name: backgroundEffect;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

@keyframes backgroundEffect {
  0% {background-position: 0% 0%}
  25% {background-position: 30% 10%}
  50% {background-position: 0 30%}
  75% {background-position: 30% 30%}
  100% {background-position: 0% 0%}
}

This is the CODEPEN link for example --> 

See the Pen WGAXQr by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

Hoping it will help you to get an idea!

[335 3 Likes (Newbie)]

Many thanks for your replies everyone! This gave me loads of things to look into!

 

I think this code will help you a lot! This is only a concept! You can modify this!

CSS: (Only)

body {
  height: 100%;
  background: url("http://demo.all4coding.com/magento/media/background/background_8.jpg");
  background-size: auto;
  background-repeat: no-repeat;
  animation-name: backgroundEffect;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

@keyframes backgroundEffect {
  0% {background-position: 0% 0%}
  25% {background-position: 30% 10%}
  50% {background-position: 0 30%}
  75% {background-position: 30% 30%}
  100% {background-position: 0% 0%}
}

This is the CODEPEN link for example --> 

See the Pen WGAXQr by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

Hoping it will help you to get an idea!

 

Waren, this does exactly what I wanted. One question though- the animation can become a bit jerky at times. Any suggestions on how to make it smoother?