jQuery timed animation on click - javascript

I'm trying to get the checkmark loading animation to happen only when the .closest() .yay button is clicked. I found the animation but can't work it into my function where it only runs on click and for more than one instance.
https://codepen.io/moofawsaw/pen/Qrxbxj
(function() {
$(document).ready(function() {
return $(".delete-confirm").each(function() {
var $this;
$this = $(this);
$("button.delete", $this).click(function() {
$(this).toggleClass("confirm");
});
return $("button.yay, button.nay", $this).click(function() {
return $("button.delete", $this).removeClass("confirm");
});
});
});
}.call(this));
$(".yay").click(function() {
ele = this;
setTimeout(function() {
$(ele)
.closest(".post")
.remove();
}, 1500);
});
const yay = document.querySelector(".yay");
const submit = document.querySelector(".submit");
function toggleClass() {
this.classList.toggle("active");
}
function addClass() {
this.classList.add("finished");
}
yay.addEventListener("click", toggleClass);
yay.addEventListener("transitionend", toggleClass);
body {
display: flex;
}
.post {
border: 2px solid;
margin: 15%;
}
.delete-confirm {
border: 2px solid;
position: relative;
display: inline-block;
}
.delete-confirm button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
height: 25px;
width: 25px;
min-width: 25px;
text-align: center;
cursor: pointer;
background-color: #e90000;
color: white;
border: none;
border-radius: 50%;
}
.delete-confirm button.delete {
z-index: 3;
transition: all 0.2s ease 0.1s;
}
.delete-confirm button.delete.confirm {
background-color: transparent;
color: #262a2c;
transition: all 0.2s ease 0.2s;
z-index: 0;
}
.delete-confirm button.delete.confirm~button.yay,
.delete-confirm button.delete.confirm~button.nay {
visibility: visible;
color: white;
transition: all 0.25s ease, visibility 0, background-color 0.3s ease 0.2s;
}
.delete-confirm button.delete.confirm~button.yay {
-webkit-transform: translate(0, -250%);
transform: translate(0, -250%);
background-color: #6fbd1b;
}
.delete-confirm button.delete.confirm~button.nay {
-webkit-transform: translate(0, -130%);
transform: translate(0, -130%);
background-color: #e90000;
}
.delete-confirm button.yay,
.delete-confirm button.nay {
position: absolute;
top: 0;
color: #262a2c;
visibility: hidden;
z-index: 1;
transition: all 0.5s ease, visibility 0.5s, background-color 0.3s ease;
}
.delete-confirm button.yay:focus {
transition-delay: 2s;
}
.delete-confirm button.yay {
left: 0;
}
.delete-confirm button.nay {
right: 0;
}
.delete-confirm button:focus {
outline: none;
}
.yay:before {
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 0%;
height: 100%;
}
.yay span {
position: absolute;
line-height: 0;
}
.yay span i {
transform-origin: center center;
}
.yay span:nth-of-type(1) {
top: 50%;
transform: translateY(-50%);
}
.yay span:nth-of-type(2) {
top: 100%;
transform: translateY(0%);
}
.active:before {
width: 100%;
transition: width 500ms linear;
}
.active span:nth-of-type(1) {
top: -100%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) {
top: 50%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) i {
animation: loading 500ms linear infinite;
}
#keyframes loading {
100% {
transform: rotate(360deg);
}
}
#keyframes scale {
0% {
transform: scale(10);
}
50% {
transform: scale(0.2);
}
70% {
transform: scale(1.2);
}
90% {
transform: scale(0.7);
}
100% {
transform: scale(1);
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">Post1
<div class='delete-confirm'>
<button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
<button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
<button class='nay'>
<i class='fa fa-close'></i>
</button>
</div>
</div>
<div class="post">Post2
<div class='delete-confirm'>
<button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
<button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
<button class='nay'>
<i class='fa fa-close'></i>
</button>
</div>
</div>


This is because document.querySelector returns only one element.
You could use document.querySelectorAll but I'm not sure how to bind events then.
Simple solution is to use jQuery since you're using it anyway.
...
const yay = $(".yay");
yay.on("click", toggleClass);
yay.on("transitionend", toggleClass);
(function() {
$(document).ready(function() {
return $(".delete-confirm").each(function() {
var $this;
$this = $(this);
$("button.delete", $this).click(function() {
$(this).toggleClass("confirm");
});
return $("button.yay, button.nay", $this).click(function() {
return $("button.delete", $this).removeClass("confirm");
});
});
});
}.call(this));
$(".yay").click(function() {
ele = this;
setTimeout(function() {
$(ele)
.closest(".post")
.remove();
}, 1500);
});
const yay = $(".yay");
const submit = document.querySelector(".submit");
function toggleClass() {
this.classList.toggle("active");
}
function addClass() {
this.classList.add("finished");
}
yay.on("click", toggleClass);
yay.on("transitionend", toggleClass);
body {
display: flex;
}
.post {
border: 2px solid;
margin: 15%;
}
.delete-confirm {
border: 2px solid;
position: relative;
display: inline-block;
}
.delete-confirm button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
height: 25px;
width: 25px;
min-width: 25px;
text-align: center;
cursor: pointer;
background-color: #e90000;
color: white;
border: none;
border-radius: 50%;
}
.delete-confirm button.delete {
z-index: 3;
transition: all 0.2s ease 0.1s;
}
.delete-confirm button.delete.confirm {
background-color: transparent;
color: #262a2c;
transition: all 0.2s ease 0.2s;
z-index: 0;
}
.delete-confirm button.delete.confirm~button.yay,
.delete-confirm button.delete.confirm~button.nay {
visibility: visible;
color: white;
transition: all 0.25s ease, visibility 0, background-color 0.3s ease 0.2s;
}
.delete-confirm button.delete.confirm~button.yay {
-webkit-transform: translate(0, -250%);
transform: translate(0, -250%);
background-color: #6fbd1b;
}
.delete-confirm button.delete.confirm~button.nay {
-webkit-transform: translate(0, -130%);
transform: translate(0, -130%);
background-color: #e90000;
}
.delete-confirm button.yay,
.delete-confirm button.nay {
position: absolute;
top: 0;
color: #262a2c;
visibility: hidden;
z-index: 1;
transition: all 0.5s ease, visibility 0.5s, background-color 0.3s ease;
}
.delete-confirm button.yay:focus {
transition-delay: 2s;
}
.delete-confirm button.yay {
left: 0;
}
.delete-confirm button.nay {
right: 0;
}
.delete-confirm button:focus {
outline: none;
}
.yay:before {
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 0%;
height: 100%;
}
.yay span {
position: absolute;
line-height: 0;
}
.yay span i {
transform-origin: center center;
}
.yay span:nth-of-type(1) {
top: 50%;
transform: translateY(-50%);
}
.yay span:nth-of-type(2) {
top: 100%;
transform: translateY(0%);
}
.active:before {
width: 100%;
transition: width 500ms linear;
}
.active span:nth-of-type(1) {
top: -100%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) {
top: 50%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) i {
animation: loading 500ms linear infinite;
}
#keyframes loading {
100% {
transform: rotate(360deg);
}
}
#keyframes scale {
0% {
transform: scale(10);
}
50% {
transform: scale(0.2);
}
70% {
transform: scale(1.2);
}
90% {
transform: scale(0.7);
}
100% {
transform: scale(1);
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">Post1
<div class='delete-confirm'>
<button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
<button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
<button class='nay'>
<i class='fa fa-close'></i>
</button>
</div>
</div>
<div class="post">Post2
<div class='delete-confirm'>
<button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
<button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
<button class='nay'>
<i class='fa fa-close'></i>
</button>
</div>
</div>

Related

Responsive Navbar: Menu Not Disappearing (CSS and JS)

Building a responsive menu bar. The problem is when you click the hamburger lines and the page options appear, when you click the links, the menu doesn't disappear. I've tried adding and removing a class disappear{display:none}, and I've also tried building a for loop but neither works. I know I'm way overthinking this, what options should I explore to fix it?
(Note that you may have to shrink your screen down to less than 600px in width to see the hamburger menu if it isn't currently available to click)
lkl;
const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
document.getElementsByClassName('.links').forEach(item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
})
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>

the problem was using getElementsByClassName like this document.getElementsByClassName('.links').forEach you can not use forEach and .linke css selector with getElementsByClassName use querySelectorAll
const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
document.querySelectorAll('.links').forEach(item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
})
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>

