Love it @Noah! These scripts are 🔥.
Keep 'em coming!
Amazing!
We were replicating this effect using background images, but this will be so much neater & easier to manage!
Thank you!
Awesome @Stefano, happy to hear this will help 🙂
That’s really awesome (and super lightweight - it’ll keep that quality score intact! 😃 ). I’m excited to see what kind of neat stuff is about to start happening thanks to CSS4, if this is any indicator of what we can expect. Thanks, @Noah!
Agreed on CSS4! These guys are going to have a field day with that framework. 😃
HNNNNNNNGH It’s a great time to be an Unbounce power user. 😃
This is an awesome script, by the way! 👍
Question: How can you make it so that it angles the other way (aka angles up to the left)?
Good question @Michelle. To change the angle of a bottom, you need to change the skewY value from a negative to a positive and change the transform-origin value from 100% to 0% (and do the opposite for a top). Give it a try and let me know how it goes!
This is awesome! However, I’m running into a bit of a snag with this. My sections are showing up choppy when I add an image as a background. Any suggestions?
http://d.pr/i/WEeFNC
Hey!
I am actually experiencing the exact same thing. If I come up with a solution before @Noah does, I will post it here 🙌
Hey @hellojules
So we worked around this by setting both sections above and below the panel with the image background to have angles, so that the background image does not break.
Let me know if you need a hand getting this to work!
Thanks for the workaround, @Stefano. This makes sense.
Thanks!
@Stefano - Can you give me an example of how you did it? I tried something similar and still had the angles not able to sit overtop of the image without the white break. Instead, there was just a white space where the angles climbed/dropped on the bottom of the top section and the top of the bottom section.
Sure! Here is my code.
#lp-pom-block-31 is the section above the section I want angled, which is why it is set to “:after” and #lp-pom-block-13 is the section directly below which is why it is set to “:before”. I am not setting anything to my section w/ the background.
Let me know if this helps!
<style>
/*This ensures diagonal bg doesn't block page content*/
.lp-positioned-content{
z-index: 100;
}
/*Replace #lp-pom-block-34 with your section ID to create an angled bottom*/
#lp-pom-block-31:after{
background: inherit;
bottom: 0;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-2.00deg); /*change to increase/decrease angle*/
transform-origin: 100%;
z-index: 1;
}
/*Replace #lp-pom-block-34 with your section ID to create an angled top*/
#lp-pom-block-13:after{
background: inherit;
bottom: 0;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(2.00deg); /*change to increase/decrease angle*/
transform-origin: 0;
z-index: 1;
}
#lp-pom-block-13:before{
background: inherit;
top: 0;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-2.00deg); /*change to increase/decrease angle*/
transform-origin: 0;
z-index: 1;
}
</style>
@Stefano AH! I see where my mistake was. Awesome, thanks Stefano!
do you have an example of this?
@noah or @Stefano have you tried using this with an image? Up until now I had only used solid color backgrounds and it has worked smooth as silk… but I just tried it with an image and it is no bueno 😦
The image repeats half way through the section. Is there a way to have this work with full width background images? Or is this really only for solid color backgrounds?
Joe
I had the same issue with images – couldn’t get it to work 😦
Hey @Joe_Savitch, I’d recommend applying the angled top/bottom to the sections before and after your section with the background image.
Hey Joe!
My workaround was the same as Noah’s below… let me know if that works for you? I was having the same issues when having photos in the bg.
@noah… brilliant. Simple solution.
Joe
Angled Hero Images & Gradients
For brand imagery and gradients in the hero/top section of a landing page, I adjusted @Noah original code and changed the “after” background element from inherit to “linear”.
Below is the adjusted code for the “after” section of code.
}
#lp-pom-block-8:after{
background: linear;
bottom: 0;
content: ‘’;
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-5deg);
transform-origin: 100%;
z-index: 1;
}
// Yosh
Like others, I’m having issues with background images repeating and also skewing the image itself and am having difficulty trouble-shooting the cause.
to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks
