On click Javascript transform - javascript

I am trying to achieve a flip card effect on the click of a button but I can not quite figure out the Javascript. I actually know nothing about Javascript so I have attempted to find similar solutions and alter them to my needs but with no results. Below is the CSS for how it is now as a :hover style.
You can view it here : http://dangoodeofficial.co.uk/290-2
CSS:
.flip3D {
float: left;
display: block;
position: relative;
width: auto;
height: 675px;
}
.flip3D .front {
position: absolute;
-o-transform: perspective(600px)RotateY( 0deg );
-moz-transform: perspective(600px)RotateY( 0deg );
-ms-transform: perspective(600px)RotateY( 0deg );
-webkit-transform: perspective(600px)RotateY( 0deg );
transform: perspective(600px)RotateY( 0deg );
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D .back {
position: absolute;
-o-transform: perspective(600px)RotateY( 180deg );
-moz-transform: perspective(600px)RotateY( 180deg );
-ms-transform: perspective(600px)RotateY( 180deg );
-webkit-transform: perspective(600px)RotateY( 180deg );
transform: perspective(600px)RotateY( 180deg );
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D:hover > .front {
-o-transform: perspective(600px)RotateY( -180deg );
-moz-transform: perspective(600px)RotateY( -180deg );
-ms-transform: perspective(600px)RotateY( -180deg );
-webkit-transform: perspective(600px)RotateY( -180deg );
transform: perspective(600px)RotateY( -180deg );
}
.flip3D:hover > .back {
-o-transform: perspective(600px)RotateY( 0deg );
-moz-transform: perspective(600px)RotateY( 0deg );
-ms-transform: perspective(600px)RotateY( 0deg );
-webkit-transform: perspective(600px)RotateY( 0deg );
transform: perspective(600px)RotateY( 0deg );
}
And I have buttons with classes .flip-button for the front and .flip-back for the back.
Any advice would be greatly appreciated. Thank you.
Dan

I found this plugin. It may helps you. And here there is a list of plugin that do flip effect: http://www.sitepoint.com/10-jquery-flip-effect-plugins/
Edited
This may helps you! I only toggle the class .flip in .front and .back . (http://jsfiddle.net/0x13mL26/3/)
Sorry for the misunderstanding! :)

I know you asked for javascript, but my solution is with JQuery. Use a click function on each button and then you can use Jquery's .removeClass and .addClass methods to change the class of the card that needs to be flipped when the button is being clicked. Something like this should work:
$( "#frontbutton" ).click(function() {
$("#flipcard").addClass('back');
$("#flipcard").removeClass('front');
$("#frontbutton").css("display","none");
$("#backbutton").css("display","static");
});
$( "#backbutton2" ).click(function() {
$("#flipcard").addClass('front');
$("#flipcard").removeClass('back');
$("#backbutton").css("display","none");
$("#frontbutton").css("display","static");
});
and of course you will want to hide the "backbutton" initially.
So when you click the front button, it will change the class of the "flipcard" you have making it flip. The "frontbutton" will then hide, and in its place you put the now visible "backbutton". When the back button is clicked, it should trigger the same process but opposite.

Related

Why I can't get hamburger menu to work properly?

I need some help here. I'm trying to make a hamburger menu for my website but for some reason which I can't figure out, it doesn't work. Here's the HTML, CSS and JavaScript code which I've written in codepen.io:
https://codepen.io/TheUnrealisticProgrammer/pen/QvjvVW
Here's the JavaScript code:
$(document).ready(function(){
$('Menu').click(function(){
$(this).toggleClass('Trigger');
});
});
From the code, the first span bar should animate by rotating 135 degrees after I click on it but it's not.
Use Jquery and JQuery UI before using. And $('Menu') Menu is not a tag but it is ID of div as per your Code Pen. It has to be $('#Menu').
your css style is broken,
you don't have jQuery (add through setting)
$('Menu') this is jQuery as other said, you are selecting id so should be $('#Menu')
check this link for working example, fixed jQuery, js and CSS:
https://codepen.io/hdl881127/pen/wdKZVj
fixed css:
#Menu{
position:relative;
margin-top:20px;
margin-left:20px;
display:block;
height:50px;
cursor: pointer;
width:50px;
-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;
}
#Menu span{
position:absolute;
background:orange;
display:block;
height: 6px;
width: 100%;
border-radius:50px;
-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;
}
#Menu span:nth-child(1){
top:0px;
}
#Menu span:nth-child(2){
top:18px;
}
#Menu span:nth-child(3){
top:36px;
}
#Menu.Trigger span:nth-child(1){
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#Menu.Trigger span:nth-child(2){
top: 18px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
#Menu.Trigger span:nth-child(3){
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Please do these steps.
Go to your code pen
Click on the setting icon available in the JS section.
Add jquery reference (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js) by clicking on the add another resource button placed at the right bottom of the dialog box.
In your javascript, you are using $('Menu'). which is actually searching for the tag called Menu. Change it to $('#Menu'). As you want to target to the ID.
It will work perfectly fine.