when using getElementsByClassName you shouldn't use . while specifying the class.
getElementsByClassName returns HTMLCollection that doesn't have forEach loop, so you need to convert it into array as:
const linksArray = [...links];
or
const linksArray = Array.from( links );
You can also use querySelectorAll(".links")
const toggleBtn = document.getElementById("nav_check");
const menuBtn = document.getElementById("nav_icon");
toggleBtn.addEventListener("click", function() {
if (!menuBtn.classList.contains("open")) {
menuBtn.classList.add("open");
} else {
menuBtn.classList.remove("open");
}
});
const links = document.getElementsByClassName("links");
const linksArray = [...links];
linksArray.forEach((item) => {
item.addEventListener("click", (event) => {
document.getElementById("nav_check").checked = false;
menuBtn.classList.remove("open");
});
});
* {
box-sizing: border-box;
}
body {
margin: 0px;
background: #d3d3d3;
}
.navBar {
width: 100%;
height: 3.3rem;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #0A2463;
position: fixed;
color: #fafafa;
}
.nav_btn {
display: none;
}
.nav_links>a {
padding: .5rem;
margin: auto;
text-decoration: none;
color: #fafafa;
}
.nav_links>a:hover {
color: #ED1250;
}
#nav_check,
#nav_icon {
display: none;
}
.resume {
color: #ED1250;
border-radius: 4px;
border: solid #ED1250 1px;
padding: .5rem;
margin-right: .5rem;
}
.resume:hover {
background: rgb(237, 18, 80, .2);
color: #fafafa;
}
.social {
display: none;
}
#media (max-width:600px) {
.navBar {
height: 3.3rem;
}
.nav_btn {
display: inline-block;
float: right;
}
#nav_icon {
display: block;
width: 60px;
height: 45px;
position: fixed;
right: 1rem;
top: -3rem;
margin: 50px auto;
z-index: 6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border: solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),
#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-weight: 400;
line-height: 4.5rem;
font-size: 3rem;
background: #0A2463;
}
.menu_textWrapper {
display: flex;
flex-direction: column !important;
width: 18rem;
background: #0A2463;
}
.links:hover::after {
content: "»";
font-size: 2.5rem;
}
#nav_check:not(:checked)~menu {
display: none;
}
.navBar>#nav_check:checked~.menu {
display: flex;
flex-direction: column;
}
}
/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>

