I found this flip animation on the internet and I was wondering: How can I change the javascript that instead of hovering over the image will cause the flip, a set time wil? So for instance after 3 seconds, the animation will start.
I am not so good with javascript yet and I am hoping someone can help me out
Thank you very much If you know the solution!
$(document).ready(function() {
$(".container").hover(function() {
$(".card").toggleClass('flipped')
}, function() {
$(".card").toggleClass('flipped')
});
})
h1 {
text-align: center;
}
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
Why not do it with CSS?
On hover pseudo class with a transition:
h1 {
text-align: center;
}
.container {
--card-transition-duration: 1s;
--card-transition-delay: 4s;
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transition: transform var(--card-transition-duration) ease var(--card-transition-delay);
transform-style: preserve-3d;
transform-origin: right center;
}
.container:hover .card {
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.card .back p {
margin: auto;
}
.card .back {
background: blue;
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
Or by itself with #keyframes animation:
h1 {
text-align: center;
}
.container {
--card-transition-duration: 1s;
--card-transition-delay: 4s;
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transition: transform var(--card-transition-duration) ease var(--card-transition-delay);
transform-style: preserve-3d;
transform-origin: right center;
animation-name: flip;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.card .back p {
margin: auto;
}
.card .back {
background: blue;
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
#keyframes flip {
0% {
transform: translateX( 0%) rotateY( 0deg);
}
35% {
transform: translateX( 0%) rotateY( 0deg);
}
65% {
transform: translateX( -100%) rotateY( -180deg);
}
100% {
transform: translateX( -100%) rotateY( -180deg);
}
}
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
First, that's not justjavascript, it's jQuery. If you want the animation to start with a delay using the jquery code, you can add a setTimeout.
And if you use the callback function of the hover method, use add/remove class not toggle.
You could do it in multiple ways, even with just CSS and animations.
$(document).ready(function() {
$(".container").hover(function() {
setTimeout(() => { $(".card").addClass('flipped')},3000)
}, function() {
$(".card").removeClass('flipped')
});
})
h1 {
text-align: center;
}
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
Change the ready function to the one below.
$(document).ready(function () {
window.setInterval(function () {
$(".card").toggleClass("flipped");
}, 3000);
});
Related
The issue is that if you do the mouseenter and wiggle your mouse around fast, it will trigger the flipping action multiple times, making it flicker or look strange. Is there a better way to do what I'm doing here?
jQuery('.card').mouseenter(function(e) {
e.stopPropagation();
jQuery(this).addClass('flipped');
}).mouseleave(function(e) {
e.stopPropagation();
jQuery(this).removeClass('flipped');
});
.card {
width: 150px;
height: 300px;
position: absolute;
cursor: pointer;
background-color: purple;
/* Set the transition effects */
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
text-align: center;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}
.card .front h3 {
font-size: 30px;
}
.card .back p {
height: 75px;
}
.card .front .card-text {
padding: 0 25px;
height: 100px;
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
background-color: #ffffff;
text-align: center;
display: flex;
align-items: center;
}
.card .back {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card .apply-link {
text-decoration: none;
background-color: #fff;
color: #000;
padding: 8px 20px;
}
.card .back h3 {
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="front">
<h3>Big Header</h3>
<div class="card-text">Info text here</div>
</div>
<div class="back" style="background-color: #b24377">
<h3>Up to 40% off</h3>
<p>Text here </p>
Apply Now
</div>
</div>
The issue is that if you do the mouseenter and wiggle your mouse around fast, it will trigger the flipping action multiple times, making it flicker or look strange. Is there a better way to do what I'm doing here?
One way to solve the issue is to add a wrapper around the card and listen to events on the wrapper instead of the card
jQuery('.wrapper').mouseenter(function(e) {
e.stopPropagation();
let $this = jQuery(this).find('.card');
if(!$this.hasClass('flipped')){
$this.addClass('flipped');
}
}).mouseleave(function(e){
e.stopPropagation();
jQuery(this).find('.card').removeClass('flipped');
});
.wrapper{
width: 150px;
height: 300px;
}
.card {
width: 100%;
height: 100%;
cursor: pointer;
background-color: purple;
/* Set the transition effects */
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
text-align: center;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}
.card .front h3 {
font-size: 30px;
}
.card .back p {
height: 75px;
}
.card .front .card-text {
padding: 0 25px;
height: 100px;
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
background-color: #ffffff;
text-align: center;
display: flex;
align-items: center;
}
.card .back {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card .apply-link {
text-decoration: none;
background-color: #fff;
color: #000;
padding: 8px 20px;
}
.card .back h3 {
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="card">
<div class="front">
<h3>Big Header</h3>
<div class="card-text">Info text here</div>
</div>
<div class="back" style="background-color: #b24377">
<h3>Up to 40% off</h3>
<p>Text here </p>
Apply Now
</div>
</div>
</div>
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
});
I am working on a website with a hamburger menu that fills the entire page when clicked. The only problem is the page behind still scrolls when the nav is open, and I can't figure out how to disable scrolling while the menu is open. I have tried changing overflow-y: hidden, but it doesn't seem to work.
Here is the HTML for the menu:
<div id="menu">
<div class="logotext">
ONWORD
</div>
<input type="checkbox" id="myInput">
<label for="myInput">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</label>
<aside>
<div class="aside-section aside-left">
<div class="aside-content">
<p> Languages of the land</p>
</div>
</div>
<div class="aside-section aside-right">
<ul class="aside-list">
<li>Start Learning</li>
<li>Language Map</li>
<li>History</li>
<li>Stories</li>
<li>Contact</li>
</ul>
</div>
</aside>
</div>
Here is the CSS:
.logotext a {
font-family: "Raleway", sans-serif;
font-size: 20px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
left: 1%;
z-index: 99999;
color: white;
position: absolute;
padding-left: 19px;
padding-right: 19px;
padding-top: 22px;
transition: 0.5s;
}
.logotext a:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.aside-section {
top: 0;
bottom: 0;
position: absolute;
z-index: 99998;
overflow: hidden;
}
.aside-left {
display: none;
width: 40%;
left: 0;
background-color: white;
background-image: url(../img/menu1.jpeg);
background-position: center;
background-size: cover;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-right {
width: 100%;
right: 0;
background-color: #000000;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 160px;
text-align: left;
padding-left: 50px;
z-index: 99998;
}
.aside-content {
margin-top: 150px;
padding: 0 40px;
position: relative;
color: #000000;
text-align: center;
z-index: 99998;
}
.aside-list li {
margin-bottom: 20px;
z-index: 99998;
padding-bottom: 7px;
}
.aside-anchor::after {
content: "";
position: absolute;
bottom: 0;
background-color: #000000;
left: 0;
right: 0;
height: 2px;
border-radius: 3px;
}
.aside-anchor::before {
border-radius: 3px;
content: "";
position: absolute;
bottom: 0;
background-color: #f5eded;
left: 0;
height: 1px;
z-index: 1;
width: 50%;
-webkit-transition: transform 0.2s ease-in-out;
-o-transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
.aside-anchor:hover:before {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
background-color: #dd8800;
}
.aside-anchor {
padding-bottom: 5px;
color: #fff;
text-decoration: none;
font-size: 14px;
position: relative;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ aside .aside-left {
transform: translateY(0%);
}
input[type="checkbox"]:checked ~ aside .aside-right {
transform: translateX(0%);
}
input[type="checkbox"]:checked ~ label .bar {
background-color: #fff;
}
input[type="checkbox"]:checked ~ label .top {
-webkit-transform: translateY(0px) rotateZ(45deg);
-moz-transform: translateY(0px) rotateZ(45deg);
-ms-transform: translateY(0px) rotateZ(45deg);
-o-transform: translateY(0px) rotateZ(45deg);
transform: translateY(0px) rotateZ(45deg);
}
input[type="checkbox"]:checked ~ label .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
input[type="checkbox"]:checked ~ label .middle {
width: 0;
}
.middle {
margin: 0 auto;
}
label {
top: 10px;
display: inline-block;
padding: 7px 10px;
background-color: transparent;
cursor: pointer;
margin: 10px;
position: absolute;
z-index: 99999;
text-align: right;
right: 1%;
transition: 0.5s;
}
label:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.bar {
display: block;
background-color: #ffffff;
width: 30px;
height: 3px;
border-radius: 5px;
margin: 5px auto;
transition: background-color 0.4s ease-in, transform 0.4s ease-in,
width 0.4s ease-in;
z-index: 99999;
}
.aside-section h1 {
margin: 0;
position: relative;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
font-size: 35px;
font-family: 'BritishShorthair';
}
.aside-section p {
font-size: 90px;
text-align: center;
line-height: 130px;
font-family: 'BritishShorthair';
margin-top: 0px;
color: white;
}
#media (min-width: 992px) {
h1 {
font-size: 40px;
}
.aside-left {
display: block;
}
.aside-right {
width: 60%;
}
}
When you said you set overflow-y: hidden. Did you do this on the body?
.social-icon-holder {
float: left;
padding-left: 10px;
}
.social-icon {
width: 40px;
height: 40px;
font-size: 30px;
text-decoration: none;
cursor: pointer;
text-align: center;
line-height: 40px;
position: relative;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
/* background: #000;*/
color: #fff;
float: left;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
border: 3px solid #fff;
}
.social-icon:hover {
color: #fff;
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.social-icon:hover .front {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-icon:hover .back {
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.social-icon .front,
.social-icon .back {
width: 40px;
height: 40px;
position: absolute;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.social-icon .back {
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-icon .twitter .back {
background: #00ACED;
}
<div class="social-icon-holder">
<div class="social-icon">
<div class="twitter">
<div class="front">t</div>
<div class="back">t</div>
</div>
</div>
</div>
jsFiddle here
I did not produce the majority of the code.
The icon flips/rotates when a user hovers over the icon.
I realize this is done via the hover class.
However I would like to trigger this animation manually (via an event etc).
I understand it is not possible to trigger hover as it is not a trusted event.
Can someone help me re-code this so that the animation is triggered via jQuery?
In your css where you set the hover states, you could add a selector that does the same for a specific class. In my example I added the class hover, so the line .social-icon:hover now becomes .social-icon:hover, .social-icon.hover etc.
You can then toggle this class using jQuery's .toggleClass() function.
In the below example I do this using a button and a click event.
I added a background color just so the icon is more visible, so this has nothing to do with the actual answer ;)
$('#triggerHover').on('click', function() {
$('.social-icon').toggleClass('hover');
});
body {
background: #ccc;
}
.social-icon-holder {
float: left;
padding-left: 10px;
}
.social-icon {
width: 40px;
height: 40px;
font-size: 30px;
text-decoration: none;
cursor: pointer;
text-align: center;
line-height: 40px;
position: relative;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
/* background: #000;*/
color: #fff;
float: left;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
border: 3px solid #fff;
}
.social-icon:hover, .social-icon.hover {
color: #fff;
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.social-icon:hover .front, .social-icon.hover .front {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-icon:hover .back, .social-icon.hover .back {
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.social-icon .front,
.social-icon .back {
width: 40px;
height: 40px;
position: absolute;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.social-icon .back {
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-icon .twitter .back {
background: #00ACED;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social-icon-holder">
<div class="social-icon">
<div class="twitter">
<div class="front">t</div>
<div class="back">t</div>
</div>
</div>
</div>
<button id="triggerHover">Click me!</button>
I'm trying to make a div that's change between CSS classes when clicking on it, clicking on it again will flip the div back. I'm trying to remove the class when clicking on the div the second time, but it seems that I don't do it the proper way.
How do I achieve this?
$('.snu').click(function () {
$(this).find('.kort').addClass('snudd');
});
$('.snudd').click(function () {
$(this).find('.kort').removeClass('snudd');
});
body {
background: #ccc;
}
.snu {
-webkit-perspective: 800;
-moz-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.snu .kort.snudd {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
}
.snu .kort {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
}
.snu .kort .side {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
z-index: 2;
font-family: Georgia;
font-size: 1em;
text-align: center;
line-height: 200px;
}
.snu .kort .forrand {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.snu .kort .bak {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="snu">
<div class="kort">
<div class="side forrand">dette er forranddfsdfgsdfdsfgdsgfg</div>
<div class="side bak">dett er bakgdfgdfgdfg</div>
</div>
</div>
Use the following js
$('.snu').click(function () {
$(this).find('.kort').toggleClass('snudd');
});
Just use toggleClass() in first event listener. You can't apply an event listener to a class that doesn't exist at the time the code is run
$('.snu').click(function() {
$(this).find('.kort').toggleClass('snudd');
});
body {
background: #ccc;
}
.snu {
-webkit-perspective: 800;
-moz-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.snu .kort.snudd {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
}
.snu .kort {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
}
.snu .kort .side {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
z-index: 2;
font-family: Georgia;
font-size: 1em;
text-align: center;
line-height: 200px;
}
.snu .kort .forrand {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.snu .kort .bak {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="snu">
<div class="kort">
<div class="side forrand">dette er forranddfsdfgsdfdsfgdsgfg</div>
<div class="side bak">dett er bakgdfgdfgdfg</div>
</div>
</div>
with pure javascript
let snu = document.querySelector('.snu');
let kort = document.querySelector('.kort');
snu.onclick = function() {
kort.classList.toggle('snudd');
}
Use of toggleClass :
$('.snu').click(function () {
$(this).find('.kort').toggleClass('snudd');
});