-
AuthorPosts
-
August 3, 2016 at 7:50 pm #668234
Hey guys,
I am trying to make use of parallax scrolling for a background image in the first color section of a page, similar to this page http://kriesi.at/themes/enfold-restaurant/
The image in the above demo is positioned center center, I have to position mine left bottom, so that the lower part of the image is seen (before scrolling).
The way the parallax script works is to use the browser height for calculation, but it doesn’t respect the section height. In the demo above the same thing happens. The full image shows a plate at the bottom, but that plate is cut off, even if you give itbackground-position: center bottom;
Would it be possible to fix this and make the script use the section height for the translate3d calculation?
An one other thing: Why do you give an parallax image this style:
.avia-full-stretch { background-size: cover !important; }
?
This defeats the pupose of the background repeat setting and shouldn’t be necessary, should it?Thanks in advance
August 9, 2016 at 3:34 am #670131Hey Michael,
An one other thing: Why do you give an parallax image this style: .avia-full-stretch { background-size: cover !important; } ?
This is only set if you select the “Stretch to Fit” option. It will keep the images’ aspect ratio. http://www.w3schools.com/cssref/css3_pr_background-size.asp
The way the parallax script works is to use the browser height for calculation, but it doesn’t respect the section height. In the demo above the same thing happens. The full image shows a plate at the bottom, but that plate is cut off, even if you give it background-position: center bottom;
The height is calculated based on the browser height multiplied by avia-parallax-ratio plus the parent section height. It is cut off because the background-size property is set to “cover”. And it forces the image to cover the whole container but parts of the image have to overflow outside the container in order to keep its aspect ratio. We can set the background size to 100% or contain but it may distort the image or create huge white space around the parallax container.
Best regards,
IsmaelAugust 10, 2016 at 11:52 am #670791Hi Ismael,
The height is calculated based on the browser height multiplied by avia-parallax-ratio plus the parent section height.
I know, that’s exactly what I am saying is wrong resp. not very elegant. It would be better to ONLY use the parent section height multiplied by avia-parallax-ratio. Since we have no influence on the latter and cannot make that negative, the image size needed can never be higher than the parent section height and that is either fixed or a percentage (25%,50%,75%,100%) of the browser height. So if Kriesi would change the script to only use the parent section height for calculation, the whole thing would make much more sense.
I am not against the usage of “cover” there, it make most sense most of the time, but without a proper height calculation the positioning of the image is almost useless.
But apart from that, I still would prefer to be able to choose cover, contain or 100% – and surely will have to live with the results ;-)
This is only set if you select the “Stretch to Fit” option.
Not true, the avia-full-stretch class is always applied to any parallax image, no matter what you set in the options (e.g. see here http://dasschloss.info/ihr-event-im-schloss/). So it is a bug, right?
August 13, 2016 at 5:12 am #672172Hi,
I know, that’s exactly what I am saying is wrong resp. not very elegant. It would be better to ONLY use the parent section height multiplied by avia-parallax-ratio. Since we have no influence on the latter and cannot make that negative, the image size needed can never be higher than the parent section height and that is either fixed or a percentage (25%,50%,75%,100%) of the browser height. So if Kriesi would change the script to only use the parent section height for calculation, the whole thing would make much more sense.
Thank you for the info. Please request the feature here: https://kriesi.at/support/topic/enfold-feature-requests
Not true, the avia-full-stretch class is always applied to any parallax image, no matter what you set in the options (e.g. see here http://dasschloss.info/ihr-event-im-schloss/). So it is a bug, right?
Set the Background Repeat to “Scale to Fit”. Let us know if you can still see the “avia-full-stretch” class attribute.
Best regards,
IsmaelAugust 16, 2016 at 10:58 am #673125At “scale-to-fit” it does apply the class “avia-full-contain” but if you select “no-repeat” it gets “avia-full-stretch”. Scale-to-fit almost never makes sense unless you have a square background image.
And regarding the parallax calculation, that is not a feature request per se, but a hint, that something is not done the best way. Nobody would vote up some technicality like that, so it would be rather futile…
:-(
August 20, 2016 at 4:14 pm #675036Hi,
I’ve tagged Kriesi to this thread, in the meantime you can try modifying the parallax values at js/shortcodes.js, line 1967:
$.AviaParallaxElement = function(options, element) { ... }
Best regards,
JosueAugust 22, 2016 at 8:02 pm #676001Hi Josue,
I’ve been fiddling a little with the javascript, but since I am no java programmer, I can only try minor things and all those didn’t have the desired effect (the image was scaled correctly, but wasn’t positioned at the top anymore and so on).
So I’ll have to wait if you guys or Kriesi comes up with anything, otherwise I’ll have to make use of some plugin do do what we need.
I am having the same issue at another customer’s website, there we make use of the category headers in the shop. http://verlag-pfeil.de/fachrichtung/palaeontologie/
We have stopped using other theme mostly because Enfold is the best, most complete and very well coded. But the parallax is not on par with others. For example they do it right: http://bridge9.qodeinteractive.com/about-us/ (and they have one of the very very few themes, that come close to Enfold – but they all use VC and I try to avoid it)
August 25, 2016 at 5:59 am #677345August 25, 2016 at 10:15 pm #677776I think I understand now why Kriesi calculates the image the way he does, ’cause the calculation has to work no matter where the parallax section sits. E.g. if it is NOT the first row on a page, the image indeed has to cover the whole browser height.
I am so used to having the first row as parallax image and a transparent header on top, that I didn’t think about it more.BUT, that doesn’t mean you/he shouldn’t consider applying another calculation for the first row (the header section if you will), because there the image always is smaller than the parent section and so it’ll always cut of the bottom.
-
AuthorPosts
- You must be logged in to reply to this topic.