-
Posts
-
I’m using the Fullscreen Slider element to create parallax sections on this site — http://b8n.e86.myftpupload.com/ — and it looks like only the bottom of the sections actually parallax — the top edges look fixed. I guess the best example of this is the middle image on the home page, there — the image of the school’s back yard, with the playhouse. Do you understand what I’m referring to? Is there any way of creating the parallax effect on both the top and bottom edges? Is there something about the parallax in those Fullscreen Slider elements that only works on the bottom edge?
Thanks!
Hey sky19er,
Thank you for using Enfold.
The theme’s parallax effect is quite subtle but you can adjust the speed with this filter.
add_filter('avf_parallax_speed','avia_change_parallax_ratio', 10, 2); function avia_change_parallax_ratio($ratio, $id){ $ratio = "0.8"; return $ratio; }That filter will also affect the parallax container height. Default value is 0.3. If you need a parallax effect that is more prominent, try to use the Layer Slider. Configure the layer’s Transition > Parallax Transition options.
Best regards,
IsmaelThanks for the parallax suggestion — since my client wants the parallax to work on phones, the layerslider seems like the way to go (seem to be working in mobile). But I can’t figure out how to get the layerslider to be more responsive — I’d like it to cover more height in portrait layouts (crop off some of the sides of the images, so it can cover more height). I have the layout set to responsive in the layerslider, and I’ve tinkered with the options, but I haven’t been able to achieve that yet — do you know how to do that? It’s the garden/playhouse shot, about half-way down http://b8n.e86.myftpupload.com/
Thanks!
Hi,
Have you tried adding the image as a layer instead of a slide background? That’s what I did on my installation. You may need to resize the image until it overflows outside the container.
Best regards,
IsmaelYes, I’m using the image as a layer — I don’t think you can get a parallax with just a background, can you? And I don’t want to increase the width of the image wider than the canvas — we still want to show the whole image on the desktop version. Any other ideas?
Thanks!
Hi,
I don’t think you can do that without cutting the image or making it larger than parent container — that’s just how parallax effect works.
Best regards,
IsmaelWell, I only need vertical parallax — it sounded like you were saying I might need to enlarge it horizontally. But that’s basically what I’ve found, from my research, is that the only way to get something looking truly responsive is to actually create different sliders for the various screen widths. Then, you don’t technically “enlarge” the image, but I change the aspect ratio fo the canvas so, yes, for the narrower, portrait, mobile viewports, the image gets cropped on the sides, allowing for more of a square or even portrait layout. Then you can use the Settings > Mobile > Hide Under/Over to show/hide the sliders depending on the screen width. Very cumbersome, but it does result, effectively, in parallax for mobile.
Please let me/us know if you hear of way of creating a truly responsive, full-width, parallax section without having to create three different layer sliders ;)
- The topic ‘fullscreen slider parallax only on bottom’ is closed to new replies.