Html Transistion lag only for the first time after reload - javascript

This is a gif of issue : https://gifyu.com/image/DeGX
And my code: https://jsfiddle.net/Mrsheesh/dj1L3vhq/7
i am using xampp to host this page in locale
and even jsfiddle seems laggy.
I tried to remove the image, and it worked fine.
Is there a way to fix this, without remove the image?
My code:
console.log("msg.js Loaded");
function show_msg() {
document.querySelector(".box-msg").classList.add("active");
document.querySelector(".bg-msg").classList.add("active");
}
function hide_msg() {
document.querySelector(".box-msg").classList.remove("active");
document.querySelector(".bg-msg").classList.remove("active");
}
body {
margin: 0;
}
.bg-msg {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgb(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.5s ease;
}
.bg-msg.active {
visibility: visible;
opacity: 1;
}
.box-msg {
visibility: hidden;
position: fixed;
left: 50%;
top: 10%;
transform: translateX(-50%);
height: 0;
width: 0;
max-width: 550px;
border-radius: 20px;
background-color: white;
border: 1px solid rgb(0, 0, 0, 0.5);
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.box-msg.active {
visibility: visible;
opacity: 1;
height: 400px;
width: 50%;
}
.box-msg .box-head {
height: 20%;
width: 100%;
/* background-color: blue; */
}
/* ==================================Close Button================================= */
.box-msg .box-head .close {
position: absolute;
top: 5px;
left: 5px;
height: 20px;
width: 20px;
border-radius: 5px;
cursor: pointer;
}
.box-msg .box-head .close::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "\D7";
/* use the hex value here... */
font-size: 30px;
color: #FFF;
line-height: 20px;
text-align: center;
}
/* ==================================Head IMG================================= */
.box-msg .box-head .background {
position: absolute;
width: 100%;
height: 20%;
overflow: hidden;
}
.background img {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
width: 300%;
/* animation: 10s left_right forwards; */
}
#keyframes left_right {
from {
left: 0;
}
to {
left: 100%;
}
}
/* ==================================Head Title================================= */
.box-msg .box-head .title {
position: relative;
height: 100%;
margin-left: 25px;
margin-right: 25px;
color: white;
font-size: clamp(10px, 4vw, 35px);
/* line-height: 80px;
text-align: center; */
display: flex;
justify-content: center;
align-items: center;
font-family: BebasNeue-Regular;
letter-spacing: 0.1em;
}
/* ====================================MSG Body================================= */
.box-msg .box-body {
height: 80%;
width: 100%;
/* background-color: brown; */
}
/* ======================================BTN===================================== */
.btn {
cursor: pointer;
width: 100px;
height: 50px;
background: coral;
text-align: center;
line-height: 50px;
}
<div class="btn" onclick="show_msg()">Test</div>
<div class="bg-msg"></div>
<div class="box-msg">
<div class="box-head">
<div class="background">
<img src="./img/background/bg2.jpg" alt="">
</div>
<div class="close" onclick="hide_msg()">Close</div>
<div class="title">Title</div>
</div>
<div class="box-body">
<div class="body-text">Body Text</div>
</div>
</div>

Related

how to resize items inside collapsible custom bar

