Automatically animated css javascript underline - javascript

Need make CSS (Javascript) underline like this (Some Example from codepen)
#import url(http://fonts.googleapis.com/css?family=Quando);
*, *:after, *:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
* {margin:0;padding:0;border:0 none;position: relative; outline: none;
}
html, body {
background: #004050;
font-family: Quando;
font-weight: 300;
width: 100%;
}
h2, h3 {
background: #0D757D;
width: 100%;
min-height: 200px;
line-height: 200px;
font-size: 3rem;
font-weight: normal;
text-align: center;
color: rgba(0,0,0,.4);
margin: 3rem auto 0;
}
.uno {background: #ff5e33;}
.dos.bis {background: #85144B;}
.dos {background: #FADD40;}
h3 {background: #2B5B89;}
h2 > a, h3 > a {
text-decoration: none;
color: rgba(0,0,0,.4);
z-index: 1;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: #9CF5A6;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
}
h2 > a:hover:before,
h2 > a:focus:before {
visibility: visible;
transform: scaleX(1);
}
.uno a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #ffdb00;
}
.dos > a:after {
content: "";
position: absolute;
width: 100%;
height: 7px;
border: 1px solid #000;
bottom: -2px;
left: 0;
background: #fff;
border-radius: 5px;
opacity: 0;
transform: scalex(0);
transition: .5s;
}
.dos.bis > a:after {
opacity: .05;
transform: scalex(1);
}
.dos:hover > a:after {
opacity: .15;
transform: scalex(1);
}
.dos.bis > a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #FADD40;
}
.dos > a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #FF5E33;
}
h3 > a:before {
content: "";
background: #7FDBFF;
position: absolute;
width: 100%;
height: 5px;
bottom: 0;
left: 0;
border-radius: 5px;
transform: scaleX(0);
animation: 1.4s forwards no-hover-v linear;
animation-fill-mode: forwards;
z-index: -1;
}
h3 > a:hover:before,
h3 > a:focus:before {
animation: .5s forwards hover-v linear;
animation-fill-mode: forwards;
}
#keyframes hover-v {
0% {
transform: scaleX(0);
height: 5px;
}
45% {
transform: scaleX(1.05);
height: 5px;
}
55% {height: 5px;}
100% {
transform: scaleX(1.05);
height: 3.8rem;
}
}
#keyframes no-hover-v {
0% {
transform: scaleX(1.05);
height: 3.8rem;
}
45% {height: 5px;}
55% {
transform: scaleX(1.05);
height: 5px;
opacity: 1;
}
100% {
transform: scaleX(0);
height: 5px;
opacity: .02;
}
}
p {padding: .5rem;}
p a {color: rgba(255,255,255,.5)}
<h2>
<a href=''>:hover, please</a>
</h2>
But the underline must start growing from left to right and and then reduce to from right to left with some speed. And the underline must be animated automatically without mouse hovering links.
An when link have mouse hover the underline must be simultaneously grow to right.
Please code how to do this.

Use transform-origin to control the direction of the scale(), and you can trigger with a class to add/remove the border.
var a = document.getElementById("a");
setTimeout(function() {
a.classList.add("under");
setTimeout(function() {
a.classList.remove("under");
}, 2000);
}, 500);
h2 {
background: #0D757D;
width: 100%;
min-height: 200px;
line-height: 200px;
font-size: 3rem;
font-weight: normal;
text-align: center;
color: rgba(0,0,0,.4);
margin: 3rem auto 0;
}
h2 > a {
text-decoration: none;
color: rgba(0,0,0,.4);
z-index: 1;
position: relative;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: #9CF5A6;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
transform-origin: 0 0;
}
h2 > a.under:before {
visibility: visible;
transform: scaleX(1);
}
<h2>
<a id="a" href=''>:hover, please</a>
</h2>

Related

How Do I Uncheck A Checkbox When Navigating Backwards Or Forwards Between A Web Page?

