Highlighted

Fixed/Fluid Scroll effect(Parallax)

Explorer ,
Jun 02, 2017

Copy link to clipboard

Copied

Hello,

i have one question, why i can use Parallax only on fixed pages and not on fluid ones?
It's not like Browsers doesn't support it because it works when you make the same with Notepad++ so where is the problem that it doesn't work with fluid pages ?

Parallax effects need a defined distance to the top of the page (you can see this, when you implement such an effect on a fixed breakpoint).

On fluid pages this distance can't be guaranteed for many reasons. One example: If you reduce the browser width, an image gets smaller and causes objects below to shift upwards. Or a textbox grows vertically, causing objects below shifting downwards.

This aspects are the reason, why the distance of the element in respect to the top of the browser window is floating. In consequence, parallax effects can't be controlled under the conditions of fluid breakpoints.

Views

411

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Fixed/Fluid Scroll effect(Parallax)

Explorer ,
Jun 02, 2017

Copy link to clipboard

Copied

Hello,

i have one question, why i can use Parallax only on fixed pages and not on fluid ones?
It's not like Browsers doesn't support it because it works when you make the same with Notepad++ so where is the problem that it doesn't work with fluid pages ?

Parallax effects need a defined distance to the top of the page (you can see this, when you implement such an effect on a fixed breakpoint).

On fluid pages this distance can't be guaranteed for many reasons. One example: If you reduce the browser width, an image gets smaller and causes objects below to shift upwards. Or a textbox grows vertically, causing objects below shifting downwards.

This aspects are the reason, why the distance of the element in respect to the top of the browser window is floating. In consequence, parallax effects can't be controlled under the conditions of fluid breakpoints.

Views

412

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 02, 2017 0
LEGEND ,
Jun 02, 2017

Copy link to clipboard

Copied

Parallax effects need a defined distance to the top of the page (you can see this, when you implement such an effect on a fixed breakpoint).

On fluid pages this distance can't be guaranteed for many reasons. One example: If you reduce the browser width, an image gets smaller and causes objects below to shift upwards. Or a textbox grows vertically, causing objects below shifting downwards.

This aspects are the reason, why the distance of the element in respect to the top of the browser window is floating. In consequence, parallax effects can't be controlled under the conditions of fluid breakpoints.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2017 1
Explorer ,
Jun 02, 2017

Copy link to clipboard

Copied

Using HTML5 and CSS3 i usualy do this with "Z-Index" where there are few layers and depending on the scroll something shows and other thing hides. The only thing that is scrolling is the Content.

Z-Index
1: Background
2: content
3: background
4:content

and so on...
It works now somehow. No idea if it will 100% work without "errors" but yeah.. we live we see ^^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2017 0