Keep css animation appearing after unhovering state - javascript

I have a div. When I hover into this div, 3 circles should pop in using css animation. But they disappear, when I move the mouse away from the div. How can I make them stay without using jquery? Here is my code:
.circle {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: blue;
list-style: none;
opacity: 0;
transform: scale(0);
}
.circles li {
margin-top: 10px;
}
.hoverover:hover + .circles .circle {
animation: popin .25s forwards;
}
#keyframes popin {
80% {
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
<div class="hoverover">Hover Over Me</div>
<ul class="circles">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>


To make the circles stay as long as the .hoverover element or they are hovered you need to insert the .circles container into .hoverover, and make some changes to the way .circles behave when hovered, and not hovered:
.circles {
margin: 0;
padding: 15px;
}
.hoverover {
display: inline-block; /** limit it to the size and height of the text **/
height: 20px;
}
.hoverover:not(:hover) > .circles { /** prevent opening circles by hovering it when invisible **/
pointer-events: none;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: blue;
margin-top: 10px;
list-style: none;
opacity: 0;
transform: scale(0);
}
.hoverover:hover .circle {
animation: popin .25s forwards;
}
#keyframes popin {
80% {
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
<div class="hoverover">
<span>Hover Over Me</span>
<ul class="circles">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
Previous answer:
When the .hoverover element is hovered, it applies the animation animation: popin .25s forwards; to the .circle elements. When the hover ends the animation is removed, and the element disappears.
To solve that start the animation paused on the .circle, and "resume" it when .hoverover is hovered:
.circle {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: blue;
list-style: none;
opacity: 0;
transform: scale(0);
animation: popin .25s forwards;
animation-play-state: paused;
}
.circles li {
margin-top: 10px;
}
.hoverover:hover + .circles .circle {
animation-play-state: running;
}
#keyframes popin {
80% {
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
<div class="hoverover">Hover Over Me</div>
<ul class="circles">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>


You only need to pause animation with
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
And run it again on hover
-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
animation-play-state: running;
<html>
<div class="hoverover">Hover Over Me</div>
<ul class="circles">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
<style>
.circle {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: blue;
list-style: none;
opacity: 0;
transform: scale(0);
}
.circles li {
margin-top: 10px;
}
.circles .circle{
animation: popin .25s forwards;
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}
.hoverover:hover + .circles .circle {
-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
animation-play-state: running;
}
#keyframes popin {
80% {
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
</style>
</html>

Related

Responsive navbar menu (hamburger menu) doesn't open by clicking

Got a navbar but the problem is when I open (click) it on mobile phone or in responsive environment (when the hamburger menu shows up), it does not open by clicking on it, the links are not showing. Below is the code that I'm using for it. Used the necessary links but not working. Everything is fine, the only problem that is occurring is with that hamburger menu.
$('.navTrigger').click(function() {
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('.nav').addClass('affix');
console.log("OK");
} else {
$('.nav').removeClass('affix');
}
});
.nav {
width: 100%;
height: 65px;
position: fixed;
line-height: 65px;
text-align: center;
z-index: 1;
}
.nav div.logo {
float: left;
width: auto;
height: auto;
padding-left: 0.9rem;
}
.nav div.logo a {
text-decoration: none;
color: #fff;
}
.nav div.logo a:hover {
color: #00E676;
}
.nav div.main_list {
height: 65px;
float: right;
}
.nav div.main_list ul {
width: 100%;
height: 65px;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav div.main_list ul li {
width: auto;
height: 65px;
padding: 2px;
padding-right: 0.9rem;
}
.nav div.main_list ul li a {
text-decoration: none;
color: #fff;
line-height: 65px;
font-size: 80%;
font-weight: bold;
}
.nav div.main_list ul li a:hover {
color: #00b3ee;
}
/* Home section */
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
}
.navTrigger {
display: none;
}
.nav {
padding-top: 20px;
padding-bottom: 20px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 1;
}
/* Media query section */
#media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
margin: 0;
}
}
#media screen and (max-width:768px) {
.navTrigger {
display: block;
}
.nav div.logo {
margin-left: 15px;
}
.nav div.main_list {
width: 100%;
height: 0;
overflow: hidden;
}
.nav div.show_list {
height: auto;
display: none;
}
.nav div.main_list ul {
flex-direction: column;
width: 100%;
height: 100vh;
right: 0;
left: 0;
bottom: 0;
background-color: #111;
/*same background color of navbar*/
background-position: center top;
}
.nav div.main_list ul li {
width: 100%;
text-align: right;
}
.nav div.main_list ul li a {
text-align: center;
width: 100%;
font-size: 3rem;
padding: 20px;
}
.nav div.media_button {
display: block;
}
}
.navTrigger {
cursor: pointer;
width: 30px;
height: 25px;
margin: auto;
position: absolute;
right: 30px;
top: 0;
bottom: 0;
}
.navTrigger i {
background-color: #fff;
border-radius: 2px;
content: '';
display: block;
width: 100%;
height: 4px;
}
.navTrigger i:nth-child(1) {
-webkit-animation: outT 0.8s backwards;
animation: outT 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(2) {
margin: 5px 0;
-webkit-animation: outM 0.8s backwards;
animation: outM 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(3) {
-webkit-animation: outBtm 0.8s backwards;
animation: outBtm 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger.active i:nth-child(1) {
-webkit-animation: inT 0.8s forwards;
animation: inT 0.8s forwards;
}
.navTrigger.active i:nth-child(2) {
-webkit-animation: inM 0.8s forwards;
animation: inM 0.8s forwards;
}
.navTrigger.active i:nth-child(3) {
-webkit-animation: inBtm 0.8s forwards;
animation: inBtm 0.8s forwards;
}
#-webkit-keyframes inM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#keyframes inM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#-webkit-keyframes outM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#keyframes outM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#-webkit-keyframes inT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
#keyframes inT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
#-webkit-keyframes outT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
#keyframes outT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
#-webkit-keyframes inBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
#keyframes inBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
#-webkit-keyframes outBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
#keyframes outBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
.affix {
padding: 0;
background-color: #111;
}
.myH2 {
text-align: center;
font-size: 4rem;
}
.myP {
text-align: justify;
padding-left: 15%;
padding-right: 15%;
font-size: 20px;
}
#media all and (max-width:700px) {
.myP {
padding: 2%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav">
<div class="container">
<div class="logo">
<img src="img" class="ha">
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks second">
<li class="a">HOME</li>
<li class="b">ABOUT US</li>
<li class="c">OUR SERVICES</li>
<li class="d">JOBS</li>
<li class="e">CONTACT US</li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>
<nav class="nav">
<div class="container">
<div class="logo">
<img src="chk2.png" class="hello">
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks second">
<li class="a">HOME</li>
<li class="b">ABOUT US</li>
<li class="c">OUR SERVICES</li>
<li class="d">JOBS AT HEGTAVIC</li>
<li class="e">CONTACT US</li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>

I have tried your code and modified in fallowing way. It is working fine.
$(document).ready(function(){
$('.navTrigger').on('click',function (){
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
});

Automatically close menu after link is clicked

At the moment, my navigation bar houses links to sections on the one page and doesn't have any links to other pages. When a link is clicked it automatically goes to the corresponding div on that page however, part of the target div is covered by the navigation bar which remains open until the close button is clicked.
My question is, is there a way to force the header to close once a link has been clicked?
HTML:
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li>Store locator</li>
<li>Trade customer login</li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo">
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>
CSS:
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
#media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
#media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
#media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
#media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-ms-#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
JS:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
});

add this jquery function in your js file :
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
here is snippet for understanding:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
});
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
#media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
#media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
#media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
#media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-ms-#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li><a id="learnmore" href="#intro-block">Learn more</a></li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li>Store locator</li>
<li>Trade customer login</li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo">
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>

Fade background in/out on scroll

Final item will be background-image, this test is on background-color.
https://jsfiddle.net/broj3064/17/ when you scroll down, red block fades in, but if you scroll up, it doesn't fade out, it just disappears.
HTML
<header>
<nav>
<ul>
<li class="up"></li>
</ul>
</nav>
</header>
<div class="content">
</div>
CSS
header {
display: block;
width: 100%;
position: fixed;
}
nav ul li {
list-style: none;
display: block;
background-color: red;
width: 50px;
height: 50px;
}
nav ul li.up {
}
nav ul li.down {
}
.content {
min-height: 1000px;
}
/* animation */
nav ul li.down {
-webkit-animation: bummer 0.5s;
animation: bummer 0.5s;
-webkit-transform: scale(0,0);
transform: scale(0,0);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes bummer {
100% {
-webkit-transform: scale(1);
}
}
#keyframes bummer{
100% {
transform: scale(1);
}
}
nav ul li.up {
-webkit-animation: bummer2 0.5s;
animation: bummer2 0.5s;
-webkit-transform: scale(1,0);
transform: scale(1,0);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes bummer2 {
100% {
-webkit-transform: scale(0);
}
}
#keyframes bummer2{
100% {
transform: scale(0);
}
}
jQuery
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$("li").addClass("down").removeClass("up");
}
else {
$("li").removeClass("down").addClass("up");
}
});

