Slide in as you scroll down - Debut theme

Highlighted
New Member
3 0 4

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 4

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 :)

4 Likes
Highlighted
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
2 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
Highlighted
Tourist
6 0 2

I am a little confused as to where to add these lines of code. When you say "Then add this line in theme.js:"


do I add it anywhere? Also, where do I find where to add this? "Finally add to every element you want to animate while scrolling this attribute: 

Please let me know, thanks!

 

1 Like
Highlighted
New Member
1 0 0

Can you walk me through placement of codes please

0 Likes
Highlighted
New Member
1 0 0

Thank you for sharing!

I've added everything, but I'm stuck on this line of code:

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

Where do I add that?

 

0 Likes
Highlighted
New Member
1 0 0

@maiabbq 

You would add 

data-aos="animation_name"

into your div or whatever element you want to animate.

 This:

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

... is an example of how you would do that.

 

I.e. I would find what I wanted to animate (say I want to animate a heading) in my code I would add it like this:

<div class="headingexample" data-aos="fade-up">

<h1>This is my heading example!</h1>
</div>

 

 If you are unsure on how to find the code location for what you want to animate I would suggest familiarizing yourself with the "inspect" element in your browser and highlighting the area.  

0 Likes