I am trying to add both flip and zoom effects, But I am able to achieve only one effect.
Use case is when I click on the Image the image will zoom, now i need to add the flip effect before the mouseleave the image.
Can anyone please help me out with the output using my code.
here it is what I have tried :
HTML
<div class="flip">
<div class = 'card'>
<img src="http://cdn.ndtv.com/tech/images/doodle_for_google_2013.jpg" class="zoom_img" />
</div>
</div>
CSS
.zoom_img {
height: 250px;
width: 250px;
/* -moz-transition: -moz-transform 0.1s ease-in;
-webkit-transition: -webkit-transform 0.1s ease-in;
-o-transition: -o-transform 0.1s ease-in; */
-webkit-transition: -webkit-transform 0.5s ease-in;
-o-transition: -webkit-transform 0.5s ease-in;
}
.zoom_img_press {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card .flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
Javascript
$(document).ready(function() {
$('.flip').click(function(){
$(this).find('.zoom_img').addClass('zoom_img_press').mouseleave(function(){
$(this).removeClass('zoom_img_press');
});
});
$(this).find('.zoom_img').addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
});
});
Demo
Try this i think it will help you..
Class with multiple transform.
.zoom-flipper{
-moz-transform: scale(2.2) rotatex(-180deg);
-webkit-transform: scale(2.2) rotatex(-180deg);
-o-transform: scale(2.2) rotatex(-180deg);
transform: scale(2.2) rotatex(-180deg);
}
Corresponding Script:
$('.flip').click(function(){
$(this).find('.zoom_img').addClass('zoom-flipper').mouseleave(function(){
$(this).removeClass('zoom-flipper');
});
});
Here is the Demo
Create two separate JavaScript functions then write jQuery code to manipulate the css for the image within the functions. JQuery css manipulation code example:
$(".className").css({"background-color":"black","font-size":"12px"});
You can set any css property within the curly brackets.
Then you can call the JavaScript functions on the elements DOM events. So the zoom function will be called with the onClick event and the flip function will be called on the onMouseOut event.
Related
Currently, my notification popup work but I would like to do this animation without JS/JQuery (only animation). Also there is an issue with clicking. When you click outside when popup is open, then work normally. But if you click on this text OPEN, then ending animation won't work.
Animation appearing and decreasing from right top to bottom and closing from bottom to top. It should work in both directions but alternately. It currently only works when you want close popup.
JSFiddle
CSS
.e-p-main {
margin-top: 40px;
height: auto;
width: 200px;
background: #fff;
border: 1px solid #ddd;
z-index: 99;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}
.tsc_1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
Script
$(document).ready(function() {
$("#e_a_c").click(function(e) {
$("#t_1").toggle();
setTimeout(function() {
$("#t_1").addClass("tsc_1");
}, 1);
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#t_1 *')) {
$("#t_1").removeClass("tsc_1");
setTimeout(function() {
$('#t_1').removeAttr('style');
}, 150)
}
});
});
HTML
<a class="open-edit-popup" id="e_a_c">OPEN</a>
<div id="e_a_p">
<div class="e-p-cont">
<div class="e-p-main" id="t_1">
<div class="e-p-text-1 dps">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>
Probably NOT the answer; more a starter.
I don't think you will reach your expectations with a full CSS solution, just because closing your menu by clicking outside of it can't be done without javascript.
Anyway, this is a working version with javascript / jquery
https://jsfiddle.net/piiantom/98sfoLcg/
I reworked the javascript part in order to have a functional event management.
The bugs you are refering to are fixed.
HTML
<a class="open-edit-popup" id="e_a_c">OPEN</a>
<div id="e_a_p">
<div class="e-p-cont">
<div class="e-p-main" id="t_1">
<div class="e-p-text-1 dps">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>
JAVASCRIPT
$(document).ready(function() {
$("#e_a_c").click(function(e) {
e.stopPropagation();
e.preventDefault();
if ($("#t_1").hasClass("tsc_1")) {
$("#t_1").removeClass("tsc_1");
} else {
$("#t_1").addClass("tsc_1");
}
});
$(document).click(function(e) {
if ($("#t_1").hasClass("tsc_1")) {
$("#t_1").removeClass("tsc_1");
}
});
});
CSS
.e-p-main {
margin-top: 40px;
height: auto;
width: 200px;
background: #fff;
border: 1px solid #ddd;
z-index: 99;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}
.tsc_1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
For the full CSS version, this is a working version by using the checkbox input hack. But, the opening / closing is only managed by clicking on OPEN. Menu is not closed when clicking outside.
https://jsfiddle.net/piiantom/oht40Lk5/
Besides, all your menu is nested inside a <label>, which is not that good
HTML
<label>OPEN<input type="checkbox" class="open-edit-popup" id="e_a_c"/>
<div id="e_a_p">
<div class="e-p-cont">
<div class="e-p-main" id="t_1">
<div class="e-p-text-1 dps">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>
</label>
CSS
#e_a_c{
position: absolute;
opacity: 0;
cursor: pointer;
}
#e_a_c:checked+#e_a_p #t_1{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.e-p-main {
margin-top: 40px;
height: auto;
width: 200px;
background: #fff;
border: 1px solid #ddd;
z-index: 99;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}
This is my first time using stackoverflow so please be patient with me, heh.
I'm a relative newbie when it comes to HTML, CSS and JS, but I gotta use them for work every now and then. Today I've applied Magnific Popup to a site I'm working on. I'm specifically trying to use the "Open with fade-zoom animation" example, and modify it to fit my needs of course. The popup is working, indeed, but the div for the popup box itself isn't hiding, despite having mfp-hide as its class. It's weird because the Dreamweaver preview does hide it, but Chrome does not (I'm on latest version of Chrome for Windows, if it helps.) Also, the lightbox that the Magnific Popup site displays behind every popup is nowhere to be seen.
Here's a jsfiddle with my code. The posting interface says I need to post my code here so here it goes:
Here's my HTML:
<div>
<a class="popup-with-zoom-anim" href="#dialog">
<span>CLICK HERE TO DISPLAY DIALOG</span>
</a>
</div>
<div id="dialog" class="zoom-anim-dialog mfp-hide">
<h1>DIALOG TITLE</h1>
<br><br>
<p>Dialog text</p>
</div>
My JS (located inside a script block right before my </body> tag)
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
And just in case, my CSS (located inside a style block right over the script block with the JS)
/* Styles for dialog window */
#dialog {
background: white;
padding: 20px 30px;
text-align: left;
max-width: 700px;
position: relative;
box-shadow: 1px 1px 10px 5px rgba(0,0,0,0.25);
left: 50%;
right: 50%;
z-index: 999;
top: 100px
}
/**
* Fade-zoom animation
*/
/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
display:block;
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
}
/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
That's all I've got. I'm sorry if this question's been answered already, I have not been able to find it. Let me know if there's anything else I can provide to help solve the problem. And thanks in advance for reading. Cheers.
I had a similar issue where the mfp-hide class did nothing. It was caused by not properly including Magnific Popup's css. Check to see if this is your root cause too. You can include the following:
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/magnific-popup.min.css" rel="stylesheet">
I am building an overlay with simple transform mocking slide-down effect. I works fine in Chrome and Safari, but it doesn't work in Firefox and i don't know why.
Here is my css:
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba($off-canvas-bg, 0.95);
z-index: 99;
overflow: auto;
}
.overlay-slidedown {
visibility: hidden;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
-moz-transition: -moz-transform 0.4s ease-in-out, visibility 0s 0.4s;
transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}
.overlay-slidedown.open {
visibility: visible;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
-moz-transition: -moz-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
and html:
<div class="overlay overlay-slidedown">
</div>
I am adding open class with javascript:
toggleMenu: function ( ) {
var overlay = this.$('.overlay');
if( overlay && overlay.hasClass('open') ) {
overlay.removeClass('open')
}
else if(overlay){
overlay.addClass('open')
}
},
Try adding this to .overlay
transform-style: preserve-3d;
Quite often when FF transforms are not right, this is missing from the appropriate element. Webkit builds seem not to require this to establish the required stacking contexts, but Chrome/Safari suffer funny effects with the z-index on adjacent sibling elements in such cases.
I'm having an issue in chrome with a css3 transform rotate transition. The transition is working fine but just after it finishes the element shifts by a pixel. The other strange thing is that it only happens when the page is centered (margin:0 auto;). The bug is still there if you remove the transition as well.
You can see it happening here:
http://jsfiddle.net/MfUMd/1/
HTML:
<div class="wrap">
<img src="https://github.com/favicon.ico" class="target" alt="img"/>
</div>
<div class="wrap">
<div class="block"></div>
</div>
CSS:
.wrap {
margin:50px auto;
width: 100px;
}
.block {
width:30px;
height:30px;
background:black;
}
.target,.block {
display:block;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
Comment out the margin:0 auto; line to make it go away.
Anyone have any ideas of how to stop this while keeping the page centered?
I'm using Version 24.0.1312.57 on OSX 10.6.8
Cheers
Actually just add this to the site container which holds all the elements:
-webkit-backface-visibility: hidden;
Should fix it!
Gino
I had the same issue, I fixed it by adding the following to the css of the div that is using the transition:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
Backface is used for 3D-based transitions but if you are only using 2D there is no need for the extra stuff.
will-change: transform; on the element helped to me in 2022 (Chrome). No more 1px shift of the text inside the element after zoom animation.
there is something unusual in the relation between the body dimension and the structure of the transform. I don't in fact is because the fiddle iframe that contains the preview of the code.
Anyway, I will suggest this approach instead:
body{
width:100%;
float:left;
}
.wrap {
margin: 50px 45%;
width: 5%;
float: left;
}
.block {
width:30px;
height:30px;
background:black;
}
.target,.block {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
Here is the updated fiddle
For 3d transform use this instead:
-webkit-transform: perspective(1px) scale3d(1.1, 1.1, 1);
transform: perspective(1px) scale3d(1.1, 1.1, 1);
I have tried for two days now to find a way to rotate my image while i input a button. What i want help with is to help me get the code to rotate a image in Javascript called images[0] around its own axis. I know this may look hard but i have tried aswell and I really need help from professionals.
Based upon Xotic750's jsfiddle, here is an example using animation and #keyframes (using -webkit- prefix, modify for other browsers).
CSS
#-webkit-keyframes r {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#r:hover ~ img {
-webkit-animation: r 2s infinite linear;
}
#-webkit-keyframes y {
0% { -webkit-transform: rotateY(0deg); }
100% { -webkit-transform: rotateY(360deg); }
}
#y:hover ~ img {
-webkit-animation: y 2s infinite linear;
}
HTML
<button id="r">R</button>
<button id="y">Y</button>
<br/> <br/>
<img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" />
Paul S has provided a much better answer.
Here is an example of rotating an image 90 degrees
CSS
#container {
position: relative;
width: 450px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
#card {
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#container:hover #card, #container.hover_effect #card {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}
HMTML
<div id="container">
<div id="card">
<img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" />
</div>
</div>
jsfiddle