A simple demonstration of the Mac launchpad effect in CSS
A Pen by Miguel Jiménez on CodePen.
Created
March 15, 2023 02:28
-
-
Save conofor/220978e73c0522013005f0552307eb95 to your computer and use it in GitHub Desktop.
Mac launchpad in CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="window"> | |
| <h1>Mac launchpad in CSS</h1> | |
| <p>A simple demonstration of the Mac launchpad effect in CSS. JavaScript is used to control when the effect is triggered or removed.</p> | |
| <p> | |
| Made by <a href="http://migueljimenez.co" target="_blank">Miguel Jiménez</a> | | |
| <a target="_blank" href="https://twitter.com/jachinte">@jachinte</a> | |
| </p> | |
| <p>You may also like <a href="https://codepen.io/jachinte/pen/bVNraO" target="_blank">Mission Control in CSS</a></p> | |
| <a title="Click to open" class="open-menu launchpad-icon"></a> | |
| </div> | |
| <div id="icons"> | |
| Icons by <a href="http://xenatt.deviantart.com/" target="_blank">xenatt</a> from <a href="https://www.iconfinder.com/iconsets/minimalism" target="_blank">Iconfinder</a> | |
| </div> | |
| <div id="launchpad"> | |
| <div class="content"> | |
| <nav> | |
| <a class="icon-safari">Safari</a> | |
| <a class="icon-notes">Notes</a> | |
| <a class="icon-facetime">Facetime</a> | |
| <a class="icon-appstore">App store</a> | |
| <a class="icon-dictionary">Dictionary</a> | |
| <a class="icon-texteditor">Text Editor</a> | |
| <a class="icon-monitor">Activity Monitor</a> | |
| <a class="icon-airport">AirPort Utility</a> | |
| <a class="icon-chromium">Chromium</a> | |
| <a class="icon-opera">Opera</a> | |
| <a class="icon-skydrive">Skydrive</a> | |
| <!--<a class="icon-dropbox">Dropbox</a>--> | |
| <!--<a class="icon-soundcloud">Soundcloud</a>--> | |
| <a class="icon-twitter">Twitter</a> | |
| <a class="icon-pinterest">Pinterest</a> | |
| <a class="icon-imovie">iMovie</a> | |
| </nav> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| var launchpad = $("#launchpad"), | |
| open = function() { | |
| launchpad.addClass("shown start"); | |
| launchpad.find("nav").addClass("scale-down"); | |
| }, | |
| close = function() { | |
| launchpad | |
| .removeClass("start") | |
| .addClass("end"); | |
| launchpad.find("nav") | |
| .removeClass("scale-down") | |
| .addClass("scale-up"); | |
| setTimeout(function() { | |
| launchpad.removeClass("shown end"); | |
| launchpad.find("nav").removeClass("scale-up"); | |
| }, 350); | |
| }; | |
| // Open the launchpad | |
| $(".open-menu").on("click", open); | |
| // Close the launchpad when the content is clicked, only if the target is not a link | |
| $(document).mouseup(function (e) { | |
| var content = launchpad.find(".content"), | |
| nav = content.find("nav"); | |
| if (content.is(e.target) || nav.is(e.target)) { | |
| close(); | |
| } | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @duration: .4s; | |
| @blur: 30px; | |
| @background: url(http://media.idownloadblog.com/wp-content/uploads/2014/08/Yosemite-5-wallpaper-thumbnail.png); | |
| @icon-margin: 40px; | |
| .yosemite-background { | |
| background: @background no-repeat center center fixed; | |
| background-size: cover; | |
| } | |
| body { | |
| .yosemite-background; | |
| font-family: sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| * { box-sizing: border-box; } | |
| a { cursor: pointer; } | |
| #launchpad { | |
| display: none; | |
| &.shown { | |
| display: block; | |
| &.start { animation: show @duration 1; } | |
| &.end { animation: hide @duration 1; } | |
| .content { | |
| // counteracts the blurred edges | |
| background: #310505; | |
| bottom: 0; | |
| left: 0; | |
| position: fixed; | |
| right: 0; | |
| top: 0; | |
| &:before { | |
| .yosemite-background; | |
| bottom: 0; | |
| content: ''; | |
| filter: blur(@blur); | |
| left: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| z-index: -1; | |
| } | |
| nav { | |
| margin: 20px auto; | |
| width: 90%; | |
| a { | |
| color: white; | |
| filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)); | |
| font-size: 14px; | |
| text-align: center; | |
| text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); | |
| &:active { | |
| opacity: .6; | |
| } | |
| } | |
| &.scale-down { | |
| animation: scale-down @duration 1; } | |
| &.scale-up { | |
| animation: scale-up @duration 1; } | |
| } | |
| } | |
| } | |
| } | |
| .window { | |
| background: white; | |
| border-color: #eee; | |
| border-width: 30px 0 0 0; | |
| border-style: solid; | |
| border-radius: 3px; | |
| box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.2); | |
| left: 50%; | |
| margin: -160px 0 0 -320px; | |
| min-height: 320px; | |
| padding: 10px 30px; | |
| position: absolute; | |
| top: 50%; | |
| width: 640px; | |
| h1 { | |
| font-weight: normal; | |
| text-align: center; | |
| } | |
| a { | |
| color: #00BFFF; | |
| text-decoration: none; | |
| } | |
| } | |
| // KEYFRAMES | |
| @keyframes show { | |
| 0% { opacity: 0; } | |
| 100% { opacity: 1; } | |
| } | |
| @keyframes hide { | |
| 0% { opacity: 1; } | |
| 100% { opacity: 0; } | |
| } | |
| @keyframes scale-up { | |
| 0% { transform: scale(1); } | |
| 100% { transform: scale(1.2); } | |
| } | |
| @keyframes scale-down { | |
| 0% { transform: scale(1.2); } | |
| 100% { transform: scale(1); } | |
| } | |
| // ICONS | |
| a[class^="icon"] { | |
| background-position: top; | |
| background-repeat: no-repeat; | |
| display: inline-block; | |
| height: 128px; | |
| padding: 128px 0 0 0; | |
| margin: @icon-margin; | |
| width: 128px; | |
| } | |
| .launchpad-icon { | |
| background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/Launcher.png); | |
| background-position: top; | |
| background-repeat: no-repeat; | |
| display: block; | |
| height: 128px; | |
| margin: 15px auto; | |
| width: 128px; | |
| } | |
| .icon-facetime { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/facetime.png); } | |
| .icon-skydrive { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/skydrive.png); } | |
| .icon-dropbox { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/dropbox.png); } | |
| .icon-soundcloud { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/soundcloud.png); } | |
| .icon-chromium { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/Chromium.png); } | |
| .icon-safari { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/istatmenu.png); } | |
| .icon-opera { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/opera.png); } | |
| .icon-appstore { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/Appstore.png); } | |
| .icon-airport { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/AirPortUtility.png); } | |
| .icon-pinterest { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/Pinterest.png); } | |
| .icon-twitter { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/twitter.png); } | |
| .icon-dictionary { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/dictionary.png); } | |
| .icon-notes { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/notes.png); } | |
| .icon-monitor { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/NetworkMonitor.png); } | |
| .icon-imovie { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/imovie.png); } | |
| .icon-texteditor { background: url(https://cdn2.iconfinder.com/data/icons/minimalism/128/tTextEditor.png); } | |
| #icons { | |
| bottom: 10px; | |
| color: #9E9E9E; | |
| left: 10px; | |
| position: absolute; | |
| a { | |
| color: #BADA55; | |
| text-decoration: none; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment