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>
Related
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?
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);
});
Currently I am facing the problem that each button triggers both cards to flip. However, I am aiming for each button to flip only the appropriate card (not both of them). Is it possible to extent this jquery function on as many cards as I want?
I hope my problem becomes clear when looking at the code snippet.
Any hints are highly appreciated.
Regards
.wrappercard {
width: 285px;
height: 350px;
margin-top: 50px;
margin-left: 50px;
}
.containercard {
height: 330px;
width: 285px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.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: 50% 50%;
}
.card div {
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
/* Front Styling */
.card .front {
background: white;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
border-radius: 5px;
}
/*Back Styling*/
.card .back {
background: white;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
border-radius: 5px;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
overflow: hidden;
}
/*Button flip*/
.btnflip {
border: none;
background: none;
margin-left: 50%;
transform: translate(-50%);
width: 100%;
margin-top: 10px;
font-size: 14px;
font-weight: lighter;
cursor: pointer;
padding: 3px 20px 3px 20px;
box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.20);
border-radius: 4px;
transition: 0.3s ease-in-out;
}
.btnflip:hover {
background-color: white;
box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.80);
transition: 0.3s ease-in-out;
}
.btnflip:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrappercard">
<section class="containercard">
<div class="card">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</section>
<button class="btnflip" onclick="flip()">Anfragen</button>
</div>
<div class="wrappercard">
<section class="containercard">
<div class="card">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</section>
<button class="btnflip" onclick="flip()">Anfragen</button>
</div>
<script>
function flip() {
$('.card').toggleClass('flipped');
}
</script>
If you add the event handler via jquery then you get this, which is the button clicked.
<button class="btnflip">Anfragen</button>
then you can use relative path traversal to find the related card:
$(function() {
$(".btnflip").click(function() {
$(this).closest(".wrappercard").find('.card').toggleClass('flipped');
})
});
$(function() {
$(".btnflip").click(function() {
$(this).closest(".wrappercard").find('.card').toggleClass('flipped');
})
});
.wrappercard {
width: 285px;
height: 350px;
margin-top: 50px;
margin-left: 50px;
}
.containercard {
height: 330px;
width: 285px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.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: 50% 50%;
}
.card div {
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
/* Front Styling */
.card .front {
background: white;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
border-radius: 5px;
}
/*Back Styling*/
.card .back {
background: white;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
border-radius: 5px;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
overflow: hidden;
}
/*Button flip*/
.btnflip {
border: none;
background: none;
margin-left: 50%;
transform: translate(-50%);
width: 100%;
margin-top: 10px;
font-size: 14px;
font-weight: lighter;
cursor: pointer;
padding: 3px 20px 3px 20px;
box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.20);
border-radius: 4px;
transition: 0.3s ease-in-out;
}
.btnflip:hover {
background-color: white;
box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.80);
transition: 0.3s ease-in-out;
}
.btnflip:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrappercard">
<section class="containercard">
<div class="card">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</section>
<button class="btnflip">Anfragen</button>
</div>
<div class="wrappercard">
<section class="containercard">
<div class="card">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</section>
<button class="btnflip">Anfragen</button>
</div>
.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');
});