Is this what you need?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$("li").toggleClass('show',(scroll >= 50)); /* toggleClass add or remove a class in a div if you pass a boolean to it, in this case, when scroll is greater than 50 wich its true adds the show class to the selector, in this case a $('li'), otherwise it remove the class */
});
header {
display: block;
width: 100%;
position: fixed;
}
nav ul li {
list-style: none;
display: block;
background-color: red;
width: 50px;
height: 50px;
transition:all 400ms; /* This line create an animated transition if any property is overwritten */
transform:scale(0);
}
nav ul li.show {
/*Due to css specificity, adding a second class to an item, it overwrite its value, triggering the transition property to animate between old and new value*/
transform:scale(1);
}
.content {
min-height: 1000px;
}
/* animation */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<ul>
<li></li>
</ul>
</nav>
</header>
<div class="content">
</div>
if it is, hope it helps

Page transition when clicking a button

I created a landing page where an image will fade on into the screen, then a user can press the arrow, and it will bring them to a different page with more content.
What my goal is, is to get it so that when the user presses the button, the new page slides in to view.
I found an example of what I wanted here: https://tympanus.net/Development/PageTransitions/
I would like to use the "Move to left / from right" transition.... I tried downloading the source file from this website and figuring out how to implement their code into mine, but I was really confused... Does anyone have any suggestions as to how to get this transition to work? I would like to keep it strictly HTML/CS/Java/JQ....
Thanks
* {
margin: 0;
padding: 0;
}
.fade-in {
animation: animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames ease 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames ease 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
#keyframes animationFrames {
0% {
opacity: 0;
transform: translate(0px, -25px);
}
100% {
opacity: 1;
transform: translate(0px, 0px);
}
}
#-moz-keyframes animationFrames {
0% {
opacity: 0;
-moz-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-moz-transform: translate(0px, 0px);
}
}
#-webkit-keyframes animationFrames {
0% {
opacity: 0;
-webkit-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-webkit-transform: translate(0px, 0px);
}
}
#-o-keyframes animationFrames {
0% {
opacity: 0;
-o-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-o-transform: translate(0px, 0px);
}
}
#-ms-keyframes animationFrames {
0% {
opacity: 0;
-ms-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-ms-transform: translate(0px, 0px);
}
}
#showcase {
background-image: url('https://images.freecreatives.com/wp-content/uploads/2016/03/Cute-Purple-Background.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 20px;
}
#showcase h1 {
font-size: 6vw;
color: #fff;
font-family: passion one;
letter-spacing: 4vw;
margin-left: 4vw;
text-shadow: 2px 2px 3px #000;
}
#showcase h2 {
font-size: 2.5vw;
line-height: 2vw;
color: #fff;
font-family: passion one;
text-shadow: 2px 2px 3px #000;
}
#showcase .button {
font-size: 18px;
text-decoration: none;
color: white;
padding: 10px 20px;
border-radius: 10px;
margin-top: 100px;
background-color: darkgreen;
text-shadow: 2px 2px 3px #000;
}
#showcase .button:hover {
background-color: green;
color: #fff;
}
.hiddendiv {
display: none;
width: 300px;
height: 300px;
background-color: green;
}
.button:focus+.hiddendiv {
display: block;
margin-left: 100px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<div class="wrapper fade-in">
<header id="showcase">
<div id="background">
<h1>TITLE</h1>
</div>
<h2>2017</h2>
<i class="fa fa-angle-double-right" style="font-size:36px"></i>
</header>

I implemented something similar using this jQuery plugin...
http://joaopereirawd.github.io/animatedModal.js/
As you can see in the plugin documentation, you can have your new window content already created and when you click the arrow button, the plugin will make it appear using the animation you selected.
In my case I need the new window content to be generated dinamically the button is pressed, so I create a click event in that button that generates all the new window content inside of a div (and a new link that will be responsible of really triggering the animated modal), and append all to the DOM. Then I create the animatedModal element associated to the generated div, and trigger the click event in the new link with the click() function.
For your case (include the css and javascript files following the following the plugin documentation)...
HTML:
<a id="linktonewwindow" href="#newwindow" class="button"><i class="fa fa-angle-double-right" style="font-size:36px"></i></a>
<div id="newwindow">
<!-- IMPORTANT. Create the element to close the window!!! -->
<button class="close-newwindow"><i class="fa fa-stop fa-fw" aria-hidden="true"></i></button>
<div class="yournewwindowcontent">
<!-- Put your new window content here-->
</div>
</div>
JQUERY:
$("#linktonewwindow").animatedModal({
modalTarget:'newwindow',
animatedIn:'bounceInLeft', // Choose the animations you prefer
animatedOut:'bounceOutLeft',
color:'#999999', // Background color of the new window
beforeOpen: function() {
},
afterOpen: function() {
},
beforeClose: function() {
},
afterClose: function() {
}
});
I hope it helps

Menu not working on Android Chrome

I have created a fullscreen overlay menu for my personal portfolio. It's working absolutely fine in Chrome / FF / IE on desktop and on my regular Android browser on my Galaxy S4. However, I cannot get it to work on Chrome for Android. It's as if the jQuery just isn't being toggled in that browser.
Code below. JSFiddle here. Live example here.
HTML:
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</nav>
</div>
JS:
$(document).ready(function(){
$("#toggle").on('click touchstart', function(event) {
event.preventdefault();
$("#overlay").toggleClass("open")
});
});
CSS:
.overlay {
position: fixed;
background: #FF5252;;
top: 0;
left: 0;
width: 0%;
height: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, width .35s ease-in-out;
transition: opacity .35s, visibility .35s, width .35s ease-in-out;
overflow: hidden;
z-index: 100;
}
.overlay.open {
opacity: .9;
visibility: visible;
width: 100%;
}
.overlay nav {
position: relative;
height: 60%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 32px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
text-align: center;
}
.overlay nav ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay nav ul li {
display: block;
height: 20%;
height: -webkit-calc(100% / 5);
height: calc(100% / 5);
min-height: 32px;
position: relative;
opacity: 0;
}
.overlay.open nav ul li {
-webkit-animation: menuFade .5s ease forwards;
animation: menuFade .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.overlay.open nav ul li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.overlay.open nav ul li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.overlay.open nav ul li:nth-of-type(4) {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
.overlay.open nav ul li:nth-of-type(5) {
-webkit-animation-delay: .55s;
animation-delay: .55s;
}
#-webkit-keyframes menuFade {
0% {
opacity: 0;
left: -25%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes menuFade {
0% {
opacity: 0;
left: -25%;
}
100% {
opacity: 1;
left: 0;
}
}
.overlay nav ul li a {
display: block;
position: relative;
color: #FFF;
overflow: hidden;
}
.overlay nav ul li a:hover {
text-decoration: none;
}
.overlay nav ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 0%;
-webkit-transform: translateX(-105%);
-ms-transform: translateX(-105%);
transform: translateX(-105%);
height: 3px;
width: 100%;
background: #FFF;
-webkit-transition: .35s ease;
transition: .35s ease;
}
.overlay nav ul li a:hover:after {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}

Problem solved. My phone cached the old version of the JS file, which didn't jive with the new menu. Clearing the cache solved all problems.

Categories

Resources