Automatic start Animation CSS3

I have an multipage with slider: I inserted a css3 animation (the famous rocket animation)
I had code:
#outerspace {
position: relative;
height: 400px;
background: #fff;
color: #fff;
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
transition: 3s ease-in;
}
div.rocket div {
width: 92px;
height: 215px;
background: url('https://i.stack.imgur.com/nxion.gif') no-repeat;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
transition: 2s ease-in-out;
-webkit-animation: bounceIn 2s;
}
#outerspace:hover div.rocket {
-webkit-transform: translate(0px, -5400px);
-moz-transform: translate(0px, -5400px);
-o-transform: translate(0px, -5400px);
-ms-transform: translate(0px, -5400px);
transform: translate(0px, -5400px);
}
<div id="outerspace">
<div class="rocket">
<div></div>
BoneOS
</div>#outerspace
</div>
How Can I start animation automatically when slide changes?
Soo Plan here is to trigger the animation by adding active class to the outerspace div instead of hover, like below
#outerspace.active div.rocket {
-webkit-transform: translate(0px, -5400px);
-moz-transform: translate(0px, -5400px);
-o-transform: translate(0px, -5400px);
-ms-transform: translate(0px, -5400px);
transform: translate(0px, -5400px);
}
and the trigger it through addclass and removeclass in Jquery.Makesure to set time out to allow time for the transition to take place before removing the class.
$("#outerspace").addClass("active");
setTimeout(function() {
$("#outerspace").removeClass("active");
}, 1000);
I wasnt sure what you wanted to do with the rocket exactly but this codepen link shows the rocket being triggered when the slide changes, i have used simple slider as the question doesnt mention exactly what kind of slider are you using,
http://codepen.io/saa93/full/BQNXJd
You should look into CSS3 animations which will work in almost all the modern browsers without the use of javascript or jQuery.
Here's a JSfiddle to start with, and you will need to add into your slider.
A simple example would be like:
/* Add a keyframe with a name, also add */
#keyframes rocket {
from {
transform: translate(0px, 0);
}
to {
transform: translate(0px, -250px);
}
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
transition: 3s ease-in;
/* Use the animation name with additional properties */
animation-name: rocket;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Working snippet:
#outerspace {
position: relative;
height: 400px;
background: #fff;
color: #fff;
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
transition: 3s ease-in;
-webkit-animation-name: rocket;
-webkit-animation-duration: 3s;
animation-name: rocket;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
div.rocket div {
width: 92px;
height: 215px;
background: url('https://i.stack.imgur.com/nxion.gif') no-repeat;
}
#outerspace:hover div.rocket {
-webkit-transform: translate(0px, -250px);
-moz-transform: translate(0px, -250px);
-o-transform: translate(0px, -250px);
-ms-transform: translate(0px, -250px);
transform: translate(0px, -250px);
}
#-webkit-keyframes rocket {
from {
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-o-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
transform: translate(0px, 0);
}
to {
-webkit-transform: translate(0px, -250px);
-moz-transform: translate(0px, -250px);
-o-transform: translate(0px, -250px);
-ms-transform: translate(0px, -250px);
transform: translate(0px, -250px);
}
}
#keyframes rocket {
from {
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-o-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
transform: translate(0px, 0);
}
to {
-webkit-transform: translate(0px, -250px);
-moz-transform: translate(0px, -250px);
-o-transform: translate(0px, -250px);
-ms-transform: translate(0px, -250px);
transform: translate(0px, -250px);
}
}
<div id="outerspace">
<div class="rocket">
<div></div>
BoneOS
</div>#outerspace
</div>

How to mask an image within a given div by CSS?

