css animation full page with current view location - javascript

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

Related

How to render tooltip on hover - but downwards direction

Sorry for not providing any working code, but right now my tooltip is rendered "above" the mouse pointer when on hover. But I want it to render 'below' the mouse pointer.
Can you suggest what I should look into?
This is confidential code so cannot share snippets.
This is one of the attributes box-sizing : border-box if that helps.
Thanks.
Edit: Added some code:
#-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
#-moz-keyframes fadeIn {
0% { opacity: 0;}
100% { opacity: 1;}
}
#-o-keyframes fadeIn {
0% { opacity: 0;}
100% { opacity: 1;}
}
#hbox_tooltip {
#include box-sizing(border-box);
width: 480px;
max-height: 206px;
padding: 0 20px 16px 20px;
background-color: #FFFFFF;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.10), 0 2px 4px 1px rgba(0, 0, 0, 0.18);
border-radius: 4px;
z-index: $b-z-implicit-hover;
position: absolute;
display: none;
&.fadeIn {
-webkit-animation: fadeIn 0.2s linear;
-moz-animation: fadeIn 0.2s linear;
-o-animation: fadeIn 0.2s linear;
animation: fadeIn 0.2s linear;
}
.entity_title {
margin-top: 20px;
}
.entity_image {
margin: 16px 0 0 16px;
float: right;
}
.entity_description {
margin: 16px 0 0 0;
line-height: 17px;
}
.entity_source {
margin: 12px 0 20px 0;
float: left;
display: block;
}
&:hover, &:focus {
cursor: pointer;
}
&:before {
#include box-sizing(border-box);
content: '';
position: absolute;
top: 99%;
left: 33%;
width: 0;
height: 0;
margin-left: -10px;
border: 10px solid #FFFFFF;
box-shadow: -4px 4px 1px -1px rgba(0,0,0,.18);
border-color: transparent transparent white white;
transform-origin: 0 0;
transform: rotate(-45deg);
}
&.tooltip_b:before {
top: 1%;
transform: rotate(-225deg);
box-shadow: -2px 2px 2px -2px rgba(0,0,0,.18);
margin-left: 10px;
}
}```

If you need to show the tooltip below the cursor (in downwards direction), I would recommend you to use the built-in title='tooltip' of html, will make your job easier.
Otherwise, if you need to do it using css, you need to just position it, for example:
.tooltip .tooltiptext {
width: 100px;
top: 100%;
left: 50%;
margin-left: -50px; //Half the Width
}

You can use a custom tooltip with below code:
&:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 10px;
margin-left: -10px;
}

HTML, Border Blocking Problem on Welcome Screen

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.

Background color hover animation from bottom to top

I have the following issue. I have a block and want the background color to have an animation from bottom to top by the hover. Please, let me know where is my trouble? Much appreciate.
.right-block--wrapper {
background: #fff none repeat scroll 0 0;
box-shadow: 0 0 5px 1px rgba(50, 50, 50, 0.75);
display: inline-block;
margin-left: -30px;
margin-top: 9px;
padding: 15px 19px 12px;
width: 100%;
max-width: 429px;
position: relative;
z-index: 2;
}
.right-block--wrapper:before {
background:#474747;
bottom: 0;
content: "";
left: 0;
position:
absolute;
right: 0;
top: 0;
transform:scaleY(0);
transform-origin: 50% 100%;
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease-out;
z-index: -1;
}
.right-block--wrapper:hover {
background: #474747;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="right-block--wrapper">
<p>Demo Content</p>
</div><!-- right-block--wrapper -->

You aren't applying any styles to the ::before pseudo element when the .right-block--wrapper element is hovered.
I think perhaps you meant to do this:
.right-block--wrapper {
background: #fff none repeat scroll 0 0;
box-shadow: 0 0 5px 1px rgba(50, 50, 50, 0.75);
display: inline-block;
margin-left: -30px;
margin-top: 9px;
padding: 15px 19px 12px;
width: 100%;
max-width: 429px;
position: relative;
z-index: 2;
}
.right-block--wrapper:before {
background: #474747;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
transform: scaleY(0);
transform-origin: 50% 100%;
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease-out;
z-index: -1;
}
.right-block--wrapper:hover:before {
transform: scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="right-block--wrapper">
<p>Demo Content</p>
</div>
<!-- right-block--wrapper -->

Remove overlay div when user scrolls on div background image

Javascript noob here so any help would be greatly appreciated!
I'm trying to set the .scroll-overlay container to 0 opacity when the user scrolls down the div (revealing the overflow of the background image).
I've managed to get the .scroll-overlay container's opacity to fade to 0 only when the user scrolls on the body element.
How do i specifically target the #laptop-content container?
var fadeStart = 0,
fadeUntil = 0,
fading = $('.scroll-overlay');
$(window).bind('scroll', function() {
var offset = $(document).scrollTop(),
opacity = 0;
if (offset <= fadeStart) {
opacity = 1;
} else if (offset <= fadeUntil) {
opacity = 1 - offset / fadeUntil;
}
fading.css('opacity', opacity).html(opacity);
});
html {
height: 2000px;
}
#laptop-content .img {
-webkit-animation: scroll 0.2s ease-in-out 0s 1 alternate;
-moz-animation: scroll 6.5s ease-in-out 0s 1 alternate;
-o-animation: scroll 6.5s ease-in-out 0s 1 alternate;
animation: scroll 1.2s ease-in-out 0s 1 alternate;
background-image: url("http://via.placeholder.com/750x900");
background-size: contain;
background-repeat: no-repeat;
}
#laptop-content img {
opacity: 0;
}
#-webkit-keyframes scroll {
0% {
background-position: 0px 40px;
}
50% {
background-position: 0px -270px;
}
100% {
background-position: 0px 270px;
}
}
#-moz-keyframes scroll {
0% {
background-position: 0px -40px;
}
50% {
background-position: 0px -270px;
}
100% {
background-position: 0px -450px;
}
}
#-o-keyframes scroll {
0% {
background-position: 0px -40px;
}
50% {
background-position: 0px -470px;
}
100% {
background-position: 0px -850px;
}
}
#keyframes scroll {
0% {
background-position: 0px 300px;
}
80% {
background-position: 0px -40px;
}
100% {
background-position: 0px 0px;
}
}
#laptop-container {
padding-top: 50px;
position: relative;
float: left;
z-index: 10;
width: 750px;
height: 500px;
}
.hide-scrollbar {
position: absolute;
top: 76px;
left: 750px;
height: 500px;
width: 0;
background: #000;
opacity: 1;
z-index: 100;
}
#laptop {
width: auto;
position: absolute;
left: -189px;
}
#scroll-wrapper {
cursor: default !important;
top: 40px;
width: 750px;
height: 500px;
margin-left: 18px;
position: relative;
overflow: hidden;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
-webkit-box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
-moz-box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
}
#laptop-content {
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
#laptop-content img {
width: 100%;
}
.scroll-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1;
}
#-webkit-keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#-moz-keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
.mouse-scroll {
border: none;
display: inline-block;
margin-top: 10%;
text-decoration: none;
overflow: hidden;
width: 100%;
text-align: center;
margin-top: 200px;
}
.mouse-scroll .mouse {
position: relative;
display: block;
width: 18px;
height: 28px;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
border: 2px solid #ffffff;
border-radius: 13px;
}
.mouse-scroll .mouse .mouse-movement {
position: absolute;
display: block;
top: 29%;
left: 50%;
width: 4px;
height: 4px;
margin: -2px 0 0 -2px;
background: #ffffff;
border-radius: 50%;
-webkit-animation: scroll-ani 2s linear infinite;
animation: scroll-ani 2s linear infinite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laptop-container">
<div class="hide-scrollbar"></div>
<div id="scroll-wrapper" style="overflow-y: auto; overflow-x: hidden; cursor: move; touch-action: none; user-select: none;">
<div>
<div id="laptop-content">
<div class="scroll-overlay">
<div class="mouse-scroll">
<span class="mouse">
<span class="mouse-movement"></span>
</span>
</div>
</div>
<div class="img"><img src="http://via.placeholder.com/750x900"></div>
</div>
</div>
</div>
</div>

If I understood what you want correctly, you're already almost there. You just have to bind your scroll-handler to #scroll-wrapper and calculate the scroll-offset of #scroll-wrapper instead of the whole document.
Here's your code with the necessary alterations:
var fadeStart = 0,
fadeUntil = 0,
fading = $('.scroll-overlay');
$('#scroll-wrapper').bind('scroll', function() {
var offset = $('#scroll-wrapper').scrollTop(),
opacity = 0;
if (offset <= fadeStart) {
opacity = 1;
} else if (offset <= fadeUntil) {
opacity = 1 - offset / fadeUntil;
}
fading.css('opacity', opacity).html(opacity);
});
html {
height: 2000px;
}
#laptop-content .img {
-webkit-animation: scroll 0.2s ease-in-out 0s 1 alternate;
-moz-animation: scroll 6.5s ease-in-out 0s 1 alternate;
-o-animation: scroll 6.5s ease-in-out 0s 1 alternate;
animation: scroll 1.2s ease-in-out 0s 1 alternate;
background-image: url("http://via.placeholder.com/750x900");
background-size: contain;
background-repeat: no-repeat;
}
#laptop-content img {
opacity: 0;
}
#-webkit-keyframes scroll {
0% {
background-position: 0px 40px;
}
50% {
background-position: 0px -270px;
}
100% {
background-position: 0px 270px;
}
}
#-moz-keyframes scroll {
0% {
background-position: 0px -40px;
}
50% {
background-position: 0px -270px;
}
100% {
background-position: 0px -450px;
}
}
#-o-keyframes scroll {
0% {
background-position: 0px -40px;
}
50% {
background-position: 0px -470px;
}
100% {
background-position: 0px -850px;
}
}
#keyframes scroll {
0% {
background-position: 0px 300px;
}
80% {
background-position: 0px -40px;
}
100% {
background-position: 0px 0px;
}
}
#laptop-container {
padding-top: 50px;
position: relative;
float: left;
z-index: 10;
width: 750px;
height: 500px;
}
.hide-scrollbar {
position: absolute;
top: 76px;
left: 750px;
height: 500px;
width: 0;
background: #000;
opacity: 1;
z-index: 100;
}
#laptop {
width: auto;
position: absolute;
left: -189px;
}
#scroll-wrapper {
cursor: default !important;
top: 40px;
width: 750px;
height: 500px;
margin-left: 18px;
position: relative;
overflow: hidden;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
-webkit-box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
-moz-box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
}
#laptop-content {
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
#laptop-content img {
width: 100%;
}
.scroll-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1;
}
#-webkit-keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#-moz-keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
.mouse-scroll {
border: none;
display: inline-block;
margin-top: 10%;
text-decoration: none;
overflow: hidden;
width: 100%;
text-align: center;
margin-top: 200px;
}
.mouse-scroll .mouse {
position: relative;
display: block;
width: 18px;
height: 28px;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
border: 2px solid #ffffff;
border-radius: 13px;
}
.mouse-scroll .mouse .mouse-movement {
position: absolute;
display: block;
top: 29%;
left: 50%;
width: 4px;
height: 4px;
margin: -2px 0 0 -2px;
background: #ffffff;
border-radius: 50%;
-webkit-animation: scroll-ani 2s linear infinite;
animation: scroll-ani 2s linear infinite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laptop-container">
<div class="hide-scrollbar"></div>
<div id="scroll-wrapper" style="overflow-y: auto; overflow-x: hidden; cursor: move; touch-action: none; user-select: none;">
<div>
<div id="laptop-content">
<div class="scroll-overlay">
<div class="mouse-scroll">
<span class="mouse">
<span class="mouse-movement"></span>
</span>
</div>
</div>
<div class="img"><img src="http://via.placeholder.com/750x900"></div>
</div>
</div>
</div>
</div>

Responsive sidebar push menu

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
};
});

Categories