Have a banner zoom out animation when page loads in Brooklyn Themen

Store Design
1

Hi guys,

Is it possible to make the banners/pictures zoom out when entering the site?

Reference: https://themes.shopify.com/themes/prestige/styles/allure/preview?price%5B%5D=paid&surface_inter_position=1&surface_intra_position=13&surface_type=all

(When opening that site, you will see that the banners and pictures zoom out for a second - I am not talking about a zoom-in effect for the product images)

Is it possible to customize a free theme (Debut, Debutify or something like that) to make that zoom-out effect when entering the website?

I hope that someone knows an answer to this.

Thank you so much

2

@ChamanGarg1

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi, my site link is:

If you see I already have a banner put but I want to put the animation of zoom out like I mentioned below in this banner.

4

@ChamanGarg1

sorry i can’t see any banner zoom effect

5

Yes, I want to add the zoom out effect to the banner but don’t know the code.

Currently there is no animation to it

6

@ChamanGarg1

https://michalsnik.github.io/aos/

7

Thanks for the link Ketan. @KetanKumar

This is the animation code that I want-

<div data-aos="zoom-out"></div>

Can you please tell me where should I put it so that it works on the main banner of the home screen?

8

@ChamanGarg1

Yes, please try it

9

He was asking you which file to place the code in to make the Zoom feature work. Where to place the code? Thanks

10

@Luke111

can you please first add css code after your add zoom code whenever do you have like any section

11

@KetanKumar

can you provide the even css code and where should i put this codes

12

@vikasdev

can you try this code

https://codepen.io/vaishali1192/pen/QWdJZVy

13

Have you found a way to do it ?

14

Hi there did you found that where did you put that code to work zoom out feature for banner?

can you please guide me, I’m wishing to do same please.

your guide will be appreciated. Thank you