Animated Image and Text Section

Animated Image and Text Section

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All Shopify themes.

Create an overlapping animated image text section in your website. 

Was it possible to create an animation without applying it to all the sections in your website? Yes, most web developers will add an aos external library to do the work. Lets do this without a library though. Let our simple code do the work. 

 Check DEMO store here 💻. Password: made4uo

What you are buying:

  • Catchy animated image with text
  • Works well with mobile
  • Animation restarts when the customer go back at the very top and scroll down again

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

To start.

1. We have to add a section, so lets go to our code editor. In your shopify admin store, open themes, then click "Actions", then "Edit code".

2. Open the Sections folder, and add a new file. Lets name it "animated-image-text". Then paste the code below. 

 

3. Since we are listening to the user's scrolls, lets add a javascript code. There is a way to do it with CSS but not all browsers were supporting it. Anyway, in the Asset folder, open the global.js.

 

That's it. 

Note: I would suggest placing it  as a third section or greater, so javascript have time to scroll and call the animation

Copied!
Back to blog

Leave a comment