-
Posts
-
Hi,
the current scenario is that we can apply a parallax effect to a column that START IN A POSITION (placed with the the AVIA builder) and it move TO ANOTHER POSITION (to left, to right, to bottom) following the mouse scrolling.I need the opposite movement… i want that this column will move FROM ANOTHER POSITION (for ex. from out of the page) TO THE BUILDED POSITION (placed with the the AVIA builder)
The effect desired will be a visual composition of the page that follow the mouse scroll.
For example when i visit the page the screen is blank and when i scroll down the page all elements comes FROM left and MOVE TO the desired position builded in the AVIA builder.
under Advanced Tab you got Position – try first relative and the set negative Values – even % or vw will work.
using absolute: – think of that a floating container to the right will shift to the left side then.
f.e. two 1/2 columnsMy try is:
Position relative -50vw (Ok it starts outside de viewport)
Parallax left_to_right 50% (It moves from left to right but it don’t stop at the right position, it continues to move to right)
I’m wrong?A great improvement for ENFOLD will be a setting that can set the parallax movement from START VALUE to the END VALUE when the values are relative to the CSS X/Y translate. Value 0 is the position defined in the Avia Builder.
Example scrolling page down:
PARALLAX X
0 -> 100px move a div from its own position 100px to right, then stops (reverse when scroll up)
0 -> -100px move a div from its own position 100px to left, then stops (reverse when scroll up)
-100px -> 0 move a div from 100px on the left to right to its own position then stops (reverse when scroll up)
100px -> 0 move a div from 100px on the right to left to its own position then stops (reverse when scroll up)For moderator this is a solution for this scenario.
“Column starts outside the viewport and it places at it’s position depending on scrolling the page”File avia-snippet-parallax.js line 467 mod
case ‘left_right’:
scrollPos = Math.ceil( this.elProperty.distanceRight * scrolled_pc_toTop * this.speed );
transform.x = scrollPos;
var leftmargin = this.winWidth -this.elProperty.distanceRight +this.elProperty.width;
if (scrollPos<leftmargin) {
matrix = this._getTranslateMatrix( this.elProperty.translateObj, { x: -leftmargin +scrollPos } );
} else {
matrix = this._getTranslateMatrix( this.elProperty.translateObj, { x: 0 } );
}Hi,
Thanks for sharing your solution, perhaps this will help someone in the future. If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
If you would like to request this as a feature the Dev Team has opened a new Github Feature Request for users to place requests and follow them as the Dev Team reviews them.Best regards,
Mike
- The topic ‘Parallax column effect reverse’ is closed to new replies.