const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
[].forEach.call( document.getElementsByClassName('links'), item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
});
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>
please use:
[].forEach.call( document.querySelectorAll('a'), function(el) {
// whatever with the current node
});

How to do animation close as same as open

while click on (?), have opened options with animation effect. Animation is working fine. Want to close the options same as open animation which is options bubble effect, but close animation effect is not same like as open animation. Need closing animation is also same as bubble effect.
Can anyone help me to find the mistake what i did. Thanks.
jQuery(document).ready(function() {
var $body = jQuery('body');
var $cs_fixed_wrapper = jQuery('.cs_fixed_wrapper');
// customer service icon click - ex. (?) click
jQuery('img.cs_trigger_icon').on('click', function(ev) {
ev.stopPropagation();
if(jQuery('.cs_options').hasClass('slide_open')) {
jQuery('.cs_options').removeClass('slide_open').addClass('slide_close');
}
else {
jQuery('.cs_options').removeClass('slide_close').addClass('slide_open');
}
});
var clickEvent = {};
// cs options - trigger functionalities
$body.on('click', '.cs_action_trigger', function(ev) {
ev.stopPropagation();
var window_width = jQuery(window).width();
var data_type = jQuery(this).data('type');
if(window_width < 800) {
if(!clickEvent[data_type]) {
clickEvent = {};
clickEvent[data_type] = 1;
if(data_type == 'contact') {
jQuery('.cs_contact').addClass('cs_contact_opened');
}
else if(data_type == 'supportarticle') {
jQuery('.cs_supportarticle').addClass("cs_supportarticle_opened");
return false;
}
else if(data-type == 'cs_faq') {
jQuery('.cs_faq').addClass("cs_faq_opened");
}
} else if (clickEvent[data_type]) {
clickEvent = {};
clickEvent[data_type] = 1;
if(data_type == 'contact') {
jQuery('.cs_contact_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.close').fadeOut('200');
clickEvent = {};
}
else if(data_type == 'tutorial') {
jQuery('.cs_tutorial_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.close').fadeOut('200');
clickEvent = {};
}
else if(data_type == 'supportarticle') {
clickEvent = {};
}
else if(data_type == 'cs_faq') {
jQuery('.cs_faq_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.close').fadeOut('200');
clickEvent = {};
}
}
} else {
if(data_type == 'contact') {
jQuery('.cs_contact_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.cs_contact_modal .close_btn').fadeIn();
}
else if(data_type == 'supportarticle') {
// console.log(data_type);
}
else if(data_type == 'cs_faq') {
jQuery('.cs_faq_modal').addClass('opened');
$body.addClass('cs_popup_opened');
jQuery('.cs_faq_modal .close_btn').fadeIn();
}
}
});
// customer service - contact form popup outside close for desktop
jQuery('.cs_contact_modal').on('click', function(ev) {
jQuery(this).removeClass('opened');
$body.removeClass('cs_popup_opened');
// show close icon on multiple popups
show_close_icon();
// body scroll based on condition
body_scroll_for_custom_pages();
contact_form_cf7_empty();
});
jQuery('.cs_contact_modal .modal_profile_wrapper').on('click', function(ev) {
ev.stopPropagation();
});
// customer service - contact form popup close for desktop
jQuery('.cs_contact_modal_close').on('click', function(ev) {
jQuery('.cs_contact_modal').removeClass('opened');
$body.removeClass('cs_popup_opened');
// show close icon on multiple popups
show_close_icon();
// body scroll based on condition
body_scroll_for_custom_pages();
jQuery('.cs_contact').removeClass('cs_contact_opened');
contact_form_cf7_empty();
});
// outside click to close the customer service slide options
jQuery('body').on('click', function() {
jQuery('.cs_options').removeClass('slide_open').addClass('slide_close');
});
});
* {
margin: 0;
padding: 0px;
box-sizing: border-box;
}
body{
background-color: #f7f7f7;
}
.cs_fixed_wrapper {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99999999;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
visibility: visible;
opacity: 1;
}
.cs_inner_wrapper {
position: relative;
display: flex;
flex-flow: column-reverse;
align-items: flex-end;
}
.cs_action_trigger.cs_contact_opened {
width: 144px;
transition: width 0.5s;
}
.slide_open .cs_action_trigger.cs_contact_opened {
transition: all 0.5s;
}
.slide_open .cs_action_trigger.cs_contact_closed {
transition: all 0.5s;
}
.cs_supportarticle {
margin-bottom: 0px;
border-radius: 30px;
}
.cs_action_trigger.cs_supportarticle_opened {
width: 188px;
transition: width 0.5s;
}
.slide_open .cs_action_trigger.cs_supportarticle_opened,
.slide_open .cs_action_trigger.cs_supportarticle_closed {
transition: all 0.5s;
}
.cs_faq {
margin-top: 0px;
}
.slide_open .cs_action_trigger.cs_faq_opened {
width: 102px;
transition: width 0.5s;
}
.slide_open .cs_action_trigger.cs_faq_opened,
.slide_open .cs_action_trigger.cs_faq_closed {
transition: all 0.5s;
}
.cs_support_wrapper > img {
position: absolute;
bottom: 0px;
right: 0px;
cursor: pointer;
}
.cs_options {
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
position: relative;
bottom: 50px;
opacity: 0;
transition: all .7s;
}
.cs_options.slide_open {
opacity: 1;
transition: transform .2s;
}
.cs_options.slide_close {
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: transform 0.4s, visibility .4s, opacity .6s;
}
.cs_contact_icon img,
.cs_supportarticle_icon img,
.cs_faq img {
display: inline-block;
position: relative;
transition: all 0.3s ease-in-out;
}
.cs_supportarticle_opened .cs_supportarticle_icon img {
left: -59px;
}
.cs_contact_opened .cs_contact_icon img {
left: -40px;
}
.cs_faq_opened .cs_faq_icon img {
left: -18px;
}
.slide_open .cs_action_trigger .circle {
animation: bubble .7s 0.5;
}
.slide_close .cs_action_trigger .circle {
transition: all 1s;
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 30px;
}
.cs_faq .circle {
background: #ff422d;
}
.cs_supportarticle .circle {
background: #00b44a;
}
.cs_contact .circle {
background: #00387c;
}
.cs_action_trigger {
display: block;
padding: 10px;
width: 50px;
height: 50px;
line-height: normal;
font-size: 0;
border-radius: 100%;
margin: 0 0 10px 0;
transform: scale(.5);
transition: transform .5s, top 0.4s;
position: relative;
pointer-events: none;
cursor: pointer;
white-space: nowrap;
}
.cs_action_trigger:nth-child(1) {
top: 60px;
}
.cs_action_trigger:nth-child(2) {
top: 120px;
}
.cs_action_trigger:nth-child(3) {
top: 180px;
}
.slide_open .cs_action_trigger {
transform: scale(1);
top: 0px;
transition: transform .5s, top .3s;
pointer-events: all;
}
.cs_action_trigger img {
width: 28px;
position: relative;
transition: left 0.3s;
}
.cs_contact img {
top: 6px;
left: 0px;
}
.cs_supportarticle img {
top: 7px;
left: 0px;
}
.cs_faq img {
top: 4px;
left: 0px;
}
#keyframes bubble{
0% {transform: scale(0,0) translateY(0); }
10% { transform: scale(0.5,0.5) translateY(0); }
30% { transform: scale(1.1,1.1) translateY(-20px); }
50% { transform: scale(1.05,1.05) translateY(0); }
57% { transform: scale(1,1) translateY(-7px); }
64% { transform: scale(1,1) translateY(0); }
100% { transform: scale(1,1) translateY(0); }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cs_fixed_wrapper">
<div class="cs_inner_wrapper">
<div class="cs_support_wrapper">
<div class="cs_options slide_close">
<div class="cs_contact cs_action_trigger" data-link="cs_contact_popup" data-type='contact'>
<span class="circle"></span>
<img src="https://i.stack.imgur.com/WusFO.png" alt="C"/>
<span class="cs_content cs_link_content">Contact Us</span>
</div>
<div class="cs_supportarticle cs_action_trigger" data-type='supportarticle'>
<a href="">
<span class="circle"></span>
<img src="https://i.stack.imgur.com/UzkHq.png" alt="S"/>
<span class="cs_content cs_link_content">Support Articles</span>
</a>
</div>
<div class="cs_faq cs_action_trigger" data-link="cs_faq_popup" data-type='cs_faq'>
<span class="circle"></span>
<img src="https://i.stack.imgur.com/VEzHb.png" alt="F"/>
<span class="cs_content cs_link_content">FAQ</span>
</div>
</div>
<img class="cs_trigger_icon" src="https://i.stack.imgur.com/sNQUZ.png" alt="C"/>
</div>
</div>
</div>

