January 21, 2014

Weebly Tricks #21 - Flipping Animation Effects on Photos

Posted by Domingo Tambasacan at 1/21/2014

Add a Flipping Animation Effects to Photos in Weebly

This Weebly trick was possibly made while I was reading comments on Weebly's Fan Page. One of the member is asking on how to implement an image flipping effect he found at davidwalsh.name/css-flip. Ok guys, I would like to remind you that the beauty of CSS is most appreciated using the latest version of your browser. I recommend Chrome specifically. So what is the effect?As you can see on the demo, the image flips showing what's in behind either by x or y axis.



1. Ok, the code we will be using comes from one of the comment on David Walsh's article, it was modified to be compatible with chrome and I did a little editing to fit in Weebly.

2. Go to <head>, try the page <head> first. (click here for <head> help)

3. Once you've seen it, just below it or inside its box paste the following code:

<style>

/* simple */
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;

border: 1px solid #ccc;
}

.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
filter: FlipH;
-ms-filter: “FlipH”;
}

.flip-container, .front, .back {
width: 320px;
height: 427px;
}

.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;

-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;

transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
padding: -5 -5 -5 -5px;
position: absolute;
top: 0;
left: 0;
}

.front {
background: lightgreen;
z-index: 2;
}

.back {
background: lightblue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;

-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}

.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background: url(logo.png) 0 0 no-repeat;
}

.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 2em;
}

.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
}

/* vertical */
.vertical.flip-container {
position: relative;
}

.vertical .back {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}

.vertical.flip-container .flipper {
-webkit-transform-origin: 100% 213.5px;
-moz-transform-origin: 100% 213.5px;
transform-origin: 100% 213.5px;
}

.vertical.flip-container:hover .flipper {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}

</style>

You can always edit or remove some short tags on the code specially the background used and other elements. Now save it.

4. To apply the HTML on page simply drag one "embed code" and paste the following:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
<img src="http://theweeblytricks.weebly.com/files/theme/1.png">
</div>
<div class="back">
<!-- back content -->
<img src="http://theweeblytricks.weebly.com/files/theme/2.png">
</div>
</div>
</div>

The bold text defines the axis on how the image will turn, you can change that to "vertical flip-container" for a vertical effect. As you can see I used an image only for the demo but you can always add more elements like titles and paragraphs. The HTML is divided into two which is for your front content and for the back. Now insert elements on both and experiment.

See, simple isn't it! Post comments if you like, ask questions if you don't get it. Thanks for reading.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

1 comment:

  1. So glad to see a post on this topic. Thanks for sharing information on flipping animation effects on photos.TCFC is a animation movie production company that delivers the best results.

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top