I am learning HTML,CSS & Java script. during my learning path. i created custom menu. which expand and close using a button. my problem is when the menu closes, the inside items are not totally disappear like below :
while menu is open.
while menu is closed.
my code as below :
function ExpandMenu() {
var ButtonExpandMenuWidth = document.getElementById("TopBarExpandMenu"),
style = window.getComputedStyle(ButtonExpandMenuWidth),
top = style.getPropertyValue('width');
if (top === "0px") {
document.querySelector('#TopBarExpandMenu').style.width = "120px"
} else if (top === "120px") {
document.querySelector('#TopBarExpandMenu').style.width = "0px"
}
}
#mainBody {
height: 600px;
min-height: 600px;
width: 1200px%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
/* ------------------------------------------ */
#sideBar {
transition: 500ms ease-in-out;
height: 100%;
width: 150px;
position: fixed;
left: 0;
background: #212529;
z-index: 100;
border-right: 1px solid;
border-color: cyan;
}
/* ------------------------------------------ */
#StatusBar {
background: #30FF83;
width: 100%;
height: 1px;
position: fixed;
max-height: 3px;
z-index: 101;
}
/* ------------------------------------------ */
#sideBarRows {
position: fixed;
top: 60px;
width: inherit;
z-index: 50;
}
/* ------------------------------------------ */
#download_button {
background: transparent;
width: inherit;
text-align: left;
border: none;
height: 33px;
top: -8px;
position: relative;
color: white;
font-size: 12px;
}
#download_button_frame {
height: 50px;
position: relative;
border-left: 2px solid var(--red);
padding-top: 15px;
margin-right: 1%;
}
/* ------------------------------------------ */
#ManualDeploy_Frame {
height: 50px;
position: relative;
border-left: 2px solid var(--red);
top: 20px;
z-index: 50;
}
#ManualDeploy_Button {
border: 0px;
width: auto;
height: 42px;
position: relative;
text-align: left;
top: 4px;
font-size: 12px;
background-color: transparent;
margin-left: 1px;
}
/* ------------------------------------------ */
.menuButton {
background: transparent;
background: url("menu.png") center / contain, rgba(181, 20, 20, 0);
width: 40px;
height: 40px;
position: fixed;
left: 1%;
border: none;
top: 2%;
transition: 500ms ease-in-out;
-webkit-app-region: no-drag;
transform: rotate(0deg);
z-index: 1000;
-webkit-app-region: no-drag;
}
#menuButton:focus {
background: url("menu.png") left / contain no-repeat transparent;
outline: 0px;
}
#menuButton:hover {
background: url("menu.png") left / contain no-repeat transparent;
}
/* ------------------------------------------ */
/* ------------------------------------------ */
.DownloadPage_Frame {
display: flex;
background: #212529;
position: fixed;
z-index: 99;
height: 100%;
width: 100%;
right: 0%;
top: 0%;
}
/* ------------------------------------------ */
.topBarHeader {
display: flex;
height: 50px;
width: 100%;
position: relative;
z-index: 99;
flex: 1;
}
.topBar {
position: fixed;
background: #212529;
height: 50px;
width: 100%;
flex: 1;
-webkit-user-select: none;
-webkit-app-region: drag;
}
/* ------------------------------------------ */
.closeButton,
.closeButtonDiv {
display: flex;
position: fixed;
height: 20px;
width: 60px;
right: 10px;
margin: auto;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 40px;
font-size: 10px;
top: 15px;
transition: 200ms ease-in-out;
border: 0px;
-webkit-app-region: no-drag;
}
.closeButton {
background: var(--danger);
-webkit-app-region: no-drag;
}
.closeButton:hover {
background: #dad9d4;
transition: 200ms ease-in-out;
}
/* ------------------------------------------ */
.expandButton {
display: flex;
position: fixed;
height: 20px;
width: 40px;
right: 80px;
margin: auto;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 40px;
font-size: 10px;
top: 15px;
transition: 200ms ease-in-out;
border: 0px;
background: url("expand.png") center / contain no-repeat transparent;
transform: rotate(90deg);
-webkit-app-region: no-drag;
}
.expandButton:focus {
transform: rotate(-90deg);
-webkit-app-region: no-drag;
}
/* ------------------------------------------ */
#TopBarExpandMenu {
display: flex;
position: fixed;
top: 15px;
right: 110px;
margin: auto;
height: 20px;
width: 0px;
background: white;
border-radius: 15px;
transition: 200ms ease-in-out;
transform: scale(1);
align-items: center;
}
/* ------------------------------------------ */
#MaximizeButton,
#MinimizeButton {
display: flex;
position: static;
background: rgb(101, 217, 101);
border-radius: 15px;
color: black;
padding: 1px;
height: 90%;
width: 50%;
font-size: 10px;
text-align: center;
justify-content: center;
margin-left: 2px;
margin-right: 2px;
text-decoration: none;
-webkit-app-region: no-drag;
}
#MaximizeButton {
background: rgb(234, 174, 57);
}
#MaximizeButton:hover,
#MinimizeButton:hover {
transform: scale(1.5);
transition: 100ms ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
<body id="mainBody" class="mainBody">
<div id="StatusBar" class="StatusBar"></div>
<div class="container sideBar" id="sideBar"><button class="btn btn-primary menuButton" id="menuButton" type="button" onclick="sideBar()"></button>
<div class="row sideBarRows" id="sideBarRows">
<div class="col" id="download_button_frame"><button class="btn btn-primary download_button" id="download_button" type="button">Download Loads</button></div>
<div class="col" id="ManualDeploy_Frame"><button class="btn btn-primary ManualDeploy_Button" id="ManualDeploy_Button" type="button">Manual Deploy</button></div>
</div>
</div>
<header id="topBarHeader" class="topBarHeader">
<div id="topBar" class="topBar"></div>
<div id="TopBarExpandMenu" class="TopBarExpandMenuClass"><a id="MaximizeButton" class="MaximizeButton" href="#">Minimize</a><a id="MinimizeButton" class="MinimizeButton" href="#">Maximize</a></div>
<div id="closeButtonDiv" class="closeButtonDiv" style="color: var(--danger);"><button class="btn btn-primary closeButton" id="closeButton" type="button">Close</button></div><button class="btn btn-primary expandButton" id="expandButton" type="button" onclick="ExpandMenu()"></button>
</header>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/mainJavaScript.js"></script>
<script src="assets/js/operationJavaScript.js"></script>
</body>

