Slide in as you scroll down - Debut theme

Highlighted
New Member
3 0 1

Hi everyone!

I would like to implement in my Shopify website a script/css code, that shows product while the user is scrolling down.

To give you an idea of what I'm talking about, I would like to do something similar to what the website Golden Concept does, that is: https://gyazo.com/fb7eb898e905d122136cdb2bac0cffc6

As you can see, their products show up while scrolling down.

Hope someone can help me!

Thanks in advance,

Pierlorenzo

 

0 Likes
Highlighted
New Member
3 0 1

UPDATE: DISCOVERED HOW TO SOLVE

Add these 2 tags between <head></head> tags in theme.liquid:

<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

Then add this line in theme.js: 

AOS.init();

Finally add to every element you want to animate while scrolling this attribute: 

data-aos="animation_name"

Subsitute "animation_name" with the effect you want. You can choose an effect from this website: https://michalsnik.github.io/aos/

 

Example:

<div class="box a" data-aos="fade-up">
  <h2>Test.</h2>
</div>

Hope this can help someone :)

1 Like
New Member
1 0 0

thanks a lot man. you are awesome

0 Likes
Highlighted
New Member
1 0 0

Thanks a lot!

 

I have a question tho, are you able to apply it to slideshow headings ?

0 Likes
Highlighted
New Member
1 0 0

when i add that two first tags, all images disappearing ;)

 
0 Likes
Highlighted
New Member
1 0 0

I dont have the theme.js or theme.js.liquid file in my code, can anyone tell me what I have to use instead?

0 Likes