I’m looking for some help to re-create this flip effect http://davidwalsh.name/demo/css-flip.php in Webflow.
I have a div element in my project that I want people to click on. Once they click on it I want the element to spin/flip around and show the ‘back’ of the element which will contain more information.
If anyone can help me with this I would really appreciate it.
Thanks in advance
Raj
Hey @rajsidhu ,
just an example, created in webflow:
Rebuild this structure within the visual designer:
“clickme” is the container-element which will handle the click trigger via jquery
Give it a example width and height of 300px each and an ID of “mybtn”:
flip-container will also get the 300px dimensions AND a ID by the name “mycard”.
(click div block settings icon and type in the id:)
flipper will be a relative element (set position to relative)
front and back will be absolute elements, each with also 300px width and height.
front will also get a z-index of 2. (so it will be on top of the back element).
front and back can now get individual background colors or images.
Now go to your dashboard an the Custom Code Tab
Unter “Head Code” copy and paste this css style:
<style>
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container.hover .flipper, .flip-container.flip .flipper {
transform: rotateY(180deg);
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
}
/* front pane, placed above back */
.front {
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
</style>
Within the Footer Code tab inser this Jquery Code. It will select the click event on the div with the id of “mybtn” and put the flip class on the element with the id of “mycard”.
<script>
var clicks = 0;
$( "#mybtn" ).click(function() {
if(clicks == 0) {
document.querySelector("#mycard").classList.toggle("flip");
clicks++;
} else {
document.querySelector("#mycard").classList.toggle("flip");
clicks--;
}
});
</script>
Live Preview:
http://spielekiste.webflow.io/
Cheers
Daniel
thanks for the info - now it is
I updated the jquery/js code, so that a second click will be possible.
(its not perfect but hey … )
Cheers
Hi @Daniel_Schultheiss, thanks for your quick response.
It works great, just what I wanted so thank you for helping.
If your interested in how i’m using this in my project I would love to share it with you to see what you think of it. Just let me know.
Raj
Thanks for your help with this. I have one more question.
I want to have more than one card that flips. How can I apply your methods above to more than one card? I’m sure this is easy to do but I just can’t figure it out! Need some help please.
I m not a coder, so I only know one ugly method:
Copy and paste the following code a couple of times (like how many cards you ll have and rename the DIV ID corresponding to the code.
E.g.
<script>
var clicks = 0;
$("#mybtn").click(function() {
if(clicks == 0) {
document.querySelector("#mycard").classList.toggle("flip");
clicks++;
} else {
document.querySelector("#mycard").classList.toggle("flip");
clicks--;
}
});
</script>
<script>
var clicks = 0;
$("#mybtn2").click(function() {
if(clicks == 0) {
document.querySelector("#mycard2").classList.toggle("flip");
clicks++;
} else {
document.querySelector("#mycard2").classList.toggle("flip");
clicks--;
}
});
</script>
Would be two cards.
BUT i m quite sure, that there is a smoother solution for that. But I cant help there anmyore.
It would be really easy when you have the event starting on HOVER. Then the only thing you need to do is have the css code as following.
(no Javascript would be required!!!)
<style>
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.flip .flipper {
transform: rotateY(180deg);
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
}
/* front pane, placed above back */
.front {
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
</style>
I found a solution.
First replace your JQuery Code within the FOOTER CODE section with:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
<script>
$(".card-grid").flip({
trigger: 'click'
});
</script>
Then the only thing you ll need to do is to have the following html code setup:
.grid-container needs no definitions.
card-grid only needs a height and width corresponding to the final elements.
Like e.g.
Cheers
@Daniel_Schultheiss that’s great I’ve got that to work.
I wanted more than one card so I just copied and pasted the .grid-container and it works!!
I now have two cards that flip independently when you click on either one. Exactly what I wanted so thanks @Daniel_Schultheiss for your help.
I’m just trying to understand why this works independently even when the copied .grid-container is exactly the same as the first one? How does the JS code know they are two different cards?
Yeah just duplicate the elements within the .grid-container.
Why it works? I dont know. I m not a coder.
I just searched for a working solution. Maybe grab the .js file and view the code itself or ask someone who is a better experienced web coder.
@Daniel_Schultheiss this is briliant. I can’t use it right now but I am definitely adding this to the toolbox for future reference.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.