Debut Theme Parallax Scrolling for Gallery and Image with Text Overlay

Solved
nicoleecherii
Tourist
10 0 5

Hello community! New to Shopify here.

 

On the debut theme, how can I code parallax scrolling for the 'gallery' and 'image with text overlay' images on my homepage? However, I do NOT want parallax scrolling for the first banner / hero image if possible.

 

Website: https://modesseco.myshopify.com/

Password: welcome

 

Thank you so much in advance!

KetanKumar
Shopify Partner
17133 1858 6418

This is an accepted solution.

@nicoleecherii

Welcome to the Shopify community!
and Thanks for your Good question.

 

@media only screen and (min-width: 750px) {
div#shopify-section-hero-2 .hero {
    background-attachment: fixed;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nicoleecherii
Tourist
10 0 5

Thanks very much, @KetanKumar! That fixed the first image with text overlay section. But is there code that would enable parallax scrolling for the other image gallery sections and other image with text overlay section that I have on my page?

0 Likes
KetanKumar
Shopify Partner
17133 1858 6418

This is an accepted solution.

@nicoleecherii 

Thanks for it 

gallery section parallax effect does not look good so i will provide the only image with section code but if need  gallery section last one code for the gallery

 

@media only screen and (min-width: 750px) {
.image-bar__item.image-bar__item--1595426696824-1.box.ratio-container.lazyloaded, .image-bar__item.image-bar__item--image-bar-0.box.ratio-container.lazyloaded {
    background-attachment: fixed;
}
}

 

Gallery code if you need it.

 

@media only screen and (min-width: 750px) { 
div#shopify-section-1595486002491 .image-bar__item {
    background-attachment: fixed;
}
}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nicoleecherii
Tourist
10 0 5

Thank you, @KetanKumar!!

KetanKumar
Shopify Partner
17133 1858 6418

@nicoleecherii 

Thanks for the update and your compliment.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
roamwear701
Tourist
5 0 3

May I ask where to input this coding to achieve the parallax effect to the slideshow images?

0 Likes
roamwear701
Tourist
5 0 3

@KetanKumar  may I ask where exactly to input this code you have supplied?

Thank you

KetanKumar
Shopify Partner
17133 1858 6418

@roamwear701 

Thanks for post 

yes you can put this code your css file depend on your theme

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
roamwear701
Tourist
5 0 3

@KetanKumar I am using Brooklyn Theme and would like to make my second slideshow a parallax. Can I place the code above into my 'theme.scss.liquid'?
The website is https://www.roamwear701.com/ and the section I'm speaking of is after the Collections on the home page. Any help on this would be greatly appreciated!

Thank you!