Sticky logo
How do I make an sticky logo?
What is a sticky logo? How do you make a sticky logo? This script and codes were developed by Houbly on 04 November 2022, Friday.
Sticky logo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky logo</title> <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="logo"> <a href="#" class="day" title="Day One"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 147 147"> <title>Day One</title> <path d="M-1443.9,1334.6a33.2,33.2,0,0,0-18.3-7.6h-2.2a31.5,31.5,0,0,0-31.5,31.5,31.3,31.3,0,0,0,4.5,16.1,1.4,1.4,0,0,0,1.2.7h12.9a1.4,1.4,0,0,0,1.2-2.2c-2-3.1-5.2-8.8-5.2-14.6a16.8,16.8,0,0,1,16.8-16.8,16.8,16.8,0,0,1,15,9.3,1.4,1.4,0,0,0,2.1.5l9.9-6.3a1.4,1.4,0,0,0,.5-1.9A31.4,31.4,0,0,0-1443.9,1334.6Z" transform="translate(1539 -1278.4)" fill="#D2DA46" fill-rule="evenodd"/> </svg></a> <a href="#" class="day" title="Day Two"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146.5 146.5"> <title>Day Two</title> <path d="M-905.5,1626.9v-45.2a1.4,1.4,0,0,1,1.4-1.4h13.1a1.4,1.4,0,0,1,1.4,1.4v45.2a1.4,1.4,0,0,1-1.4,1.4h-13.1A1.4,1.4,0,0,1-905.5,1626.9Z" transform="translate(970.8 -1531.1)" fill="#D2DA46" fill-rule="evenodd"/> </svg></a> <a href="#" class="day" title="Day Three"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146.5 146.5"> <title>Day Three</title> <path d="M-723.5,1615.5h-1.1a1.4,1.4,0,0,1-1.3-.8l-15.8-33.4a1.4,1.4,0,0,0-1.3-.8h-12.3a1.4,1.4,0,0,0-1.3,2.1l21.3,45.1a1.4,1.4,0,0,0,1.3.8h20.1a1.4,1.4,0,0,0,1.3-.8l21.3-45.1a1.4,1.4,0,0,0-1.3-2.1h-12.8a1.4,1.4,0,0,0-1.3.8l-15.6,33.4A1.4,1.4,0,0,1-723.5,1615.5Z" transform="translate(797.1 -1531.1)" fill="#D2DA46" fill-rule="evenodd"/> </svg>
</a> <a href="#" class="day" title="Day Four"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146.5 146.5"> <title>Day Four</title> <path d="M-1093.3,1620.9a33.2,33.2,0,0,0,18.3,7.6h2.2a31.5,31.5,0,0,0,31.5-31.5,31.3,31.3,0,0,0-4.5-16.1,1.4,1.4,0,0,0-1.2-.7H-1060a1.4,1.4,0,0,0-1.2,2.2c2,3.1,5.2,8.8,5.2,14.6a16.8,16.8,0,0,1-16.8,16.8,16.8,16.8,0,0,1-15-9.3,1.4,1.4,0,0,0-2.1-.5l-9.9,6.4a1.4,1.4,0,0,0-.5,1.9A32.4,32.4,0,0,0-1093.3,1620.9Z" transform="translate(1144.4 -1531.1)" fill="#009649" fill-rule="evenodd"/> </svg></a> <a href="#" class="day" title="Day Five"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146.5 146.5"> <title>Day Five</title> <path d="M-905.5,1626.9v-45.2a1.4,1.4,0,0,1,1.4-1.4h13.1a1.4,1.4,0,0,1,1.4,1.4v45.2a1.4,1.4,0,0,1-1.4,1.4h-13.1A1.4,1.4,0,0,1-905.5,1626.9Z" transform="translate(970.8 -1531.1)" fill="#009649" fill-rule="evenodd"/> </svg></a> <a href="#" class="day" title="Day Six"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146.5 146.5"> <title>Day Six</title> <path d="M-724.2,1593.3h1.1a1.4,1.4,0,0,1,1.3.8l15.8,33.4a1.4,1.4,0,0,0,1.3.8h12.3a1.4,1.4,0,0,0,1.3-2.1l-21.3-45.1a1.4,1.4,0,0,0-1.3-.8h-20.1a1.4,1.4,0,0,0-1.3.8l-21.3,45.1a1.4,1.4,0,0,0,1.3,2.1h12.8a1.4,1.4,0,0,0,1.3-.8l15.6-33.4A1.4,1.4,0,0,1-724.2,1593.3Z" transform="translate(797.1 -1531.1)" fill="#009649" fill-rule="evenodd"/> </svg>
</a>
<!-- Have to divide the goo background from the content because z-index can't stop them overlapping --> <div class="goo-cont"> <div class="goo-sq"></div> <div class="goo-sq"></div> <div class="goo-sq"></div> <div class="goo-sq"></div> <div class="goo-sq"></div> <div class="goo-sq"></div> </div> <h1>Six Days Creative</h1>
</div>
<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<!-- This one makes the rounded corner boxes finish nicer --> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs>
</svg> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Sticky logo - Script Codes CSS Codes
body { background: #e0e0c9; font-family: "Lato", sans-serif;
}
.logo { max-width: 600px; margin: 0 auto; width: 100%; height: 400px; position: relative; cursor: pointer;
}
.logo h1 { color: #9a9a9a; font-size: 1.5em; font-weight: normal; letter-spacing: 0.5em; margin-right: -0.325em; text-transform: uppercase; word-spacing: -0.65em; text-align: center; position: absolute; bottom: 1em; width: 100%; right: 0; transition: all 0.2s ease-out;
}
.logo:hover .goo-sq, .logo:hover .day { transition: transform 0.5s cubic-bezier(0.73, 1.18, 0.91, 1.06);
}
.logo:hover .goo-sq:nth-child(1), .logo:hover .day:nth-child(1) { transform: translateX(-120%);
}
.logo:hover .goo-sq:nth-child(3), .logo:hover .day:nth-child(3) { transform: translateX(120%);
}
.logo:hover .goo-sq:nth-child(4), .logo:hover .day:nth-child(4) { transform: translateX(-120%);
}
.logo:hover .goo-sq:nth-child(6), .logo:hover .day:nth-child(6) { transform: translateX(120%);
}
.logo.xy:hover h1 { opacity: 0; transform: translateY(1em);
}
.logo.xy:hover .day::before { opacity: 1; transition: opacity 0.4s 0.4s ease-out;
}
.logo.xy:hover .day::after { content: ''; position: absolute; z-index: -10; left: 0; top: 0; width: 100%; height: 100%; border-radius: 15%; opacity: 0; box-shadow: 0 0 1.75em 0.25em white; transition: opacity 0.2s ease-in;
}
.logo.xy:hover .day:hover::after { opacity: 1;
}
.logo.xy:hover .goo-sq, .logo.xy:hover .day { transition: transform 0.25s cubic-bezier(0.73, 1.18, 0.91, 1.06);
}
.logo.xy:hover .goo-sq:nth-child(1), .logo.xy:hover .day:nth-child(1) { transform: translate(-120%, -40%) scale(0.8);
}
.logo.xy:hover .goo-sq:nth-child(2), .logo.xy:hover .day:nth-child(2) { transform: translateY(-40%) scale(0.8); transition-delay: 0.15s;
}
.logo.xy:hover .goo-sq:nth-child(3), .logo.xy:hover .day:nth-child(3) { transform: translate(120%, -40%) scale(0.8); transition-delay: 0.3s;
}
.logo.xy:hover .goo-sq:nth-child(4), .logo.xy:hover .day:nth-child(4) { transform: translate(-120%, 40%) scale(0.8); transition-delay: 0.1s;
}
.logo.xy:hover .goo-sq:nth-child(5), .logo.xy:hover .day:nth-child(5) { transform: translateY(40%) scale(0.8); transition-delay: 0.25s;
}
.logo.xy:hover .goo-sq:nth-child(6), .logo.xy:hover .day:nth-child(6) { transform: translate(120%, 40%) scale(0.8); transition-delay: 0.4s;
}
.day { width: 150px; height: 150px; display: block; position: absolute; border-radius: 12%; left: 50%; top: 50%; margin-left: -75px; z-index: 20; transition: transform 0.15s cubic-bezier(0.89, 0.47, 1, 0.86);
}
.day::before { content: attr(title); font-size: 0.875em; font-weight: 700; color: #bbb; border-top: 1px dotted #bbb; text-transform: uppercase; text-decoration: none; letter-spacing: 0.1em; position: absolute; padding: 0.25em; left: 50%; transform: translateX(-50%); bottom: 1em; white-space: nowrap; opacity: 0; transition: opacity 0.1s ease-in;
}
.day:nth-child(-n+3) { margin-top: -107.5px;
}
.day:nth-child(n+4) { margin-top: -42.5px;
}
.day:nth-child(1), .day:nth-child(4) { transform: translateX(-70%);
}
.day:nth-child(3), .day:nth-child(6) { transform: translateX(70%);
}
.goo-cont { -webkit-filter: url("#goo"); filter: url("#goo"); width: 100%; height: 100%; z-index: 0;
}
.goo-cont .goo-sq { width: 150px; height: 150px; display: block; position: absolute; left: 50%; border-radius: 10%; top: 50%; background: #fff; margin-left: -75px; perspective: 1000px; transition: transform 0.15s cubic-bezier(0.89, 0.47, 1, 0.86);
}
.goo-cont .goo-sq:nth-child(-n+3) { margin-top: -107.5px;
}
.goo-cont .goo-sq:nth-child(n+4) { margin-top: -42.5px;
}
.goo-cont .goo-sq:nth-child(1), .goo-cont .goo-sq:nth-child(4) { transform: translateX(-70%);
}
.goo-cont .goo-sq:nth-child(3), .goo-cont .goo-sq:nth-child(6) { transform: translateX(70%);
}
Sticky logo - Script Codes JS Codes
$(".logo").click(function(){ $(this).toggleClass("xy");
});
Developer | Houbly |
Username | houbly |
Uploaded | November 04, 2022 |
Rating | 3 |
Size | 4,726 Kb |
Views | 16,192 |
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 |
Reacting | 1,743 Kb |
Scroll prompt | 8,723 Kb |
CSS only responsive iPad | 3,438 Kb |
Animated SVG Skills Diagram | 3,261 Kb |
Form progress indicator | 5,542 Kb |
Audiojs pop ups | 4,615 Kb |
A Pen by houbly | 15,433 Kb |
JS Media queries with JS objects | 2,870 Kb |
Animated Cogs | 4,303 Kb |
Mighty Morphin Power Icon | 2,486 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 |
Test | Dviate | 2,668 Kb |
Product item | Mymahesh11 | 2,256 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
Hc first draft | Stepfray | 5,104 Kb |
Simple CSS loader. | Cabrera | 2,574 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
Fluid Responsive Typography | Jonmilner | 4,205 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
Mini Profile | Frytyler | 3,828 Kb |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 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!