Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support parallax scrolling #40

Closed
daybrush opened this issue Sep 21, 2017 · 0 comments
Closed

Support parallax scrolling #40

daybrush opened this issue Sep 21, 2017 · 0 comments
Assignees
Milestone

Comments

@daybrush
Copy link
Member

Description

Support parallax scrolling.
If item has parallax class name and image is longer than the area surronding this, apply parallax scrolling.

Steps to check or reproduce

Use only option parallax.
Parallax's options have selector, strength, ...
selector option indicates the image to parallax scroll.
strength option indicates parallax scroll speed.

If item has not the image indicated selector, this item does not apply parallax scrolling.

var ig = new eg.InfiniteGrid(container, {
	parallax: true,
/*
default
{
	selector: "img",
	strength: 1,
*/
});

// or 
var ig = new eg.InfiniteGrid(container, {
	parallax: {
		selector: ".thumbnail", 
		strength: 1, // default 1
	},
});

Image is longer than the area(item)

.item {
	height: 400px;
	overflow:hidden;
}
img {
	height: 600px;
}

Surrounding area is images's parent node.

<div class="item">
	<img src="...." class="thumbnail">
</div>

2017-09-21 1 58 25

Parallax scrolling use transform level 1.
This is supported from IE9 or later, but use with a prefix.

@sculove sculove added this to the v3.0.0 milestone Sep 21, 2017
@sculove sculove closed this as completed Nov 3, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants