Comments (6)
@thewebsitedev that negative Y value depends really on the speed
you pass. It can be both positive and negative. And if you use center: true
-- it gets clamped between -5
and 5
.
Hey @moeamaya I gave a thought to the problem of the blank spaces being created, specifically when using the center: true
option.
Take a look at that picture (sorry for bad drawing, not really good at it):
So,
- the gray area is the whole page
- the yellow rectangle is the div that's being moved with
translate3d
, withcenter: true
- green rectangle is a static container and the yellow area gets centered relatively to that particular container
If I understand correctly, the center: true
option does just that: Adjusts the translate3d
value so that when the user scrolls to the element (our yellow area) and it is being right on the center of the viewport -- it has 0
translation.
That is, in order to make sure we never create a blank space, we have to make sure that X
and Y
(from the drawing) never become less than zero. And we'll have to adjust the height of the yellow area so that it stays that way -- and we'll need to consider here the speed
at which the yellow area is translating up or down.
What I'm looking for, is a simple way of computing those X
and Y
values, knowing the speed
of the parallax.
I think that should somehow push us toward a solution for that issue.
Does any of that make any sense?
from rellax.
centering: true
helps however it no longer centers once the window is resized. I know it's kind of a thing related to responsive testing and not REALLY a real life use case, but it'd be nice to have some function to re-center stuff after the window size has changed.
Additionally I was having an issue with horizontally centering an absolutely positioned box, because the translate3d inline is overriding my CSS for translateX, if these properties were separated out rather than all in one, could help with these types of bugs.
from rellax.
@chaddattilio-lyons Yea this is definitely a problem. I don't have an immediate solution outside of using the centering: true
feature.
from rellax.
Checked the demo, translate Y values are negative but when I tried locally translate Y values are positive. This resulted in image staying at the same position as the container div is moved. So I modified the code a bit to get negative values and that fixed the issue for me.
from rellax.
I'm not sure if this is the right solution, but this seems to work for me:
In the createBlocks
method I store all CSS styles as a property on each block:
const computedStyle = document.defaultView.getComputedStyle(el);
const transform = computedStyle.transform;
This will result in a property like: matrix(1, 0, 0, 1, -176, 0)
. It will be stored in the array of blocks
.
Instead of checking for inline styles and placing those in the transform
property after the translate3d
which results in the following inline CSS property:
transform: translate3d(0px, -22px, 0px) matrix(1, 0, 0, 1, -176, 0)
This property is then set on the element within the animate
method:
// Move that element
// (Set the new translation and append initial inline transforms.)
const translate = `translate3d(${
self.options.horizontal ? positionX : '0'
}px,${self.options.vertical ? positionY : '0'}px,${zindex}px) ${
blocks[i].transform
}`;
from rellax.
Hi @vernondegoede is it still working? Tried it out and it doesn't seem to run. Where exactly in the code is it supposed be placed at?
from rellax.
Related Issues (20)
- Seemingly incompatible with smooth-scroll libraries HOT 6
- parallax effect seems to break with changing window size of page. HOT 1
- Angular, Can't bind to 'data-rellax-percentage' since it isn't a known property of 'div'
- Feature request: speed as a function HOT 1
- Blazor incompatibility? HOT 1
- When applied to an svg element gets flipped?
- Start the animation before Rellax Item enters Viewport HOT 5
- Parallax for relative positioned element HOT 2
- Custom angle
- Efficiency Problem
- Callbacks and doing things with them HOT 1
- How to make rellax positions "predictable"? HOT 1
- Horizontal scroll-axis-x data-rellax-max-x and data-rellax-min-x number is not working. HOT 1
- Problem when used on the same page as JS accordion HOT 1
- Choppiness on Chrome
- USE WITH IONIC
- es6 version?
- x
- Positioning issues with long pages
- Positioning issues with long pages, translate values differ on page by page basis
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rellax.