I have one question about responsive sidebar menu. First off all i will give you a DEMO from codepen.io
If you change your bowser width then you can see the green button on the top right side. When you click this button then the red background color div will open. But at the same time if you change your bowser width like 640px to 900px then red color div not come back original area.
How can i fixed it anyone can help me in this regard ?
HTML
<div class="test_container">
<div class="left">
<div class="left_in"><div class="aa">ss</div></div>
</div>
<div class="r click_open_close">Click To Show Slide sLeft In</div>
<div class="right"><div class="bb"></div></div>
</div>
CSS
.test_container{
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
max-width: 980px;
min-width: 300px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background-color: #000;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 140px;
}
.left{
display: block;
position: absolute;
float: left;
width: 30%;
overflow: hidden;
padding: 0px;
bottom: 0;
top: 0;
left: 0;
background-color: red;
border-right: 1px solid #d8dbdf;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.left_in{
z-index: 999 !important;
position: absolute;
float: left;
width: 0%;
height: 100%;
background-color: #f7f7f7;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(25rem);
transform: translateX(25rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes slideLeft {
0% {
-webkit-transform: translateX(15rem);
transform: translateX(15rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.aa{
background-color: #f7f7f7;
/*background-color: #dfdfdf;
background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc);
background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/
width: 0;
top: 0;
border-radius:0%;
z-index: 1000;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
overflow: hidden;
position: absolute;
right:0;
}
.click_open_close{
right:0px;
padding:10px;
color:#fff;
position:absolute;
background-color:green;
cursor:pointer;
z-index:999;
display:none;
}
.pp{
right:0px;
padding:10px;
color:#fff;
position:absolute;
background-color:green;
cursor:pointer;
}
.right{
display: block;
position: absolute;
width: 70%;
bottom: 0;
top: 0;
right: 0;
background-color: pink;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
#media all and (max-width: 840px) {
.left {
left:-60%;
}
.secret {
float: left;
display: block;
}
.right {
width: 100%;
}
.click_open_close{
display:block;
}
}
JS
$('.click_open_close').click(function() {
$('.left').animate({
left: "0%"
}, 200);
$('.right').animate({
right: "-30%"
}, 200);
});
Try this
$(document).ready(function(e) {
$('.click_open_close').click(function() {
$('.left').animate({
left: "0%"
}, 200);
});
});
$(window).resize(function(e) {
var windoww = $(window).width();
if(windoww < 840){
location.reload(); //or set whatever animation you want to do for the sidebar gets back in place
};
});
Related
The Code:
<html>
<style>
.img {
max-width: 100%;
}
.Headerstyle {
color: Black;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack {
color: white;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 7%;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
body {
border-style: solid;
border-width: 17px;
border-radius: 5px;
padding: 100px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
width: 100%;
margin: 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
.LoadingBack {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #000000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.LoadingBack:after {
content: '';
position: absolute;
background: white;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: #6699ff;
}
25% {
border-color: #ff6600;
}
50% {
border-color: #6699ff;
}
75% {
border-color: #ff6600;
}
100% {
border-color: #6699ff;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1.5s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
# background-color: orange;
color: white;
font: 18px Arial, sans-serif;
background-image: url('https://c.tenor.com/YR9WPlpD1zEAAAAd/cloud.gif');
background-size: cover;
transform: rotateY(180deg);
}
//////////////////////////
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Ariel, Helvetica, sans-serif;
background-color: #A3EBB1 ;
color: white;
line-height: 1.6;
text-align: center;
}
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase{
height: 300px;
}
#showcase h1{
font-size: 50px;
line-height: 1.3;
position: relative;
animation: heading;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
#keyframes heading{
0% {top: -50px;}
100% {top: 200px;}
}
#visual2 {
position: relative;
animation-name: visual;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes visua2l{
0% {left: -1000px;}
100% {left: 0px;}
}
#visual {
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {transform: rotate(45deg);}
}
.homepage {
display = 'none';
}
//////////////////////////
</style>
<script>
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
function bodyOnload() {
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(45deg)';
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/black/wink-xxl.png";
/* if you don't want to rotate base delete this delay block*/
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png";
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(0)';
setTimeout(() => { const box = document.getElementById('animatedImg'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box = document.getElementById('showcase'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box2 = document.getElementById('homepage'); box2.style.display = 'block';}, 2000);
});
});
}
</script>
<body>
<head>
<title>Dynamic Web Page</title>
</head>
<header id="showcase">
<h1>Uygulamaya Hoşgeldiniz</h1>
</header>
<body onload="bodyOnload()">
<div class="container-welcome">
<img id="animatedImg" src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</body>
<div class="flip-card" id="homepage" style= "display:none;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b></b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>tasci.murat06#gmail.com</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60">
<img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="LoadingBack"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello friends, How can I prevent the border from appearing when the welcome screen appears?
That means I want to see a border on the only main page. How can fix this on my code? I couldn't block the border during the welcome screen. I also added a picture of the desired situation. You can see it below. I am waiting for your help.
First define an id to body element, then write document.getelementbyID("definedID").style.border="solid 50px"; in your function(bodyOnLoad()). Therefore you have a animated border that scaling 0px to 50px on body.
You can use the code below: (in chrome, it will work more accurately than the snippet)
<html>
<style>
.img {
max-width: 100%;
}
.Headerstyle {
color: Black;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack {
color: white;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 7%;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
.all {
display:block;
border-style: none;
border-width: 0 px;
border-radius: 5px;
padding: 100px;
transition: 5s;
}
.all {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
width: 100%;
margin: 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
.LoadingBack {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #000000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.LoadingBack:after {
content: '';
position: absolute;
background: white;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: #6699ff;
}
25% {
border-color: #ff6600;
}
50% {
border-color: #6699ff;
}
75% {
border-color: #ff6600;
}
100% {
border-color: #6699ff;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1.5s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
# background-color: orange;
color: white;
font: 18px Arial, sans-serif;
background-image: url('https://c.tenor.com/YR9WPlpD1zEAAAAd/cloud.gif');
background-size: cover;
transform: rotateY(180deg);
}
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Ariel, Helvetica, sans-serif;
background-color: #A3EBB1 ;
color: white;
line-height: 1.6;
text-align: center;
}
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase{
height: 300px;
}
#showcase h1{
font-size: 50px;
line-height: 1.3;
position: relative;
animation: heading;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
#keyframes heading{
0% {top: -50px;}
100% {top: 200px;}
}
#visual2 {
position: relative;
animation-name: visual;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes visua2l{
0% {left: -1000px;}
100% {left: 0px;}
}
#visual {
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {transform: rotate(45deg);}
}
</style>
<script>
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
function bodyOnload() {
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(45deg)';
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/black/wink-xxl.png";
/* if you don't want to rotate base delete this delay block*/
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png";
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(0)';
setTimeout(() => { const box = document.getElementById('animatedImg'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box = document.getElementById('showcase'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box2 = document.getElementById('homepage'); box2.style.display = 'block';}, 2000);
document.getElementById('innerbody').style.border="solid 70px";
});
});
}
</script>
<body>
<head>
<title>Dynamic Web Page</title>
</head>
<header id="showcase">
<h1>Uygulamaya Hoşgeldiniz</h1>
</header>
<body onload="bodyOnload()">
<div class="container-welcome">
<img id="animatedImg" src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</body>
<body id="innerbody" class="all">
<div class="flip-card" id="homepage" style= "display:none;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b></b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>tasci.murat06#gmail.com</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60">
<img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="LoadingBack"></div>
</div>
</div>
</div>
</div>
<body>
</body>
<script type="text/javascript">
</script>
</html>
What you need to do is insert this line in your css border: none !important;
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
border:none !important;
}
Try Setting the border style for body to none in the css file.
I am working on making a search bar that will filter my site for reports(urls) based on what is typed in. It currently works sort of. It will filter the items but you have the have the menus expanded for it to filter them.
I am looking for a way to either only have the results that match the search show(get rid of the headers for the dropdowns and only show links). OR to auto expand the dropdowns when a character is typed into the search bar
(closest I could get for a repeatable example.)
function searchSite() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('searchbar');
filter = input.value.toUpperCase();
ul = document.getElementById("Sidebar");
li = ul.getElementsByTagName('li');
closestClass = ul.closest('.parent');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
.evolve .barTop {
-webkit-transform: rotate(-45deg) translate(-8px, 8px);
transform: rotate(-45deg) translate(-8px, 8px);
}
.evolve .barMid {
opacity: 0;
transition: 0.1s ease-in;
}
.evolve .barBot {
-webkit-transform: rotate(-45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
#main {
transition: margin-left 0.5s;
position: relative
}
.content {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height 1s ease-out;
box-shadow: inset 0px 0px 7px 7px rgba(0, 0, 0, 0.15);
}
.content .content-stuff {
background-color: #20396120;
border-left: outset #203961 13px;
padding: .5rem 1rem;
}
.content .content-stuff .subcontent {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height .75s ease-out;
}
.content .content-stuff .subcontent .subcontent-stuff {
border-bottom: solid grey 3px;
padding: .5rem;
}
.button:checked+.header+.content {
max-height: inherit;
}
.subbutton:checked+.subheader+.subcontent {
max-height: inherit;
}
.content .content-stuff .clickLink {
cursor: pointer;
}
hr {
border-style: solid;
color: #20396150;
border-height: .5px;
}
ul.Links {
list-style-type: none;
margin: 0;
padding: 0px;
}
li:not(:last-child) {
margin-bottom: 10px;
}
.fade-in-image {
position: absolute;
top: 13px;
left: 60px;
transition: FadeIn 1.0s ease-in;
}
.fade-in-image h2 {
margin-top: 1px;
margin-left: 45px;
color: #fca445;
white-space: nowrap;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-shadow: 3px 6px 6px rgba(0, 0, 0, 0.19), 0px -7.5px 15px rgba(255, 255, 255, 0.10);
;
}
#keyframes slide-right {
0% {
margin-left: -10%
}
;
100 {
margin-left: 80%
}
;
}
.fade-in-image img {
position: absolute;
animation: move 3s ease infinite;
}
#keyframes move {
0% {
margin-left: -10px;
}
5% {
margin-left: -9.25px;
}
10% {
margin-left: -10px;
}
15% {
margin-left: -10px;
}
75% {
margin-left: 3px;
}
80% {
margin-left: -11.5px;
}
85% {
margin-left: -5.5px;
}
87.25% {
margin-left: -11px;
}
90% {
margin-left: -7px;
}
95% {
margin-left: -10.5px;
}
97.5% {
margin-left: -9.25px;
}
100% {
margin-left: -10px;
}
}
}
/* popup code credit: codeconvey.com */
.sidebar .pop {
position: absolute;
width: 50%;
margin: auto;
padding: 20px;
height: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#media (max-width: 640px) {
.pop {
position: relative;
width: 100%;
}
}
.sidebar .pop .modal {
z-index: 2;
opacity: 0;
visibility: hidden;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
}
.sidebar .pop .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(0.75);
transform: translate(-50%, -50%) scale(0.75);
top: 50%;
left: 50%;
width: 50%;
background: white;
padding: 30px;
position: absolute;
color: black;
}
#media (max-width: 640px) {
.pop .modal__inner {
width: 100%;
}
}
.sidebar .btn-close {
color: #fff;
text-align: center;
}
.sidebar .pop label {
position: absolute;
top: 8px;
right: 55px;
padding: 1px 19px 1px 19px;
font-size: 45px;
cursor: pointer;
transition: 0.2s;
color: #fca445;
}
.sidebar .pop label.open:hover {
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
background-color: #33d62b60;
font-size: 45px;
}
.sidebar .pop input {
display: none;
}
.sidebar .pop input:checked+.modal {
opacity: 1;
visibility: visible;
}
.sidebar .pop input:checked+.modal .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal .modal__inner p {
font-size: 1.25rem;
line-height: 125%;
}
.sidebar .pop input:checked+.modal label {
position: absolute;
top: 0;
right: 0;
padding: 4px 8px 4px 8px;
font-size: 20px;
cursor: pointer;
transition: 0.2s;
color: #000;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal label:hover {
background-color: #ff141860;
}
<div id="Sidebar" class="sidebar">
<p style="text-align:center;"><input id="searchbar" onkeyup="searchSite()" type="text" name="search" placeholder="Search" title="Report or Category Name" style="width: 300px;" /></p>
<input id="OpsButton" class="button" type="checkbox">
<label for="OpsButton" class="header">Operations</label>
<div class="content">
<div class="content-stuff">
<input id="Button1" class="subbutton" type="checkbox">
<label for="Button1" class="subheader">Header1</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region" href="X" target="bodyinfo">Region</a></li>
<li><a title="range" href="X" target="bodyinfo">range</a></li>
</ul>
</div>
</div>
<input id="FinancialButton" class="subbutton" type="checkbox">
<label for="FinancialButton" class="subheader">Financials</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region2" href="X" target="bodyinfo">Region2</a></li>
<li><a title="range2" href="X" target="bodyinfo">range2</a></li>
</ul>
</div>
</div>
<p>
</p>
<ul class="Links">
<li>Turnover Report</li>
</ul>
<p></p>
</div>
</div>
</div>
Okay figured it out by creating a function that will click all of the header buttons to expand the menus. and adding this function call to my main function. So if the menu is already expanded, it won't close it- otherwise it'll open it. Rinse and repeat for all buttons in your webpage.
var something = (function() {
var executed = false;
return function() {
if (!executed) {
executed = true;
var OpsButton = document.getElementById("OpsButton");
var next = document.getElementById("w/e");
if (!OpsButton.checked) {
OpsButton.click(); }
if (!next.checked) {
next.click(); }
}
};
})();
I have a div that has the name speech-bubble1 and I want to put a hover element to that, it will expand the scale however, it is not working, I have tried putting other hovering properties and they are working fine, please help me.
I want to scale the speech bubble once I hover over it. Thank you in advance!
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
:root {
font-size: 16px;
font-family: "Open Sans";
}
body {
margin: 0;
padding: 0;
background-color: #191921;
overflow: hidden; /* Hide scrollbars */
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-thumb {
background: #43434f;
}
main {
color: white;
margin-left: 3rem;
padding: 1rem;
}
.greetings h1 {
padding: 0;
margin: 0;
}
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
main .speech-bubble1:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.speech-bubble2 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 90px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 600ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble2 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
.speech-bubble3 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 55px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 800ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble3 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
span {
font-weight: bold;
font-size: 20px;
margin: 0;
padding: 0;
font-family: Arial Rounded MT;
}
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
.Aljon:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.navbar {
position: fixed;
background-color: var(--bg-primary);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
animation: nav-load 600ms ease-in-out;
}
#keyframes nav-load {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.navbar-nav {
list-style: none;
padding: 110px 0 0 0;
margin: 0;
flex-direction: column;
align-items: center;
height: 100%;
bottom: 30px;
position: relative;
background-color: #23232e;
}
.nav-item a {
display: block;
text-decoration: none;
background: #23232e;
color: #ffffff;
padding: 10;
margin: 2px 0;
width: 200px;
display: flex;
align-items: center;
margin-left: -173px;
transition: 0.2s ease;
}
.nav-item a:hover {
margin-left: -5;
color: #ffffff;
font-weight: bold;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 15px 5px 5px -5px rgba(0, 3, 7, 0.8);
}
li i#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
}
li a#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
li i {
color: white;
font-size: 27px;
padding: 0;
filter: grayscale(100%) opacity(0.1);
width: 100%;
text-align: right;
transition: 0.2s ease;
}
Li i:hover {
color: white;
filter: grayscale(0) opacity(1);
text-align: right;
transition: 0.2s ease;
}
.logo h1 {
font-family: Rustico;
font-size: 35px;
margin: 0;
padding: 0;
background: -webkit-linear-gradient(rgb(255, 7, 7), rgb(14, 14, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.logo h1:hover {
transition: 0.6s ease-in-out;
cursor: pointer;
transform: rotateZ(360deg);
}
.logo p {
color: #ececec;
position: relative;
bottom: 35px;
font-size: 10px;
font-family: APEX;
text-align: center;
}
hr {
border: 2px solid white;
padding: 0 5px;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper .icon {
padding: 10px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
transition: 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span {
color: #0c0c0c;
padding: 0;
margin: 0;
display: block;
height: 40px;
width: 40px;
background: #fff;
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i {
line-height: 40px;
font-size: 25px;
text-align: center;
}
.wrapper .icon .tooltip {
position: absolute;
left: 80px;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s ease-in-out;
}
.wrapper .icon:hover .tooltip {
left: 50px;
top: 8px;
opacity: 1;
transition: 0.1s ease-in-out;
}
.wrapper .icon:hover span {
color: #fff;
filter: opacity(1);
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before {
background: #3b5999;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before {
background: #de463b;
}
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #51516a url(../Resources/Loader.gif) no-repeat center center;
filter: opacity(0.1);
z-index: 99999;
}
/* Small screens */
#media only screen and (max-width: 600px) {
.navbar {
bottom: auto;
width: 100vw;
height: 3rem;
}
.navbar-nav {
flex-direction: row;
bottom: auto;
width: 100vw;
height: 3rem;
}
.wrapper .icon span {
margin-left: 450px;
bottom: 30px;
}
.wrapper .icon:hover .tooltip {
right: 100;
top: 0;
opacity: 1;
transition: 0.4s ease-in-out;
}
}
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 3rem;
height: 100vh;
}
}
<div class="text1">
<div class="speech-bubble1">
<p>Nice to meet you and welcome to my Website!
I'm <span>Aljon Gabriel A. Valdez</span> and I am a <span>Bachelor's of Science in Information Technology graduate.</span>
</p>
</div>
Because you have given z-index: -1; remove or make it z-index:
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
:root {
font-size: 16px;
font-family: "Open Sans";
}
body {
margin: 0;
padding: 0;
background-color: #191921;
overflow: hidden; /* Hide scrollbars */
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-thumb {
background: #43434f;
}
main {
color: white;
margin-left: 3rem;
padding: 1rem;
}
.greetings h1 {
padding: 0;
margin: 0;
}
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: 1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
.speech-bubble1:hover {
width: 100%;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
main .speech-bubble1:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.speech-bubble2 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 90px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 600ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble2 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
.speech-bubble3 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 55px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 800ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble3 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
span {
font-weight: bold;
font-size: 20px;
margin: 0;
padding: 0;
font-family: Arial Rounded MT;
}
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
.Aljon:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.navbar {
position: fixed;
background-color: var(--bg-primary);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
animation: nav-load 600ms ease-in-out;
}
#keyframes nav-load {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.navbar-nav {
list-style: none;
padding: 110px 0 0 0;
margin: 0;
flex-direction: column;
align-items: center;
height: 100%;
bottom: 30px;
position: relative;
background-color: #23232e;
}
.nav-item a {
display: block;
text-decoration: none;
background: #23232e;
color: #ffffff;
padding: 10;
margin: 2px 0;
width: 200px;
display: flex;
align-items: center;
margin-left: -173px;
transition: 0.2s ease;
}
.nav-item a:hover {
margin-left: -5;
color: #ffffff;
font-weight: bold;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 15px 5px 5px -5px rgba(0, 3, 7, 0.8);
}
li i#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
}
li a#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
li i {
color: white;
font-size: 27px;
padding: 0;
filter: grayscale(100%) opacity(0.1);
width: 100%;
text-align: right;
transition: 0.2s ease;
}
Li i:hover {
color: white;
filter: grayscale(0) opacity(1);
text-align: right;
transition: 0.2s ease;
}
.logo h1 {
font-family: Rustico;
font-size: 35px;
margin: 0;
padding: 0;
background: -webkit-linear-gradient(rgb(255, 7, 7), rgb(14, 14, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.logo h1:hover {
transition: 0.6s ease-in-out;
cursor: pointer;
transform: rotateZ(360deg);
}
.logo p {
color: #ececec;
position: relative;
bottom: 35px;
font-size: 10px;
font-family: APEX;
text-align: center;
}
hr {
border: 2px solid white;
padding: 0 5px;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper .icon {
padding: 10px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
transition: 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span {
color: #0c0c0c;
padding: 0;
margin: 0;
display: block;
height: 40px;
width: 40px;
background: #fff;
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i {
line-height: 40px;
font-size: 25px;
text-align: center;
}
.wrapper .icon .tooltip {
position: absolute;
left: 80px;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s ease-in-out;
}
.wrapper .icon:hover .tooltip {
left: 50px;
top: 8px;
opacity: 1;
transition: 0.1s ease-in-out;
}
.wrapper .icon:hover span {
color: #fff;
filter: opacity(1);
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before {
background: #3b5999;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before {
background: #de463b;
}
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #51516a url(../Resources/Loader.gif) no-repeat center center;
filter: opacity(0.1);
z-index: 99999;
}
/* Small screens */
#media only screen and (max-width: 600px) {
.navbar {
bottom: auto;
width: 100vw;
height: 3rem;
}
.navbar-nav {
flex-direction: row;
bottom: auto;
width: 100vw;
height: 3rem;
}
.wrapper .icon span {
margin-left: 450px;
bottom: 30px;
}
.wrapper .icon:hover .tooltip {
right: 100;
top: 0;
opacity: 1;
transition: 0.4s ease-in-out;
}
}
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 3rem;
height: 100vh;
}
}
<div class="text1">
<div class="speech-bubble1">
<p>Nice to meet you and welcome to my Website!
I'm <span>Aljon Gabriel A. Valdez</span> and I am a <span>Bachelor's of Science in Information Technology graduate.</span>
</p>
</div>
1"
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
and add:
.speech-bubble1:hover {
width: 100%;
}
If you just want scale the "speech bubble" when hover it, you need to :
FIRST = replace translate animation on <div class="text1">
SECOND = place a scale transform on <div class="speech-bubble1">
Like this :
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
}
.speech-bubble1:hover {
width: 584px;
height: 712px;
transform: scale(1.1);
transition: 1s ease;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
I would like to add the full page parallax scroll effect on a one-page website, but I have no idea how to add this effect.
I have tried to set up the section height: 100vh, but the result goes out that the last section covers the above sections.
Do you have any suggestions? Any help is appreciated. Thank you so much.
HTML:
<html lang="en">
<body>
<div class="twinkling"></div>
<header>
<div class="header-container">
<h1>Constellations</h1>
</div>
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
</header>
<section id="section1" class="background">
<div id="crystal-animation">
<figure>
<img src="img/crystal.svg" alt="" class="crystal">
</figure>
</div>
</section>
<section id="section2" class="background">
<article class="content">
<h2>What is Constellations?</h2>
<p>Constellations are patterns in the night sky often formed by the most prominent stars to the naked eye. </p>
<p>Constellations often carry names and take the shape of gods, hunters, princesses, objects and mythical beasts associated with Greek mythology – however, at times. </p>
<aside><img src="img/crystal-animation.svg" alt="" class="crystal-animation"></aside>
</article>
</section>
<section id="section3" class="background">
<h2 >12 Constellations</h2>
<p>Click the constellation cards and understand more.</p>
<div class="card">
<ul class="gallery">
<li><img src="img/12-constellation-cards/1.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/4.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/7.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/10.svg" alt="" class="svg"></li>
</ul>
<ul class="gallery">
<li><img src="img/12-constellation-cards/2.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/5.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/8.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/11.svg" alt="" class="svg"></li>
</ul>
<ul class="gallery">
<li><img src="img/12-constellation-cards/3.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/6.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/9.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/12.svg" alt="" class="svg"></li>
</ul>
</div>
</section>
<section id="section4" class="background">
<div class="s3-content">
<h2>How to Find Constellations in the Night Sky?</h2>
<p class="s3">Using a star map will be your best bet for assisting in finding where to look for constellations, depending on your location and time of year. It’s different depending on where you live and on the seasons. You can also need the additional app to help find the constellations, that lets you enter your location and gives you a customized star map. </p>
<p class="s3">All you need is a dark sky, so as far away from cities as possible, and for extra visual aide, a pair of binoculars or a telescope. With binoculars or a telescope, you’ll see fainter stars and other features like nebulae and star clusters. When you’re out observing, you’ll want to generally orient yourself towards the North Star.</p>
</div>
</section>
</body>
</html>
JavaScript:
$(document).ready(function () {
let hamburgerClicked = false;
$("#toggle").on("click", function () {
if (hamburgerClicked == false) {
$(".top").css(
"transform",
"translateY(11px) translateX(0) rotate(45deg)"
);
$(".middle").css("display", "none");
$(".bottom").css(
"transform",
"translateY(-11px) translateX(0) rotate(-45deg)"
);
hamburgerClicked = true;
} else {
$(".top").css("transform", "translateY(0px) translateX(0) rotate(0deg)");
$(".middle").css("display", "");
$(".bottom").css(
"transform",
"translateY(0px) translateX(0) rotate(0deg)"
);
hamburgerClicked = false;
}
$("#overlay").toggleClass("active");
$("#overlay").toggleClass("open");
});
});
CSS:
* {
box-sizing: border-box;
list-style: none;
}
html {
height: 100%;
scroll-behavior: smooth;
}
body {
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
font-size: 15px;
color: #fff;
background-image: url(../img/background/background.png);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#meteor-shower {
position: absolute;
top: 0;
left: 0;
}
section {
height: 100vh;
transform: translateY(40vh);
will-change: transform;
transform: translateY(30vh);
transition-timing-function: .2s all, cubic-bezier(0.22, 0.44, 0, 1);
text-decoration: none;
scroll-behavior: smooth;
}
.twinkling {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 95%;
display: block;
}
.twinkling {
position: absolute;
background: transparent url(../img/background/2446101-03.png) repeat top center;
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
-webkit-animation: move-twink-back 16s infinite;
-moz-animation: move-twink-back 16s infinite;
-o-animation: move-twink-back 16s infinite;
animation: move-twink-back 16s infinite;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#-webkit-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
header {
height: 3em;
position: fixed;
}
.header-container {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.header-container h1 {
font-family: 'Gabriela', serif;
font-size: 1.5em;
float: left;
padding-top: 5px;
padding-left: 20px;
display: block;
}
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: 0.7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: #fff;
border: none;
height: 4px;
width: 32px;
position: absolute;
top: 0;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
border-radius: 3px;
}
.middle {
top: 10px;
}
.bottom {
top: 20px;
}
.overlay {
z-index: 500;
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: 0.6;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, height 0.35s;
}
li {
animation: fadeInRight 0.5s ease forwards;
animation-delay: 0.35s;
}
li:nth-of-type(2) {
animation-delay: 0.4s;
}
li:nth-of-type(3) {
animation-delay: 0.45s;
}
li:nth-of-type(4) {
animation-delay: 0.5s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: 0.35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
#section1 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section1 {
:nth-child(1) {
padding-top: 0px;
display: flex;
}
}
#crstal-animation {
overflow: hidden;
display: block;
}
.crystal {
width: 25%;
position: absolute;
top: -46px;
left: 40%;
margin: 0;
margin-right: -50%;
transform-style: preserve-3d;
-webkit-animation: rotation 8s infinite linear;
-moz-animation: rotation 8s infinite linear;
-o-animation: rotation 8s infinite linear;
animation: rotation 8s infinite linear;
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
35% {
-webkit-transform: rotate(38deg) rotateX(5deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
65% {
-webkit-transform: rotate(-38deg) rotateX(2deg);
filter: drop-shadow(16px 0px 10px rgb(255, 255, 255, 0.8));
}
86% {
-webkit-transform: rotateX(-20deg) rotateY(1deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
100% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
}
#section2 {
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.content {
width: 59%;
background: rgba(0, 0, 0, 0.6);
position: relative;
padding-bottom: 30px;
padding-left: 30px;
display: block;
}
.content p {
width: 88%;
margin: 15px;
text-align: left;
}
.content h2 {
text-align: center;
padding-top: 30px;
}
.crystal-animation {
width: 68%;
float: right;
margin-top: -56%;
margin-right: -80%;
-webkit-filter: drop-shadow(5px 5px 5px #222);
-moz-filter: drop-shadow(5px 5px 5px #222);
-o-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
aside {
display: block;
}
#section3 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section3:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
}
.gallery {
list-style: none outside none;
flex-direction: row;
display: flex;
align-content: center;
flex-flow: row wrap;
justify-content: center;
}
h2,
p {
text-align: center;
}
.heading {
text-align: center;
}
.gallery li {
margin: 10px;
}
.gallery li:hover {
transform: scale(1.1)
}
.svg {
width: 75%;
filter: drop-shadow(10px)rgba(0, 0, 0, 0.6);
-moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
}
#section3-content {
padding-right: 100px;
padding-left: 100px;
margin-top: -90px;
overflow: hidden;
transition-timing-function: ease;
transition: .3s;
}
.intro h3 {
font-family: 'Gabriela', serif;
}
.content-text {
background: rgba(0, 0, 0, 0.8);
position: relative;
padding-bottom: 30px;
padding-left: 20px;
}
.constellation-img {
opacity: .35;
width: 50%;
float: left;
top: -80px;
position: relative;
}
.constellation-star {
width: 56%;
opacity: 1;
float: left;
left: 1%;
margin-top: -80px;
position: absolute;
}
.intro {
float: right;
width: 50%;
top: 40%;
padding-top: 30px;
padding-bottom: 10px;
padding-right: 100px;
color: floralwhite;
}
.constellation-pattern {
width: 11%;
opacity: .9;
margin-left: -10px;
margin-bottom: -15px;
}
.intro p {
text-align: left;
font-size: .9em;
margin-bottom: 15px;
font-weight: 200;
}
.constellation-icon {
list-style: none;
padding: 0;
margin: 0;
display: block;
}
.constellation-icon li {
display: table-cell;
vertical-align: middle;
padding: 1px;
padding-top: 15px;
}
.constellation-button {
width: 50%;
}
.constellation-button:hover {
background: rgb(0, 0, 205, 0.7);
filter: brightness(3);
border-radius: 80px;
border: 2px solid rgb(0, 0, 205, 0.7);
}
.constellation-button:active {
background: rgb(0, 0, 205);
filter: grayscale(.2);
transition-timing-function: linear;
}
.constellation-star-aq {
width: 46%;
opacity: 1;
float: left;
left: 1%;
margin-top: -10px;
position: absolute;
}
.constellation-star-ca {
width: 36%;
opacity: 1;
float: left;
left: 1%;
margin-top: 30px;
margin-left: 40px;
position: absolute;
transform: rotate(16deg);
}
.constellation-img-ca {
opacity: .35;
width: 50%;
float: left;
top: -40px;
position: relative;
}
.constellation-star-ge {
width: 36%;
opacity: 1;
float: left;
left: 1%;
margin-top: 90px;
margin-left: 60px;
position: absolute;
transform: rotate(-3deg);
}
.constellation-img-leo {
opacity: .35;
width: 50%;
float: left;
top: -40px;
position: relative;
}
.constellation-star-leo {
width: 40%;
opacity: 1;
float: left;
left: 1%;
margin-top: 20px;
margin-left: 70px;
position: absolute;
transform: rotate(5deg);
}
.constellation-img-sc {
opacity: .35;
width: 50%;
float: left;
top: -20px;
position: relative;
}
#section4 {
height: 100vh;
display: block;
align-content: center;
background: rgba(0, 0, 0, 0.8);
position: relative;
padding: 0;
margin: 0;
}
.s3 {
text-align: left;
}
.s3-content {
width: 74%;
padding-top: 16%;
padding-left: 30%;
}
Here is a rough working demo on JSFiddle: https://jsfiddle.net/ha3c04yL/4/
i have created an two animation with css https://codepen.io/anon/pen/yOqxdq html an css
<img onclick="show(this);" src="http://tigersincrisis.com/wp-content/uploads/2014/01/image_21.jpg">
#keyframes shadow {
0% { opacity: 0;height: 0; transform : scale(0.1);}
100% { opacity: 1; height: 100%;transform : scale(1);}
}
#keyframes show {
0% { opacity: 0;margin: 20% auto;width: 20%;height: 20%;}
100% { opacity: 1;margin: 0; width: 100%;height: 100%;}
}
#show {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.76);
animation-name: show;
animation-duration: 2s;
animation-fill-mode: forwards;
z-index: 5;
}
#show-item{
position: relative;
margin: 0 auto;
animation-name: shadow;
animation-duration: 3s;
animation-fill-mode: forwards;
opacity: 0;
padding-top: 40px;
}
#show-item img{
border: 4px solid black;
}
a#closeShow{
position: relative;
float: right;
text-decoration: none;
color: #C8C8C8;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.9);
border-radius: 26px;
height: 18px;
position: relative;
top: 25px;
left: 10px;
border: 2px solid #e0e0e0;
box-shadow: 0 0 2px black;
}
the problem is when user scroll the view is changed and div with position absolute stays up and box of showdow doesn't show on portion of the page down
Try position: fixed; for #show.
DEMO: FIDDLE