I have a responsive hamburger menu made with a checkbox that works without any issues. What I'd like to be able to do is uncheck the checkbox when going backward or forward (navigating between pages). I would like it so that when I use the backward or forward button on a web browser the box is unchecked and the menu disappears.
This is the Javascript that I've tried but have not been able to get working properly:
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward"){
$('checkbox').removeAttribute('checked');
}
If anyone knows of a way to uncheck a checkbox and have it so a hamburger menu doesn't appear when navigating between web pages I'd appreciate you sharing your knowledge. Thank you.
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward") {
$('checkbox').removeAttribute('checked');
}
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
#media (max-width: 1130px)and (min-width: 280px) {
.responsive-image-container {
display: flex;
flex-direction: column;
text-align: center;
}
img {
width: 85%;
}
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden; padding-bottom: 10px; font-size: 15px;">
<li style="border-bottom: 1px solid lightgray;">ホーム</li>
<li style="border-bottom: 1px solid lightgray;">ブログ</li>
<li style="border-bottom: 1px solid lightgray;">このサイトについて</li>
<li style="border-bottom: 1px solid lightgray;">参考文献</li>

How Can I Close My Hamburger Menu After Clicking On A Link?

I have a hamburger menu that's made with pure CSS. It works well, but I'd like to be able to have it closed after clicking on one of the links inside it.
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
I've tried to add a closeNav(); function, but haven't been able to get it working. I’d like it so that if I were to go back to a page where the hamburger menu had been opened and used to navigate to another page then it would be closed. If anyone knows how I could close the menu when clicking on a link inside of it I'd appreciate you sharing your knowledge with me. Thank you.
This is my CSS.
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}

Using JavaScript to do something after you scroll an amount of pixels doesn't work