Basically, I am doing a project which looks like this:
when a mouse moves over an image, the image inside a div will be enlarged through an animation, but only the part of image inside the div should be displayed, and the outer part should be clipped. Is there any way to clip the image, according to the width and height of the div? In my case, it only enlarged when the mouse hovers over it, but it is not clipped.
$('.thumbnail').on('mouseover',
function() {
$(this).find('.thumb_pic').addClass('hover_effect');
}
);
$('.thumbnail').on('mouseout',
function() {
$(this).find('.thumb_pic').removeClass('hover_effect');
}
);
.thumbnail {
display: inline-block;
position: relative;
}
.thumb_pic {
width: 500px;
padding: 5px;
transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
.hover_effect {
transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
}
.mask {
opacity: 0;
position: absolute;
top: 5px;
left: 5px;
width: 500px;
height: 500px;
background-color: rgba(0, 0, 0, 0.75);
transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
.mask:hover {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail">
<img class="thumb_pic" src="/thumb_img/thumb.png" />
<div class="mask"></div>
</div>
.thumbnail{
overflow:hidden;
width: 500px;
height: 500px;
}
you don't need the mask div. but why do you use jquery and not css? use .thumb_pic:hover instead of .hover_effect and remove your javascript.
I think the property you're looking for is "overflow: hidden"
NOTE: This isn't an answer, only a suggestion to make your code a little more efficient
Instead of using JQuery mouseover and mouseout do it with css
Instead of
.hover_effect {
transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
}
Try
.thumbnail:hover .thumb_pic {
transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
}

Flip boxes work in chrome but not Safari - jQuery or Css issue?

I have created some flip boxes on a website, that work great - In Chrome, but for some reason they are not working in Safari. I am very new to javascript, I actually had some amazing help on Stack Overflow to create these flip boxes. I just can't figure out if this is javascript, css or another issue.
If you want to check it out the site is www.dangoodeofficial.co.uk and the flip boxes in question are the SAX and DJ section at the top - the "MORE INFO" button triggers the flip.
I tried using Debugger in safari but I don't really know what I am looking for.
Any help would be really great. Thank you.
CSS
.flip3D {
float: left;
display: block;
position: relative;
width: auto;
height: 675px;
}
.flip3D .front {
position: absolute;
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D .back {
position: absolute;
-o-transform: perspective(600px)RotateY( 180deg);
-moz-transform: perspective(600px)RotateY( 180deg);
-ms-transform: perspective(600px)RotateY( 180deg);
-webkit-transform: perspective(600px)RotateY( 180deg);
transform: perspective(600px)RotateY( 180deg);
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D .front.flip {
-o-transform: perspective(600px)RotateY( -180deg);
-moz-transform: perspective(600px)RotateY( -180deg);
-ms-transform: perspective(600px)RotateY( -180deg);
-webkit-transform: perspective(600px)RotateY( -180deg);
transform: perspective(600px)RotateY( -180deg);
}
.flip3D .back.flip {
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
}
.flip3D2 {
float: left;
display: block;
position: relative;
width: auto;
height: 675px;
}
.flip3D2 .front2 {
position: absolute;
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D2 .back2 {
position: absolute;
-o-transform: perspective(600px)RotateY( 180deg);
-moz-transform: perspective(600px)RotateY( 180deg);
-ms-transform: perspective(600px)RotateY( 180deg);
-webkit-transform: perspective(600px)RotateY( 180deg);
transform: perspective(600px)RotateY( 180deg);
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D2 .front2.flip2 {
-o-transform: perspective(600px)RotateY( -180deg);
-moz-transform: perspective(600px)RotateY( -180deg);
-ms-transform: perspective(600px)RotateY( -180deg);
-webkit-transform: perspective(600px)RotateY( -180deg);
transform: perspective(600px)RotateY( -180deg);
}
.flip3D2 .back2.flip2 {
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
}
Javascript
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery('.flip-btn-1').click(function(e) {
e.preventDefault();
jQuery(".front").toggleClass('flip');
jQuery(".back").toggleClass('flip');
});
});
jQuery( document ).ready(function() {
jQuery('.flip-btn-2').click(function(e) {
e.preventDefault();
jQuery(".front2").toggleClass('flip2');
jQuery(".back2").toggleClass('flip2');
});
});
</script>
i think this is css issue because css on safari sometime dont work
properly. its work at safari and chrome.
Try It
Demo
The problem seems to be in the vendor prefixed properties of backface-visibility.
Currently you have them written as:
-webkit-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-o-transform-backface-visibility: hidden;
backface-visibility: hidden;
Rewrite all those rules as:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
This should fix your problem in Safari as it will pick the value from the -webkit vendor prefixed CSS property.

CSS/js Flip Cards

I have a card cover and back of the card. How can I flip my card from cover to back by the click on the button, like this?
Here is demo
Probably you need
html
<div class="flip3D">
<div class="back">Box 1 - Back</div>
<div class="front">Box 1 - Front</div>
</div>
css
.flip3D{ width:240px; height:200px; margin:10px; float:left; } .flip3D > .front{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); background:#FC0; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D > .back{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 180deg ); transform: perspective( 600px ) rotateY( 180deg ); background: #80BFFF; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D:hover > .front{ -webkit-transform: perspective( 600px ) rotateY( -180deg ); transform: perspective( 600px ) rotateY( -180deg ); } .flip3D:hover > .back{ -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); }
http://jsfiddle.net/GDdtS/9444/

Categories