Create another set of keyframes say 'unbubble' and do the exact opposite transitions.
#keyframes unbubble{
0% {transform: scale(1,1) translateY(-10px); }
30% { transform: scale(1.1,1.1) translateY(-15px); }
50% { transform: scale(1.05,1.05) translateY(-15px); }
57% { transform: scale(1,1) translateY(-10px); }
64% { transform: scale(0.5,0.5) translateY(0); }
100% { transform: scale(0,0) translateY(0); }
}
and apply this animation in slide_close
.slide_close .cs_action_trigger {
animation: unbubble .7s 0.5;
}
let me know if this works

How to get text to animate to look as if it is going under another layer

For a comparable example, view this site. If you look on the left side, you will see rotated text that loops through different lines of text. This is what I am trying to accomplish. The text in this example starts by the white line and then once it starts moving up, it looks as if it goes under a layer to make it seem like it is going out of place.
How could I modify my code to handle this?
Right now the white line and the text do not appear in line and I cannot figure out how I can make it look like the text is moving under another layer.
var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;
var next_i = 1;
var loop = function() {
arr.removeClass('curr');
arr.removeClass('next');
$('span[data-index = ' + i + ']').addClass('curr');
$('span[data-index = ' + next_i + ']').addClass('next');
i = (i + 1) % arrLen;
next_i = (next_i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
#container {
background: blue;
width: 100%;
height: 100vh;
}
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #fff;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
overflow: hidden;
}
.digitalAgency,
.agencyText {
-webkit-animation-duration: .45s;
animation-duration: .45s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.agencyText {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
color: #FFF;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
}
.digitalAgency .textContainer .agencyText.curr {
visibility: visible;
}
.digitalAgency .agencyText.curr {
visibility: visible;
-webkit-animation-name: dgAgnCurr;
animation-name: dgAgnCurr
}
.digitalAgency .agencyText.next {
visibility: hidden;
-webkit-animation-name: dgAgnNext;
animation-name: dgAgnNext
}
#-webkit-keyframes dgAgnCurr {
from {
-webkit-transform: translateY(0);
transform: translateY(0)
}
to {
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
}
#keyframes dgAgnCurr {
from {
-webkit-transform: translateY(0);
transform: translateY(0)
}
to {
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
}
#-webkit-keyframes dgAgnNext {
from {
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
#keyframes dgAgnNext {
from {
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">Text for A</span>
<span data-index="1" class="agencyText">Text for B</span>
<span data-index="2" class="agencyText">Text for C</span>
<span data-index="3" class="agencyText">Text for D</span>
</span>
</div>
</div>

Get rid of the CSS animations and use a simple transition. No need to overcomplicate things. You're simply going from translate -100% to 0% to 100% so you don't really need animation keyframes.
var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;
var next_i = 1;
var loop = function() {
arr.removeClass('curr');
arr.removeClass('next');
$('span[data-index = ' + i + ']').addClass('curr');
$('span[data-index = ' + next_i + ']').addClass('next');
i = (i + 1) % arrLen;
next_i = (next_i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
#container {
background: blue;
width: 100%;
height: 100vh;
}
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #fff;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
overflow: hidden;
}
.digitalAgency,
.agencyText {
transition:.45s ease-in-out; /* added this */
}
.agencyText {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
color: #FFF;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
transform: translateY(-100%); /* added this */
}
.digitalAgency .agencyText.curr {
visibility: visible;
transform: translateY(0%); /* added this */
}
.digitalAgency .agencyText.next {
visibility: hidden;
transform: translateY(100%); /* added this */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">Text for A</span>
<span data-index="1" class="agencyText">Text for B</span>
<span data-index="2" class="agencyText">Text for C</span>
<span data-index="3" class="agencyText">Text for D</span>
</span>
</div>
</div>

How to change animation position in Off-Canvas Menu Effects

I'm working with OffCanvasMenuEffects and i'm using wave menu effect. You can see this menu in following:
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
}
/* Menu Button */
.menu-button {
position: fixed;
bottom: 0;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 16px;
height: 16px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 16px;
border: none;
z-index: 1001;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: #888;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
bottom: 0;
left: 0;
z-index: 1001;
width: 100%;
height: 160px;
font-size: 1.15em;
-webkit-transform: translate3d(0,160px,0);
transform: translate3d(0,160px,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.menu {
position: absolute;
width: 100%;
z-index: 1000;
text-align: center;
top: 50%;
padding: 0 1.5em;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
.icon-list a,
.close-button {
opacity: 0;
-webkit-transform: translate3d(0,200px,0);
transform: translate3d(0,200px,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
}
.icon-list a {
display: inline-block;
padding: 0.8em;
}
.icon-list a i {
vertical-align: middle;
}
.icon-list a span {
display: inline-block;
margin-left: 10px;
font-size: 0.75em;
vertical-align: middle;
font-weight: 700;
letter-spacing: 1px;
}
/* Morph Shape */
.morph-shape {
position: absolute;
width: 100%;
width: calc(100% + 400px);
height: 100%;
top: 0;
left: 0;
fill: #373a47;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transform: translate3d(-400px,0,0);
transform: translate3d(-400px,0,0);
}
/* Shown menu */
.show-menu .menu-wrap,
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .morph-shape,
.show-menu .content::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .menu-wrap,
.show-menu .content::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .content::before {
opacity: 1;
}
.show-menu .icon-list a:nth-child(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.show-menu .icon-list a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.show-menu .icon-list a:nth-child(4) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.show-menu .icon-list a:nth-child(5) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.show-menu .icon-list a:nth-child(6) {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.show-menu .close-button {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.show-menu .content::before {
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/snap.svg-min.js"></script>
<div class="menu-wrap">
<nav class="menu">
<div class="icon-list">
<i class="fa fa-fw fa-star-o"></i><span>Favorites</span>
<i class="fa fa-fw fa-bell-o"></i><span>Alerts</span>
<i class="fa fa-fw fa-envelope-o"></i><span>Messages</span>
<i class="fa fa-fw fa-comment-o"></i><span>Comments</span>
<i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span>
<i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span>
</div>
</nav>
<button class="close-button" id="close-button">Close Menu</button>
<div class="morph-shape" id="morph-shape" data-morph-open="M0,100h1000V0c0,0-136.938,0-224,0C583,0,610.924,0,498,0C387,0,395,0,249,0C118,0,0,0,0,0V100z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path d="M0,100h1000l0,0c0,0-136.938,0-224,0c-193,0-170.235-1.256-278-35C399,34,395,0,249,0C118,0,0,100,0,100L0,100z"/>
</svg>
</div>
</div>
<button class="menu-button" id="open-button">Open Menu</button>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/classie.js"></script>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/main3.js"></script>
Currently the Menu opens from bottom to top.
My question is how is it possible to change the position of how the off canvas menu loads, default is bottom to top with wave effect convert to top to bottom, like this website: https://afriendofmine.nl
How can this be achieved?
I was tried to edit the menu but the result not good! I edit .menu-wrap class. I replace bottom: 0; with top: 0; as following:
.menu-wrap {
position: absolute;
top: 0; //edited
left: 0;
z-index: 1001;
width: 100%;
height: 160px;
font-size: 1.15em;
-webkit-transform: translate3d(0,160px,0);
transform: translate3d(0,160px,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
After all, how can I make the menu to opens from top to bottom? like this website: https://afriendofmine.nl
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
}
/* Menu Button */
.menu-button {
position: fixed;
bottom: 0;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 16px;
height: 16px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 16px;
border: none;
z-index: 1001;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: #888;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
top: 0; //edited
left: 0;
z-index: 1001;
width: 100%;
height: 160px;
font-size: 1.15em;
-webkit-transform: translate3d(0,160px,0);
transform: translate3d(0,160px,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.menu {
position: absolute;
width: 100%;
z-index: 1000;
text-align: center;
top: 50%;
padding: 0 1.5em;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
.icon-list a,
.close-button {
opacity: 0;
-webkit-transform: translate3d(0,200px,0);
transform: translate3d(0,200px,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
}
.icon-list a {
display: inline-block;
padding: 0.8em;
}
.icon-list a i {
vertical-align: middle;
}
.icon-list a span {
display: inline-block;
margin-left: 10px;
font-size: 0.75em;
vertical-align: middle;
font-weight: 700;
letter-spacing: 1px;
}
/* Morph Shape */
.morph-shape {
position: absolute;
width: 100%;
width: calc(100% + 400px);
height: 100%;
top: 0;
left: 0;
fill: #373a47;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transform: translate3d(-400px,0,0);
transform: translate3d(-400px,0,0);
}
/* Shown menu */
.show-menu .menu-wrap,
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .morph-shape,
.show-menu .content::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .menu-wrap,
.show-menu .content::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .content::before {
opacity: 1;
}
.show-menu .icon-list a:nth-child(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.show-menu .icon-list a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.show-menu .icon-list a:nth-child(4) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.show-menu .icon-list a:nth-child(5) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.show-menu .icon-list a:nth-child(6) {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.show-menu .close-button {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.show-menu .content::before {
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/snap.svg-min.js"></script>
<div class="menu-wrap">
<nav class="menu">
<div class="icon-list">
<i class="fa fa-fw fa-star-o"></i><span>Favorites</span>
<i class="fa fa-fw fa-bell-o"></i><span>Alerts</span>
<i class="fa fa-fw fa-envelope-o"></i><span>Messages</span>
<i class="fa fa-fw fa-comment-o"></i><span>Comments</span>
<i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span>
<i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span>
</div>
</nav>
<button class="close-button" id="close-button">Close Menu</button>
<div class="morph-shape" id="morph-shape" data-morph-open="M0,100h1000V0c0,0-136.938,0-224,0C583,0,610.924,0,498,0C387,0,395,0,249,0C118,0,0,0,0,0V100z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path d="M0,100h1000l0,0c0,0-136.938,0-224,0c-193,0-170.235-1.256-278-35C399,34,395,0,249,0C118,0,0,100,0,100L0,100z"/>
</svg>
</div>
</div>
<button class="menu-button" id="open-button">Open Menu</button>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/classie.js"></script>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/main3.js"></script>

This is what you need?
.morph-shape>svg {
transform:rotate3d(1, 0, 0, 180deg);
}
https://jsfiddle.net/g4pmr6ez/1/

How to achieve smoothe slide down effect in Navbar Menu

Objective - I wanted to achieve a slide down (for navbar) effect after some scrolling. I actually achieved what I wanted, but I am getting a problem.
Problem - When scrolling up to the top, the navbar is getting sticky with no effect and it is kind of takes the charm. Can anyone help me to fix this?
You can see my code here at Codepen.
// Sticky Header
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#header').addClass('sticky-header');
$('#header .mo-row').removeClass('sticky-border');
} else {
$('#header').removeClass('sticky-header');
$('#header .mo-row').addClass('sticky-border');
}
});
var sidebarBox = document.querySelector('#box');
var sidebarBtn = document.querySelector('#btn');
var pageWrapper = document.querySelector('#main-content');
sidebarBtn.addEventListener('click', function(event) {
if (this.classList.contains('active')) {
this.classList.remove('active');
sidebarBox.classList.remove('active');
} else {
this.classList.add('active');
sidebarBox.classList.add('active');
}
});
// accordion js
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active2');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active2')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active2');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
html {
box-sizing: border-box;
}
body {
margin: 0;
height: 1000px;
-webkit-font-smoothing: antialiased;
font-family: 'Lato', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: middle;
}
a {
text-decoration: none;
}
.mo-container {
width: 100%;
max-width: 1250px;
margin: 0 auto;
z-index: 999;
position: relative;
}
.mo-row {
width: 95%;
margin: 0 auto;
}
.mo-grid:before,
.mo-grid:after,
.mo-row:before,
.mo-row:after {
content: " ";
display: table;
}
.mo-grid:after,
.mo-row:after {
clear: both;
}
[class*='col-'] {
width: 100%;
float: left;
min-height: 1px;
}
.col {
margin: 10px;
}
#media screen and (min-width: 320px) {
.col-sm-1 {
width: 8.33333%;
}
.col-sm-2 {
width: 16.66667%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33333%;
}
.col-sm-5 {
width: 41.66667%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33333%;
}
.col-sm-8 {
width: 66.66667%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33333%;
}
.col-sm-11 {
width: 91.66667%;
}
.col-sm-12 {
width: 100%;
}
}
#media screen and (min-width: 768px) {
.col-md-1 {
width: 8.33333%;
}
.col-md-2 {
width: 16.66667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333%;
}
.col-md-5 {
width: 41.66667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333%;
}
.col-md-8 {
width: 66.66667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333%;
}
.col-md-11 {
width: 91.66667%;
}
.col-md-12 {
width: 100%;
}
}
#media screen and (min-width: 992px) {
.col-lg-1 {
width: 8.33333%;
}
.col-lg-2 {
width: 16.66667%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33333%;
}
.col-lg-5 {
width: 41.66667%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33333%;
}
.col-lg-8 {
width: 66.66667%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33333%;
}
.col-lg-11 {
width: 91.66667%;
}
.col-lg-12 {
width: 100%;
}
}
.hello-bar {
height: 40px;
line-height: 39px;
background: #52ae56;
text-align: center;
color: #fff;
}
.hello-bar a {
color: #fff;
text-transform: uppercase;
font-size: 12px;
}
.hello-bar a span {
font-weight: bold;
}
.sticky-header {
background-color: #fff !important;
box-shadow: 0 2px 4px 0 rgba(87, 71, 81, 0.2);
height: 65px;
line-height: 65px;
position: fixed !important;
top: 0;
-webkit-animation-name: slidedown;
animation-name: slidedown;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#-webkit-keyframes slidedown {
0% {
opacity: 0;
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes slidedown {
0% {
-webkit-transform: translateY(-400px);
-ms-transform: translateY(-400px);
transform: translateY(-400px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.sticky-border {
border-bottom: 1px solid #e8e8e8;
}
#header-sec {
position: relative;
z-index: 9999999;
height: 65px;
line-height: 65px;
/* Fold Out */
/* accordion css */
}
#header-sec #header {
background-color: transparent;
width: 100%;
height: 66px;
line-height: 64px;
position: absolute;
}
#header-sec #header .navbar-logo {
height: 65px;
line-height: 65px;
cursor: pointer;
}
#header-sec #header .navbar-logo img {
height: 75px;
margin-top: -4px;
margin-left: -17px;
}
#header-sec .nav ul {
background-color: transparent;
}
#header-sec .nav ul > li {
display: inline-block;
position: relative;
}
#header-sec .nav a {
display: block;
padding: 10px 18px 10px 15px;
font-size: 0.9em;
line-height: 1.2em;
color: #0d1739;
font-weight: 400;
}
#header-sec .nav a:hover {
text-decoration: none;
}
#header-sec .nav li ul {
background-color: #fff;
}
#header-sec .nav li ul li {
width: 200px;
display: block;
text-align: left;
}
#header-sec .nav li ul a {
border: none;
color: #333;
}
#header-sec .nav li ul a:hover {
background: #333;
color: #fff;
}
#header-sec .nav li ul {
position: absolute;
left: 0;
top: 52px;
z-index: 1;
max-height: 0;
overflow: hidden;
-webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 0;
-webkit-transition: 350ms;
-moz-transition: 350ms;
-o-transition: 350ms;
transition: 350ms;
}
#header-sec .nav ul > li:hover ul {
max-height: 1000px;
-webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.27);
}
#header-sec .accordion-section-content li {
background: #fff;
padding: 10px 30px;
border-bottom: 1px solid #f6f6f6;
border-left: 1px solid #f6f6f6;
}
#header-sec .accordion-section-content li:hover {
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec .accordion-section-content li:last-child {
border-bottom: none;
}
#header-sec a {
color: #343838;
}
#header-sec #box {
position: fixed;
z-index: 4;
overflow: auto;
top: 0px;
right: -250px;
width: 250px;
opacity: 0;
padding: 20px 0px;
height: 100%;
background-color: #f6f6f6;
color: #343838;
-webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#header-sec #box.active {
right: 0px;
opacity: 1;
}
#header-sec #items {
position: relative;
top: 8.7%;
line-height: normal;
}
#header-sec #items .item {
position: relative;
cursor: pointer;
font-size: 1em;
/* originally 2ems */
padding: 10px 20px;
-webkit-transition: all 250ms;
transition: all 250ms;
}
#header-sec #items .item:hover {
padding: 10px 20px;
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec #btn {
position: absolute;
z-index: 5;
top: 22px;
right: 9px;
cursor: pointer;
-webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#header-sec #btn div {
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: #1d1f20;
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
}
#header-sec #btn.active {
right: 9px;
}
#header-sec #btn.active div {
background-color: #343838;
}
#header-sec #btn.active #top {
-webkit-transform: translateY(10px) rotate(-135deg);
-ms-transform: translateY(10px) rotate(-135deg);
transform: translateY(10px) rotate(-135deg);
}
#header-sec #btn.active #middle {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#header-sec #btn.active #bottom {
-webkit-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
#header-sec .accordion {
overflow: hidden;
line-height: normal;
}
#header-sec .accordion-section-title {
cursor: pointer;
width: 100%;
transition: all linear 0.15s;
-webkit-transition: all linear 0.15s;
-moz-transition: all linear 0.15s;
-ms-transition: all linear 0.15s;
-o-transition: all linear 0.15s;
position: relative;
display: block;
padding: 10px 20px;
}
#header-sec .accordion-section-title:hover {
padding: 10px 20px;
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec .accordion-section-content {
display: none;
background: #f0f0f0;
}
#header-sec .active2, #header-sec .open {
display: block;
}
#header-sec #box, #header-sec #btn {
display: none;
}
#media screen and (max-width: 992px) {
#header-sec .navbar-menu {
display: none;
}
#header-sec #box, #header-sec #btn {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hello-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<a class="try_it_for_free_event_gtm" onclick="ga('send', 'event', 'TryForFree', 'TryForFree-clicked', 'TryForFree')" href="http://info.moengage.com/push-amplification/?utm_source=homepage&utm_medium=ribbon">Introducing <span>MoEngage Push Amplification</span>: Industry-First Solution for Push Delivery Issues
<img src="img/notification.png" alt="" style="width: 17px;"></a>
</div>
</div>
</div>
</div>
<section id="header-sec">
<header id="header">
<div class="mo-container">
<div class="mo-row sticky-border">
<nav class="col-sm-6 col-md-4 col-lg-2">
<div class="navbar-logo">
<img src="img/logo-dark.png" alt="">
</div>
</nav>
<nav class="col-sm-6 col-md-8 col-lg-10 text-right">
<div class="navbar-menu nav">
<ul>
<li>
Product <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>Flows</li>
<li>Web Push</li>
<li>Email Campaigns</li>
<li>In-app Nativ</li>
<li>User Intelligence</li>
<li>Engagement Platform</li>
<li>Smart Triggers</li>
</ul>
</li>
<li>
Customers <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>Customer Stories</li>
<li>Help & Support</li>
<li>Developers Docs</li>
</ul>
</li>
<li>
Company <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>About</li>
<li>Blog</li>
<li>Jobs</li>
</ul>
</li>
<li>Pricing</li>
<li>Login</li>
<li>Sign Up</li>
<li>
<a href="" style="padding-right: 0;">
<button class="button primary">Free Demo</button>
</a>
</li>
</ul>
</div>
<div id="box">
<div id="items">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
Product <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-1" class="accordion-section-content">
<ul>
<li>Flows</li>
<li>Web Push</li>
<li>Email Campaigns</li>
<li>In-app Nativ</li>
<li>User Intelligence</li>
<li>Engagement Platform</li>
<li>Smart Triggers</li>
</ul>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">
Customers <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-2" class="accordion-section-content">
<ul>
<li>About</li>
<li>Blog</li>
<li>Jobs</li>
</ul>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">
Company <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-3" class="accordion-section-content">
<ul>
<li>About</li>
<li>Blog</li>
<li>Jobs</li>
</ul>
</div>
</div>
</div>
<div class="item">Pricing</div>
<div class="item">Login</div>
<div class="item">Sign Up</div>
</div>
</div>
<div id="btn">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
</nav>
</div>
</div>
</header>
</section>

