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

Parallax effect options [enhancement] #60

Closed
pedro-mendonca opened this Issue Oct 20, 2016 · 8 comments

Comments

Projects
None yet
3 participants
@pedro-mendonca
Contributor

pedro-mendonca commented Oct 20, 2016

Hi @andrew-worsfold

Congratulations for this great page builder.
I just tried to use the parallax effect on a section, but there is an issue that might prevent me to use it. It's speed, it seems that the background now is scrolling faster than the actual page scroll. To obtain a background moving effect, it's better to have it scrolling slower than the page itself.

Would be nice to have a setting, a textinput with a speed number, or a slider where you can control it's speed:

screenshot 2016-10-20 09 20 16

  • -1 - Slower than page
  • 0 - No Parallax
  • +1 - Faster than page

Currently it looks like the setting is Faster than page, It would be nice to also have the possibility to slide it somewhere -1 and 0, being 0 as parallax disabled.

Regards

@andrew-worsfold

This comment has been minimized.

Contributor

andrew-worsfold commented Oct 20, 2016

Thanks for the suggestion, @pedro-mendonca.

If I understand you correctly though, I am seeing the opposite. Any chance you could provide a screencast (or similar) so that I can see what you're seeing?

Cheers,
Andrew.

@pedro-mendonca

This comment has been minimized.

Contributor

pedro-mendonca commented Oct 20, 2016

Hi,
Yes of course, live or should I make a gif of it?

@reefki

This comment has been minimized.

Contributor

reefki commented Oct 20, 2016

I think you can use CSS transition to make it smoother:

.tailor-section__background {
    transition: transform 0.3s ease;
}
@pedro-mendonca

This comment has been minimized.

Contributor

pedro-mendonca commented Oct 20, 2016

Here is what I see, the background is faster than the page. This isn't an ease issue, as it only eases it, but won't reverse it's direction.
Only have Tailor plugin active and Tailor Sample Theme

upwg5pu6j1

@andrew-worsfold andrew-worsfold added the bug label Nov 27, 2016

@andrew-worsfold andrew-worsfold self-assigned this Nov 27, 2016

@andrew-worsfold andrew-worsfold added this to the 1.7.6 milestone Nov 27, 2016

andrew-worsfold referenced this issue Nov 27, 2016

Tailor 1.7.6.
* Added - Element label when hovering over an element in the preview window.
* Improved - Columns now use percentage widths, instead of a 12 column grid system.
* Improved - Up to six columns can now be added to a single row instead of four (and of course you can still nest rows).
* Improved - Background image parallax effect [GitHub 60](https://github.com/andrew-worsfold/tailor/issues/60).
* Improved - Dynamic element CSS rules now supports SCSS-like syntax (e.g., :, :: and & special characters);
* Fixed - General color settings appear in the Tailor colors Customizer section for some themes [GitHub 73](https://github.com/andrew-worsfold/tailor/issues/73).
* Fixed - An error message is displayed if get_current_screen() is not defined [GitHub PR 74](https://github.com/andrew-worsfold/tailor/pull/74).
* Fixed - Elements are loaded too early, causing an issue with the New User Approve plugin [GitHub 75](https://github.com/andrew-worsfold/tailor/issues/75).
* Fixed - Graphic color not being displayed correctly when upgrading from early versions of Tailor.
* Fixed - Some units (for example "vw" and "vh" when setting minimum width and height) not being accepted in preview.
* Fixed - Masonry-enabled elements do not refresh when their parent element changes.
* Removed - Maximum 75rem width (CSS property) for Section content (use maximum width setting instead, if required).
@andrew-worsfold

This comment has been minimized.

Contributor

andrew-worsfold commented Nov 27, 2016

@pedro-mendonca -

Apologies for the delay in getting around to this. I've committed a change to address what you're seeing. Could you please let me know if everything's looking and behaving as expected now?

Cheers,
Andrew.

@andrew-worsfold

This comment has been minimized.

Contributor

andrew-worsfold commented Dec 3, 2016

@pedro-mendonca -

This is, based on my testing, now working properly (and in accordance with your description above). As I've not heard anything from you I will close the issue, however please don't hesitate to reopen it if you believe more changes are required.

Cheers,
Andrew.

@pedro-mendonca

This comment has been minimized.

Contributor

pedro-mendonca commented Dec 3, 2016

Hi @andrew-worsfold
Sorry for the long wait. Yes, it's working great now, the movement now looks like a distant background as supposed.
Nice job! Thanks :)
👍

@andrew-worsfold

This comment has been minimized.

Contributor

andrew-worsfold commented Dec 4, 2016

Great! Thanks for confirming, @pedro-mendonca! 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment