Trial of Parallax Code
This is a mock-up of the page I want to build
Need to figure out code to make parallax work on iOS
Page has starts with a hero (sticky header) bloc with fullscreen padding and gradient effect into a static bloc and gradient into 3rd bloc with parallax of same background image as first bloc. Page also uses other parallax background images farther down the page.
Introducing the Photograph
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis.
ABOUT US
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Coach Bio
A more descriptive sub heading.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta, lorem in faucibus dapibus, metus lacus consequat risus, eget egestas felis nunc vitae ex. Quisque imperdiet lacus maximus turpis volutpat volutpat. Vestibulum cursus mi at ante finibus, ut faucibus purus vulputate. Etiam eget bibendum est, in aliquet urna. Sed non lacus sed mauris vestibulum consequat at non nibh. Quisque auctor lorem urna, at interdum mi aliquam nec. Curabitur efficitur dui id mi ornare suscipit. Aliquam erat volutpat. Maecenas at tortor at ipsum rutrum sodales vitae eu nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc volutpat ipsum a arcu pellentesque pulvinar. Fusce id lectus hendrerit, accumsan felis a, malesuada tellus. Curabitur vestibulum faucibus dui, ut iaculis ex. Sed viverra sapien tincidunt mauris maximus, at vehicula nibh hendrerit. Morbi condimentum ut justo sit amet finibus.
Maecenas id lectus non nibh pretium fringilla. Nunc non cursus ante. Ut maximus eu erat id luctus. Nullam efficitur finibus lorem aliquet porttitor. Integer dignissim ipsum nibh, ut facilisis magna vehicula lacinia. Praesent turpis nisi, convallis eget mi eu, iaculis dignissim eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse elementum ante est, et suscipit ligula aliquet vel. Ut vel odio at turpis pellentesque suscipit nec in lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras facilisis nibh et ultricies maximus.
SERVICES
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
We are here to serve you
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis.
Taking Pictures
Cum sociis natoque penatibus et magnis parturient montes.
Filming in 8K
Cum sociis natoque penatibus et magnis parturient montes.
Highest Quality Photos
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Unbelivable Video Quality
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Pricing Plans
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis.
CONTACT
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Contact Form
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.
Contact Info
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
Email: email@youremail.com
Telephone: +1 123 1234 1234
Website: www.websiteaddress.com
Address: 28, Blocs bldg, Blocs city, BL 12345 United States of Blocs
Sign Up For Newsletter
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis.
placeholder bloc for code img files - will hide visibility in final
Desired page structure and notes:
Page structure starts with parallax hero bloc, then a static bloc, continues to alternates parallax & static blocs
NO global header (sticky header from hero in bloc1)
bloc1-hero - (12.jpeg) parallax background, gradient overlay (sticky nav bar)
bloc2-intro - static, purple color background
bloc3-about - (12.jpeg) parallax background, gradient overlay
bloc4-coach - static, no background img or color
bloc5-services-hero - (camera.jpeg) pararlax background, gradient overlay
bloc6-services - static, no background img or color
bloc7-tales - (7.jpeg) párallax background with overlays
bloc8-pricing - static, no background img or color
bloc9-contact-hero - (3.jpeg) parallax background, gradient overlay
bloc10-contact-form - static, no background img or color
bloc11-newsletter - (14.jpeg) parallax background, overlays
Bloc-placeholder - referenced coded parallax images, hide visibility
bloc12-footer (global footer) - static, no background img or color
https://forum.blocsapp.com/t/parallax-effect-working-on-ios-ipad-and-iphone/2442/21
see this forum post for code example used in “WORKING” page