I followed this tutorial here and edited it a little bit to change it to this:
<script lang="text/javascript">
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("header").style.display = "block";
} else {
document.getElementById("header").style.display = "none";
}
}
</script>
With the header HTML being:
<div style="display: none;" id="header">Header</div>
When I try this in my .html file it will not work and doesn't even say a log in the console if I ask it to. I created a new HTML file with no reference to my CSS file and that worked so I think it is something to do with that, I don't know what though. Here is my CSS:
* {
box-sizing: border-box;
}
body {
/*Want to change background image?*/
/*Upload a new one to the img folder.*/
/*Make sure you name it 'minecraft.jpg'*/
background: linear-gradient(rgba(20, 26, 35, 0.55), rgba(20, 26, 35, 0.55)),
url("../img/background.jpg") no-repeat center center fixed;
background-size: cover;
font-family: "Open Sans", Helvetica;
margin: 0;
position: relative;
}
#header {
background-color: #f1f1f1; /* Grey background */
padding: 50px 10px; /* Some padding */
color: black;
text-align: center; /* Centered text */
font-size: 90px; /* Big font size */
font-weight: bold;
position: fixed; /* Fixed position - sit on top of the page */
top: 0;
width: 100%; /* Full width */
transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}
html,
body {
width: 100vw;
height: 100vh;
overflow-x: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
scroll-behavior: smooth;
}
a {
text-decoration: none;
/* color: rgb(0, 0, 0); */
}
.a-contact {
text-decoration: underline !important;
color: black;
}
.a-contact:hover {
color: rgb(236, 149, 35);
transition: all 0.3s ease-in;
}
p {
margin: 0;
padding: 3px;
}
.container {
text-align: center;
}
.logo img {
width: 225px;
/* Change image size for mobile */
-webkit-animation-name: logo;
animation-name: logo;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
#-webkit-keyframes logo {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes logo {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.playercount {
display: inline-block;
margin: 20px 15px 0 15px;
padding: 2px 0;
background-color: rgba(15, 199, 209, 0.75);
font-size: 1em;
color: white;
text-align: center;
border-radius: 5px 0 5px 0;
line-height: 27px;
}
.playercount>p>span {
font-weight: bold;
padding: 1px 4px;
border-radius: 3px;
background: rgba(9, 150, 158, 0.7);
margin: 0 2px;
}
.extrapad {
padding: 0;
}
.ip {
cursor: pointer;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-preferred-size: 100px;
flex-basis: 100px;
padding: 18px 0 10px 0;
}
.item img {
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
margin-bottom: 7px;
}
.item img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.img {
width: 80%;
}
.title {
font-weight: bold;
font-size: 17px;
color: white;
}
.subtitle {
color: #cfcfcf;
font-size: 12px;
}
.title,
.subtitle {
margin: 0;
padding: 0;
}
#media(min-width: 400px) {
.logo img {
width: 280px;
/* Change image size for mid sized devices */
}
.playercount {
margin-top: 30px;
padding: 5px;
}
.playercount>p>span {
padding: 2px 7px;
}
}
#media(min-width: 1250px) {
.title {
font-size: 24px;
}
.subtitle {
font-size: 15px;
}
.logo img {
width: 470px;
/* Change image size for desktop */
}
.logo {
margin-bottom: 28px;
}
.img {
width: 100%;
}
.items {
padding: 30px 0 20px 0;
}
.playercount {
font-size: 1.22em;
padding: 10px;
}
.extrapad {
padding: 0 42.5px;
}
.playercount>p>span {
padding: 4px 7px;
}
}
#media(min-width: 1000px) {
.items {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.item:not(:first-child) {
margin-left: 90px;
}
}
.footer {
position: absolute;
color: white;
margin-left: 5px;
top: 98%;
left: 0;
position: fixed;
z-index: 1;
}
.background {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(0deg, rgb(255, 136, 0, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 110%;
height: 50%;
}
.background-white {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(0deg, rgba(255, 255, 255, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 220%;
height: 50%;
}
.background-opposite {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(rgb(255, 136, 0, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 200%;
height: 50%;
}
.background-white-opposite {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(rgba(255, 255, 255, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 310%;
height: 50%;
}
.inner {
background-color: rgba(255, 136, 0, 0.781);
height: 40%;
top: 160%;
width: 100%;
position: absolute;
}
.inner-white {
background-color: rgba(255, 255, 255, 0.781);
height: 40%;
top: 270%;
width: 100%;
position: absolute;
}
/* .inner-text {
text-align: center;
} */
.inner-text-head {
padding-top: 20px;
font-size: 55px;
text-align: center;
}
.inner-text-white-head {
padding-top: 20px;
font-size: 55px;
text-align: center;
}
.inner-text-white-h2 {
font-size: 35px;
text-align: center;
}
.contact-area {
padding: 20px;
border-radius: 5px;
background-color: rgb(255, 255, 255);
border-color: black;
border-style: dashed;
border-width: 5px;
width: 50% !important;
left: 25% !important;
position: relative;
z-index: 2;
}
.inner-text-p {
width: 75%;
left: 13%;
text-align: center;
position: relative;
font-size: 20px;
color: black;
}
.inner-white-text-p {
width: 75%;
left: 13%;
text-align: center;
position: relative;
font-size: 20px;
color: black;
}
.solved {
color: orange !important;
font-weight: bold;
}
.italic {
font-style: italic;
}
/* Scroll Down */
#s-scroll {
position: relative;
width: 24px;
height: 24px;
}
.chevroncontainer {
position: absolute;
/* margin-left: auto;
margin-right: auto; */
top: 30%;
/* right: 50%; */
/* left: 50%; */
/* top: 30%;
left: -30%; */
}
.chevron {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 0.2s ease-out infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
margin-left: -18px;
}
/* .chevroncontainer {
position: absolute;
bottom: 100px !important;
} */
.chevron:first-child {
animation: move 0.2s ease-out 0.2s infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}
.chevron:nth-child(2) {
animation: move 0.2s ease-out 0.2s infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}
/* CHEVRON CHANGED */
.changedchevron {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 2s ease-out infinite;
/* margin-left: -538px; */
margin-left: -678px;
}
.changedchevronNO {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 2s ease-out 1;
margin-left: -18px;
}
/* .changedchevron:first-child {
animation: move 2s ease-out 0.2s infinite;
}
.changedchevron:nth-child(2) {
animation: move 2s ease-out 0.2s infinite;
} */
.changedchevron:before,
.changedchevron:after {
content: ' ';
position: absolute;
top: 0;
height: 40%;
height: 40%;
width: 51%;
background: #fff;
}
.changedchevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.changedchevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
/* CHEVRON CHANGED END */
.chevron:before,
.chevron:after {
content: ' ';
position: absolute;
top: 0;
height: 100%;
height: 40%;
width: 51%;
background: #fff;
}
.chevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.chevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
#keyframes move {
25% {
opacity: 1;
}
33% {
opacity: 1;
transform: translateY(30px);
}
67% {
opacity: 1;
transform: translateY(40px);
}
100% {
opacity: 0;
transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
}
}
.text {
display: block;
margin-top: 75px;
margin-left: -30px;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 17px;
color: #fff !important;
text-transform: uppercase;
white-space: nowrap;
opacity: .25;
animation: pulse 2s linear alternate infinite;
/* margin-left: -60px !important; */
cursor: pointer !important;
/* margin-left: -1058px; */
margin-left: -1338px;
}
#keyframes pulse {
to {
opacity: 1;
}
}
I'm sorry if this doesn't make any sense, I can't wrap my head around this problem either! Please tell me if you need more information and I can provide it.
Thanks!
I noticed 2 things:
Rather than window you may want document.body - I'm sure you'd rather scroll body and not the entire window
Rather than .onscroll you may want .addEventListener - Attaching JavaScript Handlers to Scroll Events — a how-NOT-to
Check out this snippet where I made those changes. I also made sure scrolling within a div wouldn't affect scrolling on document.body
document.body.addEventListener('scroll', function() {
scrollFunction()
})
// When the user scrolls down 50px from the top of the document, resize the header's font size
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("header").style.display = "block";
} else {
document.getElementById("header").style.display = "none";
}
}
* {
box-sizing: border-box;
}
body {
/*Want to change background image?*/
/*Upload a new one to the img folder.*/
/*Make sure you name it 'minecraft.jpg'*/
background: linear-gradient(rgba(20, 26, 35, 0.55), rgba(20, 26, 35, 0.55)),
url("../img/background.jpg") no-repeat center center fixed;
background-size: cover;
font-family: "Open Sans", Helvetica;
margin: 0;
position: relative;
}
#header {
background-color: #f1f1f1; /* Grey background */
padding: 50px 10px; /* Some padding */
color: black;
text-align: center; /* Centered text */
font-size: 90px; /* Big font size */
font-weight: bold;
position: fixed; /* Fixed position - sit on top of the page */
top: 0;
width: 100%; /* Full width */
transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}
html,
body {
width: 100vw;
height: 100vh;
overflow-x: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
scroll-behavior: smooth;
}
a {
text-decoration: none;
/* color: rgb(0, 0, 0); */
}
.a-contact {
text-decoration: underline !important;
color: black;
}
.a-contact:hover {
color: rgb(236, 149, 35);
transition: all 0.3s ease-in;
}
p {
margin: 0;
padding: 3px;
}
.container {
text-align: center;
}
.logo img {
width: 225px;
/* Change image size for mobile */
-webkit-animation-name: logo;
animation-name: logo;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
#-webkit-keyframes logo {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes logo {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.playercount {
display: inline-block;
margin: 20px 15px 0 15px;
padding: 2px 0;
background-color: rgba(15, 199, 209, 0.75);
font-size: 1em;
color: white;
text-align: center;
border-radius: 5px 0 5px 0;
line-height: 27px;
}
.playercount>p>span {
font-weight: bold;
padding: 1px 4px;
border-radius: 3px;
background: rgba(9, 150, 158, 0.7);
margin: 0 2px;
}
.extrapad {
padding: 0;
}
.ip {
cursor: pointer;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-preferred-size: 100px;
flex-basis: 100px;
padding: 18px 0 10px 0;
}
.item img {
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
margin-bottom: 7px;
}
.item img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.img {
width: 80%;
}
.title {
font-weight: bold;
font-size: 17px;
color: white;
}
.subtitle {
color: #cfcfcf;
font-size: 12px;
}
.title,
.subtitle {
margin: 0;
padding: 0;
}
#media(min-width: 400px) {
.logo img {
width: 280px;
/* Change image size for mid sized devices */
}
.playercount {
margin-top: 30px;
padding: 5px;
}
.playercount>p>span {
padding: 2px 7px;
}
}
#media(min-width: 1250px) {
.title {
font-size: 24px;
}
.subtitle {
font-size: 15px;
}
.logo img {
width: 470px;
/* Change image size for desktop */
}
.logo {
margin-bottom: 28px;
}
.img {
width: 100%;
}
.items {
padding: 30px 0 20px 0;
}
.playercount {
font-size: 1.22em;
padding: 10px;
}
.extrapad {
padding: 0 42.5px;
}
.playercount>p>span {
padding: 4px 7px;
}
}
#media(min-width: 1000px) {
.items {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.item:not(:first-child) {
margin-left: 90px;
}
}
.footer {
position: absolute;
color: white;
margin-left: 5px;
top: 98%;
left: 0;
position: fixed;
z-index: 1;
}
.background {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(0deg, rgb(255, 136, 0, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 110%;
height: 50%;
}
.background-white {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(0deg, rgba(255, 255, 255, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 220%;
height: 50%;
}
.background-opposite {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(rgb(255, 136, 0, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 200%;
height: 50%;
}
.background-white-opposite {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(rgba(255, 255, 255, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 310%;
height: 50%;
}
.inner {
background-color: rgba(255, 136, 0, 0.781);
height: 40%;
top: 160%;
width: 100%;
position: absolute;
}
.inner-white {
background-color: rgba(255, 255, 255, 0.781);
height: 40%;
top: 270%;
width: 100%;
position: absolute;
}
/* .inner-text {
text-align: center;
} */
.inner-text-head {
padding-top: 20px;
font-size: 55px;
text-align: center;
}
.inner-text-white-head {
padding-top: 20px;
font-size: 55px;
text-align: center;
}
.inner-text-white-h2 {
font-size: 35px;
text-align: center;
}
.contact-area {
padding: 20px;
border-radius: 5px;
background-color: rgb(255, 255, 255);
border-color: black;
border-style: dashed;
border-width: 5px;
width: 50% !important;
left: 25% !important;
position: relative;
z-index: 2;
}
.inner-text-p {
width: 75%;
left: 13%;
text-align: center;
position: relative;
font-size: 20px;
color: black;
}
.inner-white-text-p {
width: 75%;
left: 13%;
text-align: center;
position: relative;
font-size: 20px;
color: black;
}
.solved {
color: orange !important;
font-weight: bold;
}
.italic {
font-style: italic;
}
/* Scroll Down */
#s-scroll {
position: relative;
width: 24px;
height: 24px;
}
.chevroncontainer {
position: absolute;
/* margin-left: auto;
margin-right: auto; */
top: 30%;
/* right: 50%; */
/* left: 50%; */
/* top: 30%;
left: -30%; */
}
.chevron {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 0.2s ease-out infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
margin-left: -18px;
}
/* .chevroncontainer {
position: absolute;
bottom: 100px !important;
} */
.chevron:first-child {
animation: move 0.2s ease-out 0.2s infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}
.chevron:nth-child(2) {
animation: move 0.2s ease-out 0.2s infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}
/* CHEVRON CHANGED */
.changedchevron {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 2s ease-out infinite;
/* margin-left: -538px; */
margin-left: -678px;
}
.changedchevronNO {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 2s ease-out 1;
margin-left: -18px;
}
/* .changedchevron:first-child {
animation: move 2s ease-out 0.2s infinite;
}
.changedchevron:nth-child(2) {
animation: move 2s ease-out 0.2s infinite;
} */
.changedchevron:before,
.changedchevron:after {
content: ' ';
position: absolute;
top: 0;
height: 40%;
height: 40%;
width: 51%;
background: #fff;
}
.changedchevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.changedchevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
/* CHEVRON CHANGED END */
.chevron:before,
.chevron:after {
content: ' ';
position: absolute;
top: 0;
height: 100%;
height: 40%;
width: 51%;
background: #fff;
}
.chevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.chevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
#keyframes move {
25% {
opacity: 1;
}
33% {
opacity: 1;
transform: translateY(30px);
}
67% {
opacity: 1;
transform: translateY(40px);
}
100% {
opacity: 0;
transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
}
}
.text {
display: block;
margin-top: 75px;
margin-left: -30px;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 17px;
color: #fff !important;
text-transform: uppercase;
white-space: nowrap;
opacity: .25;
animation: pulse 2s linear alternate infinite;
/* margin-left: -60px !important; */
cursor: pointer !important;
/* margin-left: -1058px; */
margin-left: -1338px;
}
#keyframes pulse {
to {
opacity: 1;
}
}
<div style="display: none;" id="header">Header</div>
<div style="width: 100px; height: 500px; overflow: scroll">
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test
</div>

My slide navigation menu does not hide the content that it was sliding over

I tried my best to make sense of the title but for more references, I am giving screenshots below the menu when it slides over the page covering the content the content should be hidden but its not
Before:
https://imgur.com/PTNwfdA
After:
https://imgur.com/B2Iz4IE
Here's the CSS for my navigation:
/* navbar Start*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: fixed;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}
#active:checked~.wrapper {
/*left: 0;*/
right: 0;
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.menu-btn span,
.menu-btn:before,
.menu-btn:after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 30%;
width: 40%;
border-bottom: 3px solid #000000;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-btn:before {
transform: translateY(-8px);
}
.menu-btn:after {
transform: translateY(8px);
}
.close {
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
transition: background .6s;
}
/* closing animation */
#active:checked+.menu-btn span {
transform: scaleX(0);
}
#active:checked+.menu-btn:before {
transform: rotate(45deg);
border-color: #fff;
}
#active:checked+.menu-btn:after {
transform: rotate(-45deg);
border-color: #fff;
}
.wrapper ul {
position: absolute;
top: 60%;
left: 50%;
height: 90%;
transform: translate(-50%, -50%);
list-style: none;
text-align: right;
}
.wrapper ul li {
height: 10%;
margin: 15px 0;
}
.wrapper ul li a {
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
position: absolute;
line-height: 50px;
margin: 5px 30px;
opacity: 0;
transition: all 0.3s ease;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
/*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #4114a1;
}
input[type="checkbox"] {
display: none;
}
.product a img {
display: none;
position: absolute;
left: -400px;
top: -200px;
}
.product a img {
display: none;
}
.product a:hover img {
display: inherit;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
overflow-y: hidden;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#active:checked~.wrapper ul li a {
opacity: 1;
align-items: center;
}
.wrapper ul li a {
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translateX(100px);
font-family: 'LemonMilk';
align-items: center;
}
#active:checked~.wrapper ul li a {
transform: none;
transition-timing-function: ease, cubic-bezier(.1, 1.3, .3, 1);
/* easeOutBackを緩めた感じ */
transition-delay: .6s;
transform: translateX(-100px);
}
.pages-nav--open {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.pages-nav__item {
display: flex;
flex-direction: row;
min-height: 300vh;
}
.pages-nav .pages-nav__item--social {
width: 100%;
opacity: 0;
-webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
transition: transform 1.2s, opacity 1.2s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
.pages-nav--open .pages-nav__item--social {
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.link {
font-size: 0.85em;
font-weight: bold;
position: relative;
letter-spacing: 1px;
text-transform: uppercase;
}
.link:hover,
.link:focus {
color: #fff;
}
.link--page {
display: block;
color: #cecece;
text-align: center;
}
.link--page:not(.link--faded)::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 50%;
height: 2px;
margin: 5px 0 0 -15px;
background: #fff;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
.link--page:hover:before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.link--faded {
color: #4f4f64;
}
.link--faded:hover,
.link--faded:focus {
color: #5c5edc;
}
.link--page.link--faded {
font-size: 0.65em;
}
.link--social {
font-size: 1.5em;
margin: 0 0.75em;
}
.text-hidden {
position: absolute;
display: block;
overflow: hidden;
width: 0;
height: 0;
color: transparent;
}
#media screen and (max-width: 40em) {
.js .pages-nav {
display: block;
padding: 10px 20px 0 20px;
text-align: left;
}
.pages-nav__item {
width: 100%;
}
.pages-nav__item--small {
display: inline-block;
width: auto;
margin-right: 5px;
}
.pages-nav__item--social {
font-size: 0.9em;
}
.menu-button {
top: 15px;
right: 10px;
left: auto;
}
.info {
font-size: 0.85em;
}
.poster {
margin: 1em;
}
}
/* ///////////////////// navbar end ///////////////////////// */
and here's my css for the page this is on:
.typewritter {
height: 80vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 28%;
animation: typing 4s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
body {
margin: 0px;
}
#container {
/* Center the text in the viewport. */
position: absolute;
display: flex;
margin: auto;
width: 100vw;
height: 80pt;
top: 0;
bottom: 0;
/* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
filter: url(#threshold) blur(0.6px);
}
/* Your average text styling */
#text1, #text2 {
position: absolute;
width: 100%;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 80pt;
text-align: center;
user-select: none;
}
If any more info is needed I'll be happy to provide it!
all you need to do is just set a greater z-index to .wrapper also u need to give a z-index to .menu-btn else it would be below the wrapper
this should be your code
.menu-btn{
position: absolute;
z-index: 12;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.wrapper{
position: fixed;
z-index: 10;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}

creating scroll animation with css

I am trying to create a header menu when I scroll down it to get involved with animation into a circle and when it scrolled up it will be come back again . I checked the window is top if not then animate with javascript . But my code is not working .
$header = $('.header__fake');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 20) {
$header.addClass('animated').removeClass('fix');
} else {
$header.removeClass('animated').addClass('fix');
}
});
body {
background: #02021a url("http://i.imgur.com/705GHlC.jpg") no-repeat 0 0;
-webkit-background-size: 100% auto;
background-size: 100% auto;
color: #fff;
font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
font-weight:lighter;
letter-spacing:1px;
}
.content {
width: 320px;
position: relative;
margin: 0 auto;
}
.content h2 {
margin: 35px 0 0;
}
.content h1 {
text-align: center;
margin: 1000px 0 200px;
}
.content h1 span {
display: block;
width: 100%;
margin: 5px 0 0;
opacity: .5;
}
.content .header__fake {
position: fixed;
top: 15px;
left: 50%;
margin-left: -160px;
width: 320px;
}
.content .header__fake i {
display: block;
}
.content .header__fake .btm__border {
height: 1px;
background: #fff;
position: absolute;
bottom: 6px;
left: 0;
right: 0;
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
.content .header__fake .icn__wrap {
cursor: pointer;
float: right;
width: 58px;
position: relative;
height: 58px;
margin-right: -20px;
}
.content .header__fake .icn__wrap .icn__hamburger {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-6px);
-ms-transform: translateX(-50%) translateY(-6px);
transform: translateX(-50%) translateY(-6px);
display: block;
width: 18px;
height: 1px;
z-index: 999;
background: #fff;
}
.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
content: "";
float: left;
display: block;
width: 100%;
height: 1px;
background: #fff;
margin: 5px 0 0;
}
.content .header__fake .icn__wrap .icn__hamburger:before {
margin: 6px 0 0;
}
.content .header__fake .icn__wrap svg {
z-index: 10;
}
.content .header__fake .icn__wrap svg circle {
fill: none;
stroke: #fff;
stroke-width: .5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 39 39;
stroke-dashoffset: -39;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.animated .btm__border {
left: 100%;
right: 4px;
}
.content .header__fake.animated svg circle {
stroke-dashoffset: 0;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.fix .btm__border {
-webkit-animation: fix 0.2s linear;
animation: fix 0.2s linear;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
right: 5px;
}
#-webkit-keyframes fix {
from {
right: 5px;
}
to {
right: 0px;
}
}
#keyframes fix {
from {
right: 5px;
}
to {
right: 0px;
}
}
<div class="content">
<h2>Scroll to see the magic.</h2>
<div class="header__fake">
<div class="icn__wrap">
<i class="icn__hamburger"></i>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
<circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
</svg>
</div>
<i class="btm__border"></i>
</div>
<h1>Hmm<span>Now scroll back up.</span></h1>
</div>
I pasted above code in JSfiddle. It works perfectly. See it here
The problem could be with your jQuery lib initialization.

Categories

Resources