Пишем код HTML:
Оформляем визуально все:
Придаем динамики для кнопок:
Смотрим наш результат:
HTML:
<div id="all-container" class="container">
<div id="phone" class="container">
<div id="header">
<div id="header-photo" class="header-el">
<i class="fa fa-camera fa-2x el"></i>
</div>
<div id="header-people" class="header-el">
<i class="fa fa-user fa-2x el"></i>
</div>
<div id="header-mex" class="header-el">
<i class="fas fa-comments el"></i>
</div>
<div id="header-heart" class="header-el">
<i class="fas fa-heart el"></i>
</div>
<div id="header-bg"></div>
<div id="menu-icon" class="menu-icon">
<i class="fas fa-bars"></i>
</div>
<div id="menu-icon-x" class="menu-icon">
<i class="fas fa-arrow-left"></i>
</div>
</div> <!-- header -->
<div id="el-home-box">
<div class="el-home-01 el-home el-home-anima"></div>
<div class="el-home-02 el-home el-home-anima"></div>
<div class="el-home-02 el-home el-home-anima"></div>
<div class="el-home-03 el-home el-home-anima"></div>
<div class="el-home-03">
<div class="el-home-01 el-home el-home-anima"></div>
<div class="el-home-01 el-home el-home-anima"></div>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 30 -15" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
CSS:
body {
background-color: #52206d;
margin: 0;
padding: 0;
}
.container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
#all-container {
border-radius: 5px;
height: 600px;
width: 600px;
}
#phone {
/* background-color: whitesmoke; */
border-radius: 5px;
box-shadow: 10px 10px 30px rgba( 0, 0, 0, 0.5);
height: 280px;
overflow: hidden;
width: 300px;
}
/* ////////////////////////////////////// header background ///// */
#header {
position: relative;
z-index: 99;
filter: url('#goo');
}
#header-bg {
animation-fill-mode: both;
height: 60px;
position: absolute;
width: 100%;
}
.header-bg {
animation-name: header-bg;
animation-duration: 0.4s;
}
@keyframes header-bg {
100% {background-color: #fff;}
}
.header-bg-photo {
animation-name: header-bg-photo;
animation-duration: 0.4s;
}
@keyframes header-bg-photo {
100% {background-color: #2E92ED;}
}
.header-bg-people {
animation-name: header-bg-people;
animation-duration: 0.4s;
}
@keyframes header-bg-people {
100% {background-color: #21C49B;}
}
.header-bg-mex {
animation-name: header-bg-mex;
animation-duration: 0.4s;
}
@keyframes header-bg-mex {
100% {background-color: #F0BE11;}
}
.header-bg-heart {
animation-name: header-bg-heart;
animation-duration: 0.4s;
}
@keyframes header-bg-heart {
100% {background-color: #DF681A;}
}
/* ////////////////////////////////////// header icon menu ///// */
.menu-icon {
cursor: pointer;
left: 15px;
opacity: 1;
position: absolute;
top: 30px;
transform: translateY(-50%);
transition: 0.2s ease-in-out;
}
.menu-icon-in {
opacity: 1;
top: 30px;
}
.menu-icon-out {
opacity: 0;
top: -20px;
}
/* ////////////////////////////////////// header elements ///// */
.header-el {
border-radius: 50%;
cursor: pointer;
height: 50px;
opacity: 0;
position: absolute;
width: 50px;
top: 10px;
transition: top 0.6s cubic-bezier(.82,.01,.17,1.26);
}
.header-el:hover {
transform: scale(1.1);
}
.header-el-anima {
opacity: 1;
top: 75px;
}
#header-photo {
background-color: #2E92ED;
left: 15px;
transition-delay: 0;
}
#header-people {
background-color: #21C49B;
left: 88px;
transition-delay: 0.1s;
}
#header-mex {
background-color: #F0BE11;
right: 88px;
transition-delay: 0.2s;
}
#header-heart {
background-color: #DF681A;
right: 15px;
transition-delay: 0.3s;
}
.el {
color: #fff;
font-size: 1.2em;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* ////////////////////////////////////// home elements ///// */
#el-home-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 80px auto 0 auto;
opacity: 0.3;
width: 90%;
z-index: -99;
}
.el-home {
background-color: #fff;
border-radius: 5px;
box-shadow: 2px 2px 30px rgba( 0, 0, 0, 0.4);
margin-bottom: 10px;
}
.el-home-01 {
height: 120px;
width: 100%;
}
.el-home-02 {
height: 120px;
width: 48%;
}
.el-home-03 {
height: 170px;
width: 48%;
}
#link {
bottom: 20px;
color: #fff;
opacity: 0.6;
display: flex;
align-items: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#link p {font-size: 20px; margin: 0; margin-left: 5px;}
#link:hover {opacity: 1;}
JavaScript:
(function($) {
var header = $('#header-bg');
var menuButton = $('#menu-icon');
var menuButtonX = $('#menu-icon-x');
var menuIcon = $('.header-el');
var menuIconPhoto = $('#header-photo');
var menuIconPeople = $('#header-people');
var menuIconMex = $('#header-mex');
var menuIconHeart = $('#header-heart');
var homeElement = $('.el-home-anima');
var tlhome = new TimelineMax();
//start
menuButton.addClass('menu-icon-in');
menuButtonX.addClass('menu-icon-out');
header.addClass('header-bg');
tlhome
.staggerFrom(homeElement, 0.6, { y: 20, autoAlpha: 0, ease:Bounce.easeOut}, 0.2)
;
//button menu
menuButton.on('click', function(){
menuButton.removeClass('menu-icon-in');
menuButton.addClass('menu-icon-out');
menuButtonX.addClass('menu-icon-in');
menuButtonX.removeClass('menu-icon-out');
menuIconPhoto.addClass('header-el-anima');
menuIconPeople.addClass('header-el-anima');
menuIconMex.addClass('header-el-anima');
menuIconHeart.addClass('header-el-anima');
});
menuButtonX.on('click', function(){
header.addClass('header-bg');
header.removeClass('header-bg-photo');
header.removeClass('header-bg-people');
header.removeClass('header-bg-mex');
header.removeClass('header-bg-heart');
menuButton.addClass('menu-icon-in');
menuButton.removeClass('menu-icon-out');
menuButtonX.addClass('menu-icon-out');
menuButtonX.removeClass('menu-icon-in');
menuIconPhoto.removeClass('header-el-anima');
menuIconPeople.removeClass('header-el-anima');
menuIconMex.removeClass('header-el-anima');
menuIconHeart.removeClass('header-el-anima');
tlhome.restart();
});
//button Photo
menuIconPhoto.on('click', function(){
menuButton.removeClass('menu-icon-in');
menuButton.addClass('menu-icon-out');
menuButtonX.addClass('menu-icon-in');
menuButtonX.removeClass('menu-icon-out');
menuIconPhoto.toggleClass('header-el-anima');
menuIconPeople.toggleClass('header-el-anima');
menuIconMex.toggleClass('header-el-anima');
menuIconHeart.toggleClass('header-el-anima');
header.addClass('header-bg-photo');
header.removeClass('header-bg-people');
header.removeClass('header-bg-mex');
header.removeClass('header-bg-heart');
tlhome.restart();
});
menuIconPeople.on('click', function(){
menuButton.removeClass('menu-icon-in');
menuButton.addClass('menu-icon-out');
menuButtonX.addClass('menu-icon-in');
menuButtonX.removeClass('menu-icon-out');
menuIconPhoto.toggleClass('header-el-anima');
menuIconPeople.toggleClass('header-el-anima');
menuIconMex.toggleClass('header-el-anima');
menuIconHeart.toggleClass('header-el-anima');
header.addClass('header-bg-people');
header.removeClass('header-bg-photo');
header.removeClass('header-bg-mex');
header.removeClass('header-bg-heart');
tlhome.restart();
});
menuIconMex.on('click', function(){
menuButton.removeClass('menu-icon-in');
menuButton.addClass('menu-icon-out');
menuButtonX.addClass('menu-icon-in');
menuButtonX.removeClass('menu-icon-out');
menuIconPhoto.toggleClass('header-el-anima');
menuIconPeople.toggleClass('header-el-anima');
menuIconMex.toggleClass('header-el-anima');
menuIconHeart.toggleClass('header-el-anima');
header.addClass('header-bg-mex');
header.removeClass('header-bg-photo');
header.removeClass('header-bg-people');
header.removeClass('header-bg-heart');
tlhome.restart();
});
menuIconHeart.on('click', function(){
menuButton.removeClass('menu-icon-in');
menuButton.addClass('menu-icon-out');
menuButtonX.addClass('menu-icon-in');
menuButtonX.removeClass('menu-icon-out');
menuIconPhoto.toggleClass('header-el-anima');
menuIconPeople.toggleClass('header-el-anima');
menuIconMex.toggleClass('header-el-anima');
menuIconHeart.toggleClass('header-el-anima');
header.addClass('header-bg-heart');
header.removeClass('header-bg-photo');
header.removeClass('header-bg-people');
header.removeClass('header-bg-mex');
tlhome.restart();
});
})(jQuery);