-
Posts
-
Hi,
I’ve already set a flex column with an image element and I want to add a parallax effect to it.
I know you can make parallax color sections but in this case I need to parallax only an element inside the color section. I know it’s possible through CSS but everything I’ve tried doesn’t work.
Can you help?
thanks,
YaelOh, forgot the link:
https://backpack25o.wpengine.com/?page_id=38Hi,
Thank you for using Enfold.
Could you please provide a screenshot of the image or element that you want to modify? Have you tried adding the the image as column background? Add a custom css class attribute to the column then set the background-attachment property to “fixed”. Use the Separator / Whitespace element to create an invisible content inside the column.
// http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Best regards,
IsmaelIt’s the big helmet on this page: https://backpack25o.wpengine.com/?page_id=38
I didn’t really understand your suggestion… I’m attaching my credentials, can you take a look?Hi,
Sorry for the delay. I kind of destroyed the layout of the page a bit. Do you have a backup of the page? And could you please provide an example of the parallax effect that you’re after? Is this the image that you want to modify?
Best regards,
IsmaelHi,
No worries and yes, that is the right image.
I want it to move like it does in here:
https://ls2helmets.com/il/road-racing/arrow-cThanks,
YaelHi,
Thank you for the info. We created an example in the following test page.
// http://backpack25o.wpengine.com/?page_id=439 (hosted on WPengine)
Best regards,
IsmaelSorry for warming up this old thread, but could you pls provide your solution again, because I try to achieve the same feature?
Thanx
ManuHi Manu,
Parallax is only available in the color section as of now.
If you need further assistance please let us know.
Best regards,
VictoriaHi Manu,
Parallax is only available in the color section as of now.
If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
sry for asking again, but it seems that Ismael provided a solution to achieve the same effect like the helmet in the third section of this link: https://ls2helmets.com/il/road-racing/arrow-cj
So could you please check this again?
Regards,
ManuHi Manu,
That page is going to a 404 page. But I’ll ask Ismael to reply here for you.
Best regards,
VictoriaHey!
@brandpirate: Honestly, we already forgot what we did here. Can you create a new thread/ticket and post the details in the private field? The page that you posted above leads to 404.Best regards,
IsmaelHey Ismael,
thx for reply, but if this link doesnt work pls scroll up and click on the link from yaelbar (24th of may 2017). This works for me. If it doesnt work for you, I will open another thread.
Cheers
ManuHi,
The site is not using the Enfold theme. Anyway, he added the parallax script in the custom.js file. (see private field)
This is the script:
$(window).bind('scroll', function () { $('.parallax').each(function () { var $$ = $(this); offset = $$.offset(); windowTop = $(window).scrollTop(); var ajuste = (($$.height() - $$.parent('div').height()) / 2); ///50 h menu var newCoord = ((offset.top - windowTop) * 0.25) - ajuste; $$.css({ 'transform': 'translateY( ' + (newCoord) + 'px)' }); }); });The image tag’s class attribute should contain a value called parallax.
Example:
<img src="https://site.com/img/pages/helmet.png" alt="" class="itembackground parallax">Best regards,
IsmaelHey Ismael,
thank you for your reply. I put this code into my child-themes function php, but the got an error and couldn’t save it. Is there a syntax?
syntax error, unexpected '(', expecting variable (T_VARIABLE) or '{' or '$'Hi,
You have to add the code in an external file, or use the following hook to insert it directly in the head tag.
// https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/#add-a-script-to-head-section
// https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/#add-a-script-to-footer-sectionBest regards,
IsmaelHey Ismael,
first of all I want to thank you for your help. I decided to use a themeforest-plugin instead from Scrollmagic that does the trick. So you can close this thread (but I will try your solution later on).
If you want, you can have a look at my site to watch the parallax-effect: https://hochzeitsfotograf-coburg.com/
Thx
Manuhm – on your page i wouldn’t call this a parallax effect. Anyway – i did it similar to Ismael but a bit easier to understand.
See here : https://webers-testseite.de/images-in-motion/by the way what plugin is your choice now?
Hi Günni,
first of all I want to say thank you because of your incredible useful tips across all topics here in the Enfold forum that often helped me solving my problems.
To your post: A parallax effect uses different movement speeds across various levels of content. Here I use up to three levels: a background and one or two layers (background, text, image) – all with different movement speed. So yes I would call it parallax – connected to scroll. Sadly your example works only with mobile devices for me (and there its jittering a lot). On my mac (with up to date Chrome) It doesnt do anything, but it would be very great to get this to work. And the plugin of my choice is called “Scrollmagic for WordPress” (codecanyon). The plugin has a very easy to use graphic user interface – very intuitive and it also can draw svg on scroll – but there is also (I think a free?) non graphical version.
Cheers
ManuLink to the addon: https://codecanyon.net/item/scroll-magic-wordpress-scrolling-animation-builder-plugin/19418234
non-graphic version: https://scrollmagic.io/yes you are right – i had to erase the webp test on my test-page and include a throttle function.
now it runs on chrome and on a ipad mini – but on both too buggy – it maybe a matter of my functions.php on that test-page of more than 2000 lines.So i test now ismaels version!
- You must be logged in to reply to this topic.