So I changed your sticky header JS to add a class on scroll up and a class of show once 200px had been scrolled from the top.
JS
// Sticky Header
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll > 200) {
jQuery("#header").addClass("show");
} else {
jQuery("#header").removeClass("show");
}
});
var lastScrollTop = 0;
jQuery(window).scroll(function(event){
var st = jQuery(this).scrollTop();
if (st > lastScrollTop){
jQuery("#header").removeClass("up");
} else {
jQuery("#header").addClass("up");
}
lastScrollTop = st;
});
Then Added the CSS
#header-sec #header,
#header-sec #header.up{
position: absolute;
top: 0;
-webkit-transition: top 500ms ease-out ;
-moz-transition: top 500ms ease-out ;
-o-transition: top 500ms ease-out ;
transition: top 500ms ease-out ;
}
#header-sec #header.show {
position: fixed !important;
top: 0;
-webkit-animation-name: slidedown;
animation-name: slidedown;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#header-sec #header.up.show {
position: fixed !important;
top: 0;
-webkit-animation-name: slideup;
animation-name: slideup;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#-webkit-keyframes slideup {
0% {
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
}
#keyframes slideup {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-400px);
-ms-transform: translateY(-400px);
transform: translateY(-400px);
}
}
Hope you can use this

Categories

Resources