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

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

  • Avatar: GTP
    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.
    7 Answers
    Avatar: Rose Tyler
    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

    Avatar: GTP
    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.
    Avatar: Rose Tyler
    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

    Avatar: GTP
    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.
    Avatar: Rose Tyler
    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

    Avatar: GTP
    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.
    Avatar: Rose Tyler
    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

  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.