This was a request from @lindsayscholz on the Squarespace Forums and she was looking at modifying her client's Gallery Reel Section to have a more eye-catching and unique design.
This one isn't too complicated and allows for a fair bit of room to customise and play around with it. You'll probably want to adjust further for mobile but this should get you far enough.
There is one caveat which is that the Last Slide animates in a bit of a jerky manner. If I come up with a fix, I'll update it in the comments.
As it's pure CSS, this will work on any Squarespace plan and, although I do go discuss the reasoning and logic behind some of the edits, it should be easy enough to follow, even for a beginner.
Feel free to ask any questions in the comments below, if you get stuck. Otherwise, you can grab a copy of the CSS from the bottom of this description.
=============================================
If my tutorials/tips have helped you, feel free to send me some coffee as a thank you :)
www.kwameand.co/say-thanks
Interested in more Squarespace tutorials, tips and tricks?
Why not visit the SquareSkills website for more content like this:
www.SquareSkills.dev
/ squareskills
/ squareskills
If you're looking for something specific, some custom design, development or coding work, you can reach out to me via my website:
www.kwameand.co
/ heykwame
/ kwameand.co
Here's the code used in the video. You can modify the properties to tailor it to match your branding and style - or take it even further.
=============================================
Insert into Custom CSS:
/*-------------------------------
Focus Center Tile Gallery Reel
Squareskills.dev
-------------------------------*/
SECTIONID {
padding: 12vh 0; //increase/decrease/remove as you like
}
//
.gallery-reel-item-wrapper {
box-sizing: border-box;
border: YOUR BORDER SETTINGS HERE;
transform: scale(.9); //any value less than 1
transition: transform .3s linear; //adjust timings
}
//full-sized focus tile
.gallery-reel-item[data-active="true"] .gallery-reel-item-wrapper {
transform: scale(1);
}
//reposition arrows
.gallery-reel-controls {
align-items: flex-end;
height: calc(100% + 9vh); //Use 1/2 section top/bottom padding
}
//hide arrow background
.gallery-reel-control-btn::before {
display: none;
}
7 авг 2024
