Section border shape change on scroll

[DoebankDesigns]

I’d like to make section/row borders change shape as the user scrolls. For example: themepunch.com

Can anyone point me in the right direction?

[Shikkediel]

The basic idea looks quite simple, placing two divs at the top of the section and change their size based on the scroll position. The triangle shape itself seems to have been done with the border trick.

https://css-tricks.com/snippets/css/css-triangle/

Essentially nice but quite horrible for page performance when used as an animation. It requires a lot of repaints that are noticeably slowing things down.

Here’s something (far from perfect) I alternatively threw together:

codepen.io/anon/pen/qRJYaB

I think transforms are a better way to go (they don’t require repaints)…

[DoebankDesigns]

I love this. Very well done. Unfortunately I’m having trouble implementing it. Hopefully I can play around with it enough to figure it out.

[Shikkediel]

Cheers, just post some code of what you’ve done if you get stuck. In a practical example, the #triangled div is likely better positioned absolutely as to not interfere with the content that follows.

Also thinking two pseudo elements as children would be nicer, I might post an updated version later on.

Edit:

codepen.io/anon/pen/wgYxdM

[DoebankDesigns]

Well, I’m trying to implement it on a WordPress site using Divi for a client. I imagine there are some special considerations here.

[Shikkediel]

I read that with Divi, one can’t use $ globally so I’ve made an edit to the revised demo where the document ready listener uses jQuery instead. That was one thing in any case that might not otherwise fire properly.

You’ll notice I also added another small function there, this limits the amount of function executions to four per second. Little bit of throttle-debounce for further optimisation.

[DoebankDesigns]

Hm. Now it’s just making the section disappear.

[Shikkediel]

Maybe you could share a link, if it’s live…

[DoebankDesigns]

I’ve set up a page to test this out: http://christandstlukes.flywheelsites.com/test/.

I put the JS in a custom.js file in the theme folder. I tried putting the CSS in a variety of different places, but nothing seemed to work.

[Shikkediel]

Something seems to be very much making the page hang on my machine. Not sure what’s going on and not able to check because it makes dev tools quite unusable… page becomes almost fully unresponsive, on the verge of crashing.

:-/

Edit – I can have a look at the page source though.

[DoebankDesigns]

That’s weird! I can view the page and pull up dev tools with no problem. Strange.

[Shikkediel]

Strange indeed but it must have been on my side. Solved now after restarting the browser. I’ll have a good look.

From what I’ve seen so far, there’s just no link to the CSS present in the source. Not familiar with WP or Divi so I can’t be of much help there.

Edit – the #triangled div holds the site’s header top content, something must have not gone right with inserting it.

[Author]

Posts