I advise you to apply rule opacity together with width: 0. And also, to shorten the code, I advise you to add and remove styles using the classlist:
Add class:
document.querySelector("#TopBarExpandMenu").classList.add('active');
Remove class:
document.querySelector("#TopBarExpandMenu").classList.remove('active');
Also, add this selector to your css:
#TopBarExpandMenu.active {
width: 120px;
opacity: 1;
}
And add opacity: 0 to #TopBarExpandMenu.
function ExpandMenu() {
var ButtonExpandMenuWidth = document.getElementById("TopBarExpandMenu"),
style = window.getComputedStyle(ButtonExpandMenuWidth),
top = style.getPropertyValue("width");
if (top === "0px") {
document.querySelector("#TopBarExpandMenu").classList.add('active');
} else if (top === "120px") {
document.querySelector("#TopBarExpandMenu").classList.remove('active');
}
}
#mainBody {
height: 600px;
min-height: 600px;
width: 1200px%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
/* ------------------------------------------ */
#sideBar {
transition: 500ms ease-in-out;
height: 100%;
width: 150px;
position: fixed;
left: 0;
background: #212529;
z-index: 100;
border-right: 1px solid;
border-color: cyan;
}
/* ------------------------------------------ */
#StatusBar {
background: #30FF83;
width: 100%;
height: 1px;
position: fixed;
max-height: 3px;
z-index: 101;
}
/* ------------------------------------------ */
#sideBarRows {
position: fixed;
top: 60px;
width: inherit;
z-index: 50;
}
/* ------------------------------------------ */
#download_button {
background: transparent;
width: inherit;
text-align: left;
border: none;
height: 33px;
top: -8px;
position: relative;
color: white;
font-size: 12px;
}
#download_button_frame {
height: 50px;
position: relative;
border-left: 2px solid var(--red);
padding-top: 15px;
margin-right: 1%;
}
/* ------------------------------------------ */
#ManualDeploy_Frame {
height: 50px;
position: relative;
border-left: 2px solid var(--red);
top: 20px;
z-index: 50;
}
#ManualDeploy_Button {
border: 0px;
width: auto;
height: 42px;
position: relative;
text-align: left;
top: 4px;
font-size: 12px;
background-color: transparent;
margin-left: 1px;
}
/* ------------------------------------------ */
.menuButton {
background: transparent;
background: url("menu.png") center / contain, rgba(181,20,20,0);
width: 40px;
height: 40px;
position: fixed;
left: 1%;
border: none;
top: 2%;
transition: 500ms ease-in-out;
-webkit-app-region: no-drag;
transform: rotate(0deg);
z-index: 1000;
-webkit-app-region: no-drag;
}
#menuButton:focus {
background: url("menu.png") left / contain no-repeat transparent;
outline: 0px;
}
#menuButton:hover {
background: url("menu.png") left / contain no-repeat transparent;
}
/* ------------------------------------------ */
/* ------------------------------------------ */
.DownloadPage_Frame {
display: flex;
background: #212529;
position: fixed;
z-index: 99;
height: 100%;
width: 100%;
right: 0%;
top: 0%;
}
/* ------------------------------------------ */
.topBarHeader {
display: flex;
height: 50px;
width: 100%;
position: relative;
z-index: 99;
flex: 1;
}
.topBar {
position: fixed;
background: #212529;
height: 50px;
width: 100%;
flex: 1;
-webkit-user-select: none;
-webkit-app-region: drag;
}
/* ------------------------------------------ */
.closeButton, .closeButtonDiv {
display: flex;
position: fixed;
height: 20px;
width: 60px;
right: 10px;
margin: auto;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 40px;
font-size: 10px;
top: 15px;
transition: 200ms ease-in-out;
border: 0px;
-webkit-app-region: no-drag;
}
.closeButton {
background: var(--danger);
-webkit-app-region: no-drag;
}
.closeButton:hover {
background: #dad9d4;
transition: 200ms ease-in-out;
}
/* ------------------------------------------ */
.expandButton {
display: flex;
position: fixed;
height: 20px;
width: 40px;
right: 80px;
margin: auto;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 40px;
font-size: 10px;
top: 15px;
transition: 200ms ease-in-out;
border: 0px;
background: url("expand.png") center / contain no-repeat transparent;
transform: rotate(90deg);
-webkit-app-region: no-drag;
}
.expandButton:focus {
transform: rotate(-90deg);
-webkit-app-region: no-drag;
}
/* ------------------------------------------ */
#TopBarExpandMenu {
display: flex;
position: fixed;
top: 15px;
right: 110px;
margin: auto;
height: 20px;
width: 0;
background: white;
border-radius: 15px;
transition: 200ms ease-in-out;
transform: scale(1);
align-items: center;
opacity: 0;
}
#TopBarExpandMenu.active {
width: 120px;
opacity: 1;
}
/* ------------------------------------------ */
#MaximizeButton, #MinimizeButton {
display: flex;
position: static;
background: rgb(101,217,101);
border-radius: 15px;
color: black;
padding: 1px;
height: 90%;
width: 50%;
font-size: 10px;
text-align: center;
justify-content: center;
margin-left: 2px;
margin-right: 2px;
text-decoration: none;
-webkit-app-region: no-drag;
}
#MaximizeButton {
background: rgb(234,174,57);
}
#MaximizeButton:hover, #MinimizeButton:hover {
transform: scale(1.5);
transition: 100ms ease-in-out;
}
<div id="StatusBar" class="StatusBar"></div>
<div class="container sideBar" id="sideBar"><button class="btn btn-primary menuButton" id="menuButton" type="button" onclick="sideBar()"></button>
<div class="row sideBarRows" id="sideBarRows">
<div class="col" id="download_button_frame"><button class="btn btn-primary download_button" id="download_button" type="button">Download Loads</button></div>
<div class="col" id="ManualDeploy_Frame"><button class="btn btn-primary ManualDeploy_Button" id="ManualDeploy_Button" type="button">Manual Deploy</button></div>
</div>
</div>
<header id="topBarHeader" class="topBarHeader">
<div id="topBar" class="topBar"></div>
<div id="TopBarExpandMenu" class="TopBarExpandMenuClass"><a id="MaximizeButton" class="MaximizeButton" href="#">Minimize</a><a id="MinimizeButton" class="MinimizeButton" href="#">Maximize</a></div>
<div id="closeButtonDiv" class="closeButtonDiv" style="color: var(--danger);"><button class="btn btn-primary closeButton" id="closeButton" type="button">Close</button></div><button class="btn btn-primary expandButton" id="expandButton" type="button" onclick="ExpandMenu()"></button>
</header>

