SVG clipped path accordion
How do I make an svg clipped path accordion?
What is a svg clipped path accordion? How do you make a svg clipped path accordion? This script and codes were developed by Yuri Morini on 24 November 2022, Thursday.
SVG clipped path accordion - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG clipped path accordion</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="top"> <div class="top__section" data-active="top-1"> <img src="https://images.unsplash.com/reserve/unsplash_528b27288f41f_1.JPG?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=" /> <h2 class="top__title"> Services </h2> </div> <div class="top__section" data-active="top-2"> <svg pointer-events="fill" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" > <clipPath id="clip" clipPathUnits="objectBoundingBox"> <polygon points="0,0 0.15,1 0.85,1 1,0" /> </clipPath> <g clip-path="url(#clip)"> <image xlink:href="https://images.unsplash.com/photo-1469461084727-4bfb496cf55a?dpr=1&auto=format&fit=crop&w=1080&h=715&q=80&cs=tinysrgb&crop=" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"></image> <image class="hover-image" xlink:href="https://images.unsplash.com/6/blurred_lines.jpeg?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"></image> <rect class="hover-block" width="100%" height="100%" opacity="0" /> </g> </svg> <h2 class="top__title"> Consulting </h2> </div> <div class="top__section" data-active="top-3"> <img src="https://images.unsplash.com/photo-1431631927486-6603c868ce5e?dpr=1&auto=format&fit=crop&w=1080&h=721&q=80&cs=tinysrgb&crop=" /> <h2 class="top__title"> Contacts </h2> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
SVG clipped path accordion - Script Codes CSS Codes
body { margin: 0; font-family: sans-serif;
}
.top { width: 100%; height: 670px; background: #f0f0f0; overflow:hidden; position: relative; cursor:pointer;
}
.top__section { width: 33.33%; height: 100%; position: absolute; top: 0; transition: all .5s ease;
}
.top__title { background: #000; color: #fff; position: absolute; z-index: 10; left: 50%; bottom: 50px; padding: 10px 20px; margin: 0; transform: translate(-50%, 0); transition: all .5s ease;
}
.top__section img { width: 100%; height: 100%; display: block; object-fit: cover; /* IE not aware */ position: relative; z-index: 0;
}
.top__section:nth-child(1) { left: 0; width: calc(35% + 20px);
}
.top__section:nth-child(3) { right: 0; width: calc(35% + 20px);
}
.top__section:nth-child(2) { left: 50%; width: 45%; transform: translateX(-50%); z-index: 10;
}
.hover-block,
.hover-image { opacity: 0; transition: all .5s ease;
}
.top .top__section:nth-child(1)::before,
.top .top__section:nth-child(3)::before { background-image: url("https://images.unsplash.com/6/blurred_lines.jpeg?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop="); content: ""; position: absolute; width: 100%; height: 100%; top:0; left:0; z-index: 2; opacity:0; transition: all 0.5s ease;
}
.top .top__section:nth-child(1)::after,
.top .top__section:nth-child(3)::after { content: ""; position: absolute; width: 100%; height: 100%; top:0; left:0; background-color: #000; opacity: 0; transition: all 0.5s ease; z-index:4;
}
.top.top-1 .top__section:nth-child(1)::before,
.top.top-3 .top__section:nth-child(3)::before,
.top.top-2 .hover-image { opacity: 1;
}
.top.top-1 .top__section:nth-child(3)::after,
.top.top-3 .top__section:nth-child(1)::after,
.top.top-1 .hover-block,
.top.top-3 .hover-block { opacity: .8;
}
.top.top-1 .top__section:nth-child(1) .top__title,
.top.top-2 .top__section:nth-child(2) .top__title,
.top.top-3 .top__section:nth-child(3) .top__title { bottom: 100px;
}
.top.top-1 .top__section:nth-child(2) { transform: translateX(calc(-50% + 20px));
}
.top.top-1 .top__section:nth-child(3) { transform: translateX(40px);
}
.top.top-1 .top__section:nth-child(2) .top__title,
.top.top-1 .top__section:nth-child(3) .top__title { opacity: .4;
}
.top.top-3 .top__section:nth-child(2) { transform: translateX(calc(-50% - 20px));
}
.top.top-3 .top__section:nth-child(1) { transform: translateX(-40px);
}
.top.top-3 .top__section:nth-child(1) .top__title,
.top.top-3 .top__section:nth-child(2) .top__title { opacity: .4;
}
.top.top-2 .top__section:nth-child(1) { transform: translateX(-20px);
}
.top.top-2 .top__section:nth-child(3) { transform: translateX(20px);
}
.top.top-2 .top__section:nth-child(1) .top__title,
.top.top-2 .top__section:nth-child(3) .top__title { opacity: .4;
}
.top.top-2 .top__section:nth-child(1)::after,
.top.top-2 .top__section:nth-child(3)::after { opacity: .5;
}
SVG clipped path accordion - Script Codes JS Codes
function getClass(el) { return el.getAttribute("data-active");
}
function removeAllClasses(classes, element) { classes.forEach(function(cls) { element.classList.remove(cls); });
}
document.addEventListener('DOMContentLoaded', function() { var els = document.querySelectorAll('[data-active]'), parent = document.querySelector('.top'), classes = [].map.call(els, function(el) { return getClass(el); }); [].forEach.call(els, function(el) { el.addEventListener('mouseover', function(e) { removeAllClasses(classes, parent); parent.classList.add(getClass(e.currentTarget)); }, false); }); parent.addEventListener('mouseleave', function(el) { removeAllClasses(classes, parent); }, false);
}, false);
Developer | Yuri Morini |
Username | yurimorini |
Uploaded | November 24, 2022 |
Rating | 3 |
Size | 3,035 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Faux column absolute wrapper | 1,823 Kb |
Albino button | 1,505 Kb |
A Pen by Yuri Morini | 2,464 Kb |
Line spinner | 1,736 Kb |
Testing minimal input field | 1,633 Kb |
Foundation Reveal error | 2,048 Kb |
Animated number transition. | 1,937 Kb |
Animation test | 1,998 Kb |
Extra canvas menu | 2,183 Kb |
Page slider | 2,044 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
React Markdown Previewer | C0d0er | 3,190 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
A Pen by Bryan | Brydave | 2,286 Kb |
Minimelephant | Smashlee | 2,507 Kb |
Algorithm practice | Abensur | 5,620 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
CSS Heart Loaders | Nourabusoud | 2,161 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!