Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
335

Animating background image

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

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

:)

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×