Return to previous page

How to make image move on its own? - by GTP

This topic has 8 replies, 2 voices, and was last updated 11 months, 2 weeks ago ago by Rose Tyler

GTP

Participant

December 25, 2023 at 09:34

Hi 8theme team,

Just wondering if we can show an image moving slowly/by itself on a webpage?

Please see PCA for more details.

Thanks for your help 🙂

Please, contact administrator
for this information.

#377582 Copied Theme version: 9.2.5

7 Answers
Rose Tyler

Support staff

December 25, 2023 at 13:47
Hello, GTP,

We would like to express our gratitude for selecting XStore as your preferred WooCommerce WordPress theme.

To accomplish the specific visual effect you are seeking, you may utilize the following Custom CSS code. Please insert this code into the settings area for columns that contain an image:
```
selector img {
    animation: animateAmbient 30s linear infinite;
}
@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > svg {
    animation: animateAmbient 30s linear infinite;
  }
  @keyframes animateAmbient {
    0% { transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2); }
    100% { transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2); }
  }
}
```
Kind Regards,
8theme team
#377613 Copied
GTP

Participant

December 28, 2023 at 13:58

Hi Rose,

Thanks for your reply and hope you are doing great!

1) Thanks for the code! If we add this to an image it looks very cool. But were wondering if we can add this to a container image (not sure if that is the right word) but have the image inside set parameters as in the example?

Please see PCA.

2) What would something like this be called?
The image is set inside another box type figure/container and can we make this on X-Store?

Thanks for your help!

Please contact administrator
for this information.

#377925 Copied
Rose Tyler

Support staff

December 29, 2023 at 09:12
Hello, GTP,

You’re welcome!

Please proceed to add a section with a background image and include the desired content within. Subsequently, implement the following custom CSS code:
```
selector .elementor-widget {
    animation: animateAmbient 30s linear infinite;
}
@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > svg {
    animation: animateAmbient 30s linear infinite;
  }
  @keyframes animateAmbient {
    0% { transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2); }
    100% { transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2); }
  }
}
```
Kindly be advised that for inquiries akin to your recent question, it would be necessary to engage the personal content manager. We regret to inform you that our scope of support does not extend to personalized development tasks and personalized content management.

Kind Regards,
8theme team
#378018 Copied
GTP

Participant

January 9, 2024 at 17:56

Hi Rose,

Thanks for your reply!

In regards to the section with a background image, we added a section and then an image on top of the section – is that what you meant in regards to your reply?

We did that and then added the code, but the image is not moving.

Webpage is on PCA

Thanks!

Please contact administrator
for this information.

#379366 Copied

Rose Tyler

Support staff

January 10, 2024 at 09:32

Hello, GTP,

We kindly request that you capture and share a video recording of your actions. This will enable us to gain a comprehensive understanding of the steps you have taken. Following this, we will create and provide you with a video demonstrating the correct procedures.

Kind Regards,
8theme team

#379443 Copied

GTP

Participant

January 11, 2024 at 17:28

Hi Rose,

Sorry I will try to explain better;

Please see PCA

Please contact administrator
for this information.

#379630 Copied

Rose Tyler

Support staff

January 12, 2024 at 13:45

Hello, GTP,

We appreciate your prompt response.

We apologize for any inconvenience caused. It appears that the code provided does not yield the expected outcome. We kindly request that you reach out to the customization service for further assistance in achieving the additional effect you are seeking.

Kind Regards,
8theme team

#379708 Copied
Tagged: automated image, image movement, interactive web, web animation, web design, woocommerce, wordpress templates
Viewing 8 results - 1 through 8 (of 8 total)