how do I center the anchor tag inside a div whose parent is working as an overlay [duplicate]

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
what I want is to center the anchor tag texts vertically also I want the "contents" div to fit the screen so that if the screen gets smaller or bigger the anchor tag doesn't run off the margin creating overflow which I don't want, I tried a bunch of different ways to fix this but none seem to work, any help is appreciated! here's the code...
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
display:block;
z-index: 1001;
background-color: black;
overflow: hidden;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You can just add display: flex; and align-items: center; to the .menu-overlay.open identifier:
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You can easily achieve this using flexbox:
Here's the CSS to achieve what you want:
.menu-overlay.open {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 1;
display: block;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.contents {
margin-left: 5%;
margin-right: 5%;
display: flex;
flex: 1;
max-width: 100%;
justify-content: space-around;
}
.contents a {
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
color: white;
}

How can I mask the visibility of the text with the overlapping element using CSS

If you see the GIF provided below the text only appears after it has crossed the Black Dot. Until then it is invisible. This was made using Flash but how can we achieve this using CSS?
Here is what I've got so far:
#import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
body {
height: 100vh;
background: #222;
padding: 0;
margin: 0;
font-family: "Ubuntu Mono";
}
.ypn-logo {
background: green;
display: flex;
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 220px;
height: 220px;
border-radius: 220px;
z-index: 1;
}
.ypn-text {
font-size: 3.5em;
color: white;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
margin-left: -80px;
z-index: 0;
}
.ypn-text:before {
background: red;
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 180px;
z-index: -1;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 30px;
left: 10px;
}
.ypn-logo:hover>.ypn-text:before {
left: 50px;
}
.ypn-text:after {
background: #222;
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 180px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 95px;
left: 130px;
z-index: 1;
}
.ypn-logo:hover>.ypn-text:after {
left: 60px;
}
.ypn-logo:hover>.ypn-text {
margin-left: 80px;
}
<div class="ypn-logo">
<div class="ypn-text">RUN</div>
</div>
I thought of making a div and locking its right border with the central axis of the dot in the middle but this hides the Green and Red elements also. Is there a way to just block the text element but not other elements?
#import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
body {
height: 100vh;
background: #222;
padding: 0;
margin: 0;
font-family: "Ubuntu Mono";
}
.ypn-logo {
background: green;
display: flex;
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 220px;
height: 220px;
border-radius: 220px;
z-index: 1;
}
.ypn-text {
font-size: 3.5em;
color: white;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
margin-left: -80px;
z-index: 0;
}
.ypn-before {
background: red;
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 180px;
z-index: -1;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 30px;
left: 10px;
}
.ypn-logo:hover>.ypn-before {
left: 50px;
}
.ypn-after {
background: #222;
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 180px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 95px;
left: 130px;
z-index: 1;
}
.ypn-logo:hover>.ypn-after {
left: 60px;
}
.ypn-logo:hover>.ypn-text {
margin-left: 80px;
}
.ypn-after:after {
width: 130px;
background: black;
height: 3em;
content: '';
position: absolute;
left: -100px;
}
<div class="ypn-logo">
<div class="ypn-before"></div>
<div class="ypn-text">YPN</div>
<div class="ypn-after"></div>
</div>

You can make the text the child of an element with a background color. Then make the mask by creating an element with a dot and a div set to the background color of the parent. Make the parent's overflow:hidden so the colored area isn't seen as it moves to uncover the text.
$('.overlay').on('click', function() {
$(this).toggleClass('hidden');
});
$(window).on('load', function() {
$('.overlay').removeClass('hidden');
});
body {
background: red;
}
.container {
width: 80%;
height: 60px;
border-radius: 60px;
background: white;
overflow: hidden;
margin: 20px auto;
position: relative;
}
.overlay {
width: 100%;
height: 100%;
background: white;
transition: left 2s ease-out;
position: absolute;
top: 0;
left: calc( -100% + 60px);
}
.overlay.hidden {
left: 0;
}
.overlay::after {
content: '';
background: black;
height: 60px;
width: 60px;
border-radius: 60px;
position: absolute;
right: 0;
top: 0;
}
.text {
font-size: 50px;
line-height: 60px;
width: 100%;
text-align: center;
}
p {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="text">ezoom</div>
<div class="overlay hidden"></div>
</div>
<p> click the circle to toggle the animation</p>
EDIT :
After using the above principle, here's the final code for the effect you need:
#import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 0;
margin: 0;
background: #222;
font-family: "Ubuntu Mono";
}
.ypn-logo {
background: green;
display: flex;
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 220px;
height: 220px;
border-radius: 220px;
}
.ypn-before {
background: red;
content: '';
overflow: hidden;
width: 180px;
height: 180px;
border-radius: 180px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
left: -20px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-text {
background: none;
position: absolute;
left: 20px;
font-size: 3.2em;
color: #ddd;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-dot {
width: 200px;
height: 200px;
position: relative;
background: red;
left: -35px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-dot:after {
content: '';
position: absolute;
background: #222;
width: 60px;
height: 60px;
border-radius: 60px;
top: 70px;
right: -25px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-logo:hover>.ypn-before {
left: 20px;
}
.ypn-logo:hover>.ypn-before .ypn-dot {
left: -135px;
}
.ypn-logo:hover>.ypn-before .ypn-text {
left: 80px;
}
<div class="ypn-logo">
<div class="ypn-before">
<div class="ypn-text">RUN</div>
<div class="ypn-dot"></div>
</div>
</div>

Here is an idea where you can rely on one element and consider a width/margin animation:
.box {
font-size: 50px;
font-weight: bold;
line-height: 1em;
display: inline-flex;
justify-content:flex-end;
overflow:hidden;
white-space:nowrap;
border-radius:1em 0 0 1em;
background: radial-gradient(#000 0.48em, transparent 0.5em) left/1em 1em no-repeat;
width:0;
margin-left:200px;
padding: 5px 1em 5px 0;
transition:1s;
}
body:hover .box {
width:200px;
margin-left:0px;
padding: 5px 0 5px 1em;
}
<div class="box">
some text
</div>
To avoid setting a specific width you can adjust alignment and consider max-width:
.container {
text-align:right;
width:500px;
}
.box {
font-size: 50px;
font-weight: bold;
line-height: 1em;
display: inline-flex;
justify-content:flex-end;
overflow:hidden;
white-space:nowrap;
border-radius:1em 0 0 1em;
background: radial-gradient(#000 0.48em, transparent 0.5em) left/1em 1em no-repeat;
max-width:0;
padding: 5px 1em 5px 0;
transition:max-width 1s,padding 0s 1s;
}
body:hover .box {
max-width:100%;
padding: 5px 0 5px 1em;
transition:max-width 1s;
}
<div class="container">
<div class="box">
some text
</div>
</div>

Custom JQuery Slider doesn't work as expected

I tried to make a custom slider for my projects on my website.
It's important for me to use div tags to slide, because I want to include more information on it, like text and buttons.
It has a "next"- and "previous" button. The problem is that it doesn't slide back and it doesn't start at the beginning after it reached the last slide.
What's going wrong?
$(document).ready(function() {
projectSlider($('.projects').children('.project').first());
function projectSlider(projects) {
$(projects).show(function() {
$('.next').click(function() {
if (projects.next().hasClass('project')) {
projectSlider(projects.next());
} else {
projectSlider($('.projects').children('.project').first());
}
});
$('.previous').click(function() {
if (projects.prev().hasClass('project')) {
projectSlider(projects.prev());
} else {
projectSlider($('.projects').children('.project').first());
}
});
});
}
});
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: "Roboto Condensed", sans-serif;
}
/* */
a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-weight: normal;
}
.inline-list {
list-style-type: none;
padding: 0;
}
.inline-list>li {
display: inline-block;
}
/* */
header {
display: block;
position: relative;
top: 0;
left: 0;
width: 35%;
height: 100vh;
background: #fff;
}
.profile {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.avatar {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
background: url("../img/avatar.jpg") no-repeat center center;
background-size: cover;
border-radius: 100%;
}
.socialmedia>li {
padding: 0 5px 0 0;
}
.socialmedia>li>a {
color: #212121;
}
/* */
main {
display: block;
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
background: #EEEEEE;
}
.controls {
display: block;
position: absolute;
z-index: 100000;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.control {
display: inline-block;
position: absolute;
width: 36px;
height: 36px;
margin: 0 20px 0 20px;
background: #f5f5f5;
color: #212121;
border-radius: 100%;
cursor: pointer;
}
.backward {
left: 0;
float: left;
text-align: center;
}
.backward-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background: url("../img/icon/left-chevron.svg") no-repeat center center;
background-size: cover;
color: #212121;
}
.forward-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background: url("../img/icon/right-chevron.svg") no-repeat center center;
background-size: cover;
color: #212121;
}
.forward {
right: 0;
float: right;
}
.projects {
display: block;
position: relative;
width: 100%;
height: 100vh;
}
.project {
display: none;
position: absolute;
width: 100%;
height: 100vh;
}
.dog {
background: red;
}
.cat {
background: green;
}
.rabbit {
background: blue;
}
/* */
footer {
display: block;
position: relative;
bottom: 0;
padding: 0;
width: 100%;
height: 36px;
background: #fff;
}
.made {
display: inline-block;
position: absolute;
float: left;
left: 0;
top: 50%;
height: 38px;
transform: translateY(-50%);
}
.made>p {
display: inline-block;
}
.legal {
display: inline-block;
position: absolute;
float: right;
right: 0;
top: 50%;
height: 38px;
transform: translateY(-50%);
}
/* */
.envelope {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/envelope.svg") no-repeat center center;
background-size: cover;
}
.twitter {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/twitter.svg") no-repeat center center;
background-size: cover;
}
.dribbble {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/dribbble.svg") no-repeat center center;
background-size: cover;
}
.github {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/github.svg") no-repeat center center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
<div class="project-slider">
<div class="controls">
<div class="control previous">
<div class="backward-arrow"><-</div>
</div>
<div class="control forward next">
<div class="forward-arrow">-></div>
</div>
</div>
<div class="projects">
<div class="project dog"></div>
<div class="project cat"></div>
<div class="project rabbit"></div>
</div>
</div>
</main>
JSFiddle

Your code seems to be unnecessarily recursive. Each time you click an arrow, the click handlers are bound again. Also, if you click "next", the object passed to projectSlider contains only a single project element, so there will be no "next" or "previous" in that object.
I suggest a different approach. In my example below, for each click, the appropriate project (based on a numeric index) is hidden, then appended to the project container (which stacks it on top of the others), and then re-shown (for animation purposes).
function refreshProjects(project_holder, projects, project_index) {
project_index = (project_index + projects.length) % projects.length;
var thisProject = projects.eq(project_index);
thisProject.hide().appendTo(project_holder).show(250);
}
$(function() {
var project_holder = $('.projects');
var projects = project_holder.children('.project');
var project_index = 0;
$('.control-next').click(function() {
refreshProjects(project_holder, projects, ++project_index);
});
$('.control-previous').click(function() {
refreshProjects(project_holder, projects, --project_index);
});
});
body {
padding: 0;
margin: 0;
font-size: 10px;
}
main {
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
background: #EEEEEE;
}
.controls {
position: absolute;
z-index: 100000;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.control {
position: absolute;
background: #f5f5f5;
border: none;
color: #212121;
border-radius: 50%;
cursor: pointer;
width: 1.8em;
height: 1.8em;
padding: .5em;
box-sizing: content-box;
font-size: 1.4em;
outline: 0;
}
.control-previous {
left: 1em;
}
.control-next {
right: 1em;
}
.projects {
width: 100%;
height: 100vh;
}
.project {
position: absolute;
width: 100%;
height: 100%;
}
.project:not(:first-child) {
display: none;
}
.dog {
background: red;
}
.cat {
background: green;
}
.rabbit {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
<div class="project-slider">
<div class="controls">
<button type="button" class="control control-previous"><-</button>
<button type="button" class="control control-next">-></button>
</div>
<div class="projects">
<div class="project dog"></div>
<div class="project cat"></div>
<div class="project rabbit"></div>
</div>
</div>
</main>

How do I make a full page width dropdown when you click the :hover of the burger menu?

How do I make a full page width drop-down appear when the burger menu is clicked but still keep the close function(X). (Dropdown menu and the close burger menu transition when clicked)
Below is the JS functions for the burger menu animations. Transition with hover and close when clicked.
$("#wrapper").hover(function() {
$(".menu").toggleClass("transition");
});
$("#wrapper").click(function() {
$(".transition").toggleClass("close");
});
Below is the css to transition the burger menu when hovered and closed functions are applied.
<style>
.burgerMenu-right {
font-family: 'Circe Rounded', sans-serif;
font-weight: 800;
display: inline;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 8px;
font-size: 20px;
color: black;
float: right;
position: relative;
right: 4%;
}
.main-item {
width: 30px;
height: 30px;
position: relative;
cursor: pointer;
}
.line {
position: absolute;
height: 2px;
width: 100%;
background: white;
border-radius: 2px;
transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
background: black;
}
.line01 {
top: 33.3%;
width: 100%;
left: 0;
}
.line02 {
top: 66.6%;
width: 65%;
right: 0;
}
.menu:hover .line01 {
width: 65%;
}
.menu:hover .line02 {
width: 100%;
top: 66%;
}
.menu.close .line01 {
transform: rotate(45deg);
top: 49%;
width: 100%;
}
.menu.close .line02 {
transform: rotate(-45deg);
top: 49%;
width: 100%;
}
</style>
Below is the html for the burger menu....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="main-item menu">
<span class="line line01"></span>
<span class="line line02"></span>
</div>
</div>
Thanks!

use below code
$(document).ready(function($) {
$(".menu").click(function(){
$(this).toggleClass("transition close");
$(".down-bg").slideToggle();
})
});
.burgerMenu-right {
font-family: 'Circe Rounded', sans-serif;
font-weight: 800;
display: inline;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 8px;
font-size: 20px;
color: black;
float: right;
position: relative;
right: 4%;
}
.main-item {
width: 30px;
height: 30px;
position: relative;
cursor: pointer;
z-index: 10
}
.line {
position: absolute;
height: 2px;
width: 100%;
background: white;
border-radius: 2px;
transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
background: black;
}
.line01 {
top: 33.3%;
width: 100%;
left: 0;
}
.line02 {
top: 66.6%;
width: 65%;
right: 0;
}
.menu:hover .line01 {
width: 65%;
}
.menu:hover .line02 {
width: 100%;
top: 66%;
}
.menu.close .line01 {
transform: rotate(45deg);
top: 49%;
width: 100%;
}
.menu.close .line02 {
transform: rotate(-45deg);
top: 49%;
width: 100%;
}
.down-bg{
background: rgba(0,0,0,0.5);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="main-item menu">
<span class="line line01"></span>
<span class="line line02"></span>
</div>
<div class="down-bg"></div>
</div>

Categories