Parallax sections - parameter

4 replies · opened Aug 5, 2019

AaixtremeAug 5, 2019

Hi!
I've found no detailed documentation how to use the positioning parameters in parallax sections (data-center and data-top-bottom)
My example:


            
                ...
            
        ``

Positioning of image before scrolling is working, but while scrolling the parallax motion is way to fast.
Thanks for your answer!
Aixtreme

AaixtremeAug 5, 2019

(of course source code without "``" which was added automatically while using the code tag)

AaixtremeAug 5, 2019

Grmpf...

SSemicolon WebSTAFFAug 5, 2019

Hello,

Apologies about the Inconveniences caused!

The Parallax Plugin used for the Parallax Functionality contains minimal documentation and also is slightly complicated. We are working on a Proper Documentation for the Parallax Plugin at the moment and it will be available by the end of this month for easier integration. Meanwhile, you can consider using the data-bottom-top="background-position:0px 0px;" data-top-bottom="background-position:0px -300px;" on the Parallax Section as an Example to apply a Parallax Effect on the Section. You can animate the CSS Properties of an Element/Section depending on the Horizontal Scrollbar Position. You use the HTML5 "data-" Attributes to define a Set of Styles. Like you can also use: data-bottom-top="background-position:0px 0px; background-color:#000". You can consider checking this cheatsheet for the available "data-" Attributes: https://ihatetomatoes.net/wp-content/uploads/2014/10/skrollr-cheatsheet-v02.png .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

AaixtremeAug 6, 2019

Thanks for your answer!
Unfortunately this is not working with your approach on my site.
While my first attempt with data-center="background-position: 0px 50%;" data-top-bottom="background-position:0px 100px;"
was moving to fast
(see https://www.aachen-acoustics-colloquium.com/relaunch/program.html)
now with your data-bottom-top=”background-position:0px 0px;” data-top-bottom=”background-position:0px -300px;”
there is no parallax motion while scrolling.
(see https://www.aachen-acoustics-colloquium.com/relaunch/program_test.html)
Any ideas?
Thanks for your answer!
aixtreme

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard