Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
camera
bubble
users
heart
Dashboard
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,700); *, *::after, *::before { box-sizing: border-box; } html, body { height: 100%; min-height: 100%; } body { margin: 0; display: flex; align-items: center; justify-content: center; font-family: "Raleway", Arial, sans-serif; background: linear-gradient(to bottom right, #35013F, #902086); } [class^=icon-], [class*=" icon-"] { display: inline-block; width: 1em; height: 1em; fill: currentColor; } .container { background: #f3f3f3; height: 80vh; width: 400px; overflow: hidden; } .title { z-index: 6; position: relative; width: 100%; letter-spacing: 0.1rem; text-align: center; height: 19px; } .title__default, .title__selected { position: absolute; left: 50%; } .title__default { transform: translate3d(-50%, 0, 0); transition: transform 0.2s ease, opacity 0.2s ease; } .title__selected { color: #fff; opacity: 0; transform: translate3d(-50%, 5px, 0); transition: transform 0.2s ease, opacity 0.2s ease; } .menu-button { z-index: 7; position: absolute; width: 20px; height: 20px; top: 52%; left: 1.5rem; transform: translate(0, -50%); cursor: pointer; transition: transform 0.3s ease; } .menu-button__bar { margin-bottom: 4px; height: 2px; background: #444444; border-radius: 40px; transition: transform 0.4s ease, opacity 0.4s ease, background 0.4s ease; transform-origin: 0 0; } .header { position: relative; height: 70px; background: #fff; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .header__bg { z-index: 4; position: absolute; top: 0; left: 0; width: 100%; height: 70px; transform: scale(0, 1); opacity: 0; transition: transform 0.4s ease, opacity 0.2s 0.4s; transform-origin: 0 0; } .header__bg--blue { background: linear-gradient(to right, #247BA0, #247BA0 90%, #fff); } .header__bg--green { background: linear-gradient(to right, #70C1B3, #70C1B3 90%, #fff); } .header__bg--yellow { background: linear-gradient(to right, #FFE066, #FFE066 90%, #fff); } .header__bg--red { background: linear-gradient(to right, #F25F5C, #F25F5C 90%, #fff); } .header.open .menu-button__bar:nth-child(1) { transform: translate(0, 0) rotate(45deg); } .header.open .menu-button__bar:nth-child(2) { transform: translate(10px, 0); opacity: 0; } .header.open .menu-button__bar:nth-child(3) { transform: translate(-2px, 2px) rotate(-45deg); } .header.open .menu__item { transform: translate3d(0, 80px, 0) scale(1, 1); transition: transform 0.8s ease, opacity 0.3s; } .header.open .menu__item:hover:after { opacity: 1; transform: translate3d(0, 16px, 0); } .header.open .menu__item:nth-of-type(1) { transition-delay: 100ms; } .header.open .menu__item:nth-of-type(1) .icon { transform: scale(1, 1); transition-delay: 325ms; } .header.open .menu__item:nth-of-type(2) { transition-delay: 200ms; } .header.open .menu__item:nth-of-type(2) .icon { transform: scale(1, 1); transition-delay: 450ms; } .header.open .menu__item:nth-of-type(3) { transition-delay: 300ms; } .header.open .menu__item:nth-of-type(3) .icon { transform: scale(1, 1); transition-delay: 575ms; } .header.open .menu__item:nth-of-type(4) { transition-delay: 400ms; } .header.open .menu__item:nth-of-type(4) .icon { transform: scale(1, 1); transition-delay: 700ms; } .header.open .menu__item:nth-of-type(5) { transition-delay: 500ms; } .header.open .menu__item:nth-of-type(5) .icon { transform: scale(1, 1); transition-delay: 825ms; } .header.selected .menu-button { transform: translate(-12px, -12px) rotate(180deg); } .header.selected .menu-button__bar { background: #fff; } .header.selected .menu-button__bar:nth-child(1) { transform: translate(0, -2px) rotate(45deg) scale(0.6, 1); } .header.selected .menu-button__bar:nth-child(2) { transform: translate(10px, 0); opacity: 0; } .header.selected .menu-button__bar:nth-child(3) { transform: translate(-2px, 2px) rotate(-45deg) scale(0.6, 1); } .header.selected .menu__item.active { transition: transform 0.8s ease, opacity 0.3s; transform: translate3d(0, -20px, 0) scale(1, 1); } .header.selected .menu__item:not(.active) { transition: transform 0.8s ease, opacity 0.3s; transform: scale(0.1, 0.1); opacity: 0; transition-delay: 0s; } .header.selected .gooey-wrapper { filter: none; } .header.selected .title__default { opacity: 0; transform: translate3d(-50%, -10px, 0); } .header.selected .title__selected { opacity: 1; transform: translate3d(-50%, 0, 0); transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease; } .header.selected .header__bg { transform: scale(1.3, 1); opacity: 1; transition: transform 0.6s ease, opacity 0.3s 0.1s ease; } .header.selected .header__bg--blue { transform-origin: 10% 50%; background: linear-gradient(to right, #fff, #247BA0 20%, #247BA0 90%, #fff); background-position: -80px 0; background-size: 115% 100%; } .header.selected .header__bg--green { transform-origin: 40% 50%; background: linear-gradient(to right, #fff, #70C1B3 10%, #70C1B3 90%, #fff); } .header.selected .header__bg--yellow { transform-origin: 60% 50%; background: linear-gradient(to right, #fff, #FFE066 10%, #FFE066 90%, #fff); } .header.selected .header__bg--red { transform-origin: 90% 50%; background: linear-gradient(to right, #fff, #F25F5C 10%, #F25F5C 80%, #fff); background-size: 130% 100%; } .gooey-wrapper { position: absolute; top: 0; left: 0; -webkit-filter: url("#goo"); filter: url("#goo"); height: 130px; width: 100%; } .blender { z-index: 3; background: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 65px; } .menu { position: relative; z-index: 2; list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-around; } .menu__item { border-radius: 50%; transform: translate3d(0, -70px, 0) scale(0.1, 1); transform-origin: 50% 50%; transition: transform 0.8s ease, opacity 0.3s; } .menu__item:after { content: attr(data-name); position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; opacity: 0; font-size: 10px; text-transform: uppercase; transform: translate3d(0, 10px, 0); transition: transform 0.2s ease, opacity 0.2s ease; } .menu__item--blue { background: #247BA0; } .menu__item--green { background: #70C1B3; } .menu__item--yellow { background: #FFE066; } .menu__item--red { background: #F25F5C; } .menu__link { display: block; width: 60px; height: 60px; text-align: center; color: #fff; } .menu .icon { margin-top: 0.9rem; height: 28px; width: 28px; transition: transform 0.3s ease; transform: scale(0, 0); } .content { height: 100%; padding: 1rem; } .content__box { height: 80px; margin-bottom: 1rem; background: #eee; }
$(function() { var header = $('.header'), headerBg = $('.header__bg'), menuButton = $('.menu-button'), menuItems = $('.menu__item'), titleSelected = $('.title__selected'); menuButton.on('click', function() { $(this).toggleClass('close'); header.toggleClass('open'); header.removeClass('selected'); menuItems.removeClass('active'); if (header.hasClass('open')) { headerBg.removeClass(function(index, css) { return (css.match(/(^|\s)header__bg--\S+/g) || []).join(' '); }) } }); $('.menu__item').on('click', function(evt) { evt.preventDefault(); evt.stopPropagation(); $(this).addClass('active'); header.addClass('selected'); headerBg.addClass('header__bg--' + $(this).data('color')); titleSelected.html($(this).data('name')); }); });