-
AuthorPosts
-
September 27, 2024 at 9:00 am #1467918
We have an image (not a background image) that is working as a faux-mask on the slider so it appears to have a curved bottom.
However, if the screen size is bigger than 1920×1080, it simply stops.
Is there a way to make this image stay anchored to the bottom, but stretch horizontally if the resolution is greater than 1920×1080?
September 27, 2024 at 11:29 am #1467931Can I have a look at this page? ( if you could not post the link here – send me an e-mail)
because I think it’s easier to achieve this in another way.f.e. this way: https://webers-testseite.de/divider-on-sliders/
at the moment i try to use the given curve divider – that does not fit because it is a konvex Curve … so be a bit patient.
we can use the konvex Curve of Enfold – but we use than that negative option (invert) – in this way we had to differ on how to transform the divider svg.
so snippet gets an if / else clause now.- This reply was modified 2 weeks, 3 days ago by Guenni007.
September 27, 2024 at 1:33 pm #1467949September 28, 2024 at 9:45 am #1467987a different much easier way is using clip-path on those slider wrappers by an inline svg file ( path has to be in relative values – convert for example here: link )
but disadvantage: you have to synchronize the background-color of that section to the next section – otherwise you got a gap (see green area on example page at the bottom)<svg class="bottom-curve"> <clipPath id="bottom-curve" clipPathUnits="objectBoundingBox"><path d="M1,0.9 s-0.25,0.1,-0.5,0.1 S0,0.9,0,0.9 V0 h1 v0.9"></path></clipPath> </svg> <style> .bottom-curve > div { -webkit-clip-path: url(#bottom-curve); clip-path: url(#bottom-curve); } </style>
you see how this works – give then the custom-class: bottom-curve to the slider element or to the color-section.
October 1, 2024 at 12:03 pm #1468163Where does this code go?
<svg class="bottom-curve"> <clipPath id="bottom-curve" clipPathUnits="objectBoundingBox"><path d="M1,0.9 s-0.25,0.1,-0.5,0.1 S0,0.9,0,0.9 V0 h1 v0.9"></path></clipPath> </svg> <style> .bottom-curve > div { -webkit-clip-path: url(#bottom-curve); clip-path: url(#bottom-curve); } </style>
October 1, 2024 at 12:08 pm #1468164I added but nothing happened
function top_divider_moves_outwards(){ ?> <script type="text/javascript"> window.addEventListener("DOMContentLoaded", function () { (function($) { $('#top .avia-section.outwards').each( function() { var bgColor = $(this).css('background-color'); if($(this).children().hasClass('avia-svg-negative')){ $(this).find('.avia-divider-svg.avia-divider-svg-top').css({ "transform-origin" : "top center", "-webkit-transform" : "translateY(-100%)", "transform" : "translateY(-100%)", "z-index" : "100", }); } else{ $(this).find('.avia-divider-svg.avia-divider-svg-top').css({ "transform-origin" : "top center", "-webkit-transform" : "rotate(180deg)", "transform" : "rotate(180deg)", "z-index" : "100", }); } $(this).not(".preserve-color").find(".avia-divider-svg-top > svg").css('fill', bgColor); }); })(jQuery); }); </script> <?php } add_action('wp_footer', 'top_divider_moves_outwards');
October 3, 2024 at 4:52 pm #1468371 -
AuthorPosts
- You must be logged in to reply to this topic.