I'm looking to create something akin to the Mac App Dock. Basically, I have an number of divs all next to each other with the same class, and a unique ID (done through php).
Currently, when you hover over one element, it magnifies it using transform, however this doesn't affect the elements adjacent to them.
I'm wondering if there's a way to essentially make it so item-2 has a hover effect of transform:scale(2.0), and upon hovering over that element, item-1 & item-3 would get an effect of transform:scale(1.5);
Although, I imagine this is impossible in css. If so, is there a way I can achieve this effect in php or javascript somehow?
This is tricky since transform: scale doesn't seem to behave consistently across browsers.
I put together some CSS and Javascript to do what you described, although making it look good on all browsers would take much more time.
Try out my demo here: CodePen
HTML
<ul id="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
CSS
#list li:hover {
zoom: 2;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
position: relative;
z-index: 999;
}
.beside {
zoom: 1.5;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
Javascript (jQuery)
$('#list li').on("mouseenter", function() {
$(this).prev().addClass("beside");
$(this).next().addClass("beside");
});
$('#list li').on("mouseleave", function() {
$(this).prev().removeClass("beside");
$(this).next().removeClass("beside");
});
Related
I'm aiming to apply custom animation speeds to the Foundation 6 drilldown menu in Foundation 6 For Sites. I know that in _settings.scss, you a can alter the initial click animation through $drilldown-transition, however the animation parameters are ignored when going back a level in the drilldown.
I've checked dist > assets > css > app.css to see if some other parameter or some kind of hidden bit of CSS was controlling this, but it's evident to me that it's handled via JS beyond just adding / removing classes.
TLDR; I'm looking for insight on how to control the animation speed / style of the drilldown menu when going back a level vs going forward a level.
EXP: https://media.giphy.com/media/X8M8Hax10K9SslPN1v/giphy.gif
The close-speed was due to the following lines, viewable in dist > assets > css > app.css
.drilldown .is-drilldown-submenu.is-active {
z-index: 1;
display: block;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.drilldown .is-drilldown-submenu.is-closing {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
The shift from -100% to 100% is too extreme to really get the smooth feel you'd expect. Reducing 100% to 5% resolved the issue.
.mobile_nav > .grid-x > .cell > .is-drilldown .drilldown .is-drilldown-submenu.is-closing {
-webkit-transform: translateX(5%);
-ms-transform: translateX(5%);
transform: translateX(5%);
}
I would like to convert the following CSS animation into a JavaScript animation so that it functions on click of a div called "button".
#book1:hover>.hardcover_front {
-webkit-transform: rotateY(-145deg) translateZ(0);
-moz-transform: rotateY(-145deg) translateZ(0);
transform: rotateY(-145deg) translateZ(0);
z-index: 0;
}
I understand how to do the transformations in Javascript, just wondering how to do the trigger, so for the button on click to affect the .hardcover_front of #book1
I was creating scroll triggered css animations, and I'm having trouble with my off screen transitions from the right. The animation works exactly how I want it to, but it's creating unwanted whitespace on the side of the page. The size of this white space seems to correspond to the transition I set, and doesn't go away until I've triggered all the animations on the page. Any ideas on how to remove this whitespace so that the elements are moving in from off the canvas?
Here is the link to my testing environment
http://lamp.cse.fau.edu/~zellis1/test/
/*Slide in right*/
.slidein-right{
opacity: 0;
-moz-transition: all 750ms ease-out;
-webkit-transition: all 750ms ease-out;
-o-transition: all 750ms ease-out;
transition: all 750ms ease-out;
-moz-transform: translate3d(100px, 0px, 0px);
-webkit-transform: translate3d(100px, 0px, 0px);
-o-transform: translate(100px, 0px);
-ms-transform: translate(100px, 0px);
transform: translate3d(100px, 0px, 0px);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.slidein-right.in-view{
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
Not related to css animation, one thing you could do to fix this, is to add overfrlow-x: hidden; to your body.
body{
overflow-x: hidden;
}
As your are using transform to animate the elements and CSS specification for transforms (the method by which Animate.css moves the elements) specifies that elements should affect the overflow of the browser and hence the body overflows until all the transform animation are over.
you can add overflow:hidden (better overflow-x:hidden as you are transforming in x-direction only) on the containing element.
Add this CSS
animation-fix{
overflow-x:hidden;
}
and add class animation-fix to body and remove it on all animation completes.
you can do this by checking the number of divs with .animation-element.in-view class is equal to the number of divs with .animation-element class you have in html.
This guy here is always your friend when you get rogue white spaces coming out the woodwork:
overflow: hidden;
overflow-x: hidden;
overflow:y: hidden;
If the anomaly is directly to the right, then probably overflow-x will be the guy you want. I also recommend checking it out in other web browsers after to make sure it is completely solved.
Check Chrome, Firefox, Safari, and IE or Edge. Just to get a nice rounded out sample. Check it on a smartphone too. Sorry my background is QA, I'm just trying to install some bonus logic because consistency is key.
As part of this, I highly recommend pressing say F12 and directly editing the CSS on the page because it might be occurring on a different layer than you expect.
When I use the tranform property with one transformation everything works fine but I get 'invalid property' when they are combined. I'm testing with Opera
Does not work
transform: translate(300,0px) rotate(90deg);
Does work
transform: translate(300,0px);
You should use px values instead of single.
Do:
transform: translate(300px, 0px) rotate(90deg);
Instead of:
transform: translate(300, 0px) rotate(90deg);
Hope this helps!
Is there a library/simple way to flip an image?
Flip image like this:
AABBCC CCBBAA
AABBCC -> CCBBAA
I'm not looking for animations, just flip the image.
I've googled to no avial and only found a complex version that utilized SVG on MozillaZine which I'm not confident that it'll work cross-browser.
The following CSS will work in IE and modern browsers that support CSS transforms. I included a vertical flip class just in case you might want to use it too.
.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph;
}
.flip-vertical {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv; /*IE*/
filter: flipv;
}
Take a look at one of the many reflection.js type libraries, They are pretty simple. In IE they will take and use the 'flipv' filter, there is a 'fliph' filter too. Inside of other browsers, it will create a canvas tag and use the drawImage. Although Elijah's answer probably supports the same browsers.
Just dug up this answer while trying to fix a bug, while the suggested answer is correct I have found that it breaks most modern CSS Linting rules regarding the inclusion of all vendor rules for the transform. However, including the -ms-tranform rule causes an odd bug in IE9 where it applies the filter and -ms-transform rules causing an image to flip and flip back again.
Here is my suggested improvement which also supports CSS Lint rules:
.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
-ms-transform: scaleX(1); /* linting rule fix + IE9 fix */
transform: scaleX(-1);
-ms-filter: fliph;
filter: fliph;
}
.flip-vertical {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
-ms-transform: scaleY(1); /* linting rule fix + IE9 fix */
transform: scaleY(-1);
-ms-filter: flipv;
filter: flipv;
}
If you only want to flip a background image you can use the class on the internal elements inside a flipped div. Basically you're flipping the internal elements with the main div, but flipping each of them back. Works in Firefox anyway.
Like this:
<div id="container" class="flip-horizontal"> <!-- container would have your background image -->
<h3 class="flip-horizontal">Hello There!</h3>
<p class="flip-horizontal">Here is some text</p>
</div>