I have a page with a collection of about 5 images, all scattered on the page with various absolute positions and somewhat varying sizes. My goal is to translate the images to the center of the screen using css and the hover event.
Here is my css so far:
.bbimage{
z-index: 1;
-webkit-transition: -webkit-transform 0.8s ease;
-moz-transition: -moz-transform 0.8s ease;
transition: transform 0.8s ease;
.bbimage:hover{
position:absolute !important;
/*left:50% !important;
top:250px !important; <-very jittery and choppy */
-ms-transform: scale(3) rotate(0deg)!important;
-webkit-transform: scale(3) rotate(0deg)!important;
transform: scale(3) rotate(0deg)!important;
z-index: 3;
cursor: pointer;
}
.bbplaceholder:hover + .bbimage{
position:absolute !important;
left:50% !important;
top:250px !important;
-ms-transform: scale(3) rotate(0deg) !important;
-webkit-transform: scale(3) rotate(0deg) !important;
transform: scale(3) rotate(0deg) !important;
z-index: 3;
cursor: pointer;
}
Originally I was using simple transitions, but I found them to be choppy and jittery, especially in chrome. I ended up switching to transforms, which works great for the scaling and rotation, but I'm left with two problems.
This first problem, it that the transform: translate specifies a relative translation, not to an absolute position. The second problem is the potential variable screen sizes.
My current attack plan it to append the css style using Jquery so as to specify a calculated relative translate to the window center.
Here's what I have:
<script>
$( document ).ready(function() {
$('.bbimage:hover').css('-webkit-transform','translate(500px, 500px)');
});
</script>
This doesn't appear to do anything and I'm not sure what I'm doing wrong. I'm really new to css, and moderately new to Jquery. Obviously, this is just a preliminary test to see if I can append the CSS, and I haven't calculated the window center yet.
The jquery .css method will add the styles on the element's style property and this cannot handle :hover events.
These should be added dynamicaly in a css stylesheet to work.
See here how to add dynamic stylesheet in javascript
Related
I already widely searched on Google and Stackoverflow, but couldn't find a solution.
I made a simple mobile menu with some cool animations.
Here is the codepen: Codepen link
The problem should be in these lines, but I don't understand what's wrong.
.menu a:hover:before {
right: 100%;
visibility: visible;
-webkit-transform: scaleY(1) rotate(360deg);
transform: scaleY(1) rotate(360deg);
}
When you hover the menu, the bars rotate (and it works even on chrome and opera) and change color. If you click it, they rotate again to form a X (and it works even on chrome and opera).
When the menu appears, if you hover the links there's a bar that (should) rotate and go from right to left. If you do it in Firefox it works fine, the bars on the links appears smoothly and rotate from right to left, if you do it on Chrome or Opera, they just appear in the middle and go straight to the left.
Check the codepen, I already inserted browser keywords (i.e. -webkit-) and tried some options but no way to make it working.
Thanks in advance!
.menu a:before {
-webkit-transform: scaleY(0) rotate(0deg);
transform: scaleY(0) rotate(0deg);
-webkit-transition: all 1s ease-in-out 0s;
transition: all 1s ease-in-out 0s;
}
.menu a:hover:before {
right: 100%;
visibility: visible;
-webkit-transform: scaleY(1) rotate(360deg);
transform: scaleY(1) rotate(360deg);
}
works for me if i add rotate(0deg) to the "default" state of the before pseudo element
I want to implement the fade and scale effect shown here:
http://tympanus.net/Development/ModalWindowEffects/
but for a page (with width and height of 100% of the browser) not a modal.
How can I do that using jquery or css? I tried copying the code on the page but it works best for modals not for pages that have width and height of 100%.
On the page are elements with minimum width of 1024px.
Updated the jsFiddle to show it containing elements that are at least 1024px.
You'll want to put your entire page into a wrapper element, and then give it the animation class on DOM Ready.
The CSS will be something like:
body,html{
height:100%;
margin:0;
}
.page-wrapper{
height:100%;
overflow:auto;
overflow-y:auto;
overflow-x:hidden;
transform:scale(0);
opacity:0;
transition: transform 1s ease, opacity 1s ease;
}
.page-wrapper.fade-and-scale{
transform:scale(1);
opacity:1;
}
And the jQuery will be something like this:
$(document).ready(function(){
$('.page-wrapper').addClass('fade-and-scale');
});
This solution has the benefit of:
"Growing" from the centre of the page, and falling back gracefully on older browsers
Falling back gracefully on older browsers
Not animating any fundamental css properties (ie. width or height)
Fiddle: https://jsfiddle.net/gk5c08rc/4/
Did you mean something like this?
https://jsfiddle.net/rn8ho7wL/
Wrap your page in a wrapper, and set a smaller (or whichever style you like to go FROM) into the base styles for that wrapper. Add in a transition-duration property.
#wrapper {
transition: all 2s;
-webkit-transition: all 2s;
width: 10%;
height: 10%;
background: red;
margin: 0 auto;
opacity: 0;
}
Then, define a class where you want the page to go TO. Styled the same way.
#wrapper.open {
width: 100%;
height: 100%;
opacity: 1;
}
And in your javascript file (assuming jQuery is loaded), simply apply the style.
$(function(){
$('#wrapper').addClass('open');
});
Bear in mind that CSS3 transitions are not supported by IE9 and below, and also require some vendor prefixes to be largely compatible. For using the transform, as described in another answer, apply the following:
-webkit-transform: scale(0); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: scale(0); /* IE 9 */
transform: scale(0);
Edit:
The issue with the min-width can easily be solved by adding overflow: auto to your wrapper element.
https://jsfiddle.net/rn8ho7wL/2/
I am using Bootstrap 3 framework, and the columns they use seem to do a lot of the centering of content for me
using the css
.test {
position: absolute;
z-index: 9;
left: 50%;
transform: translateX(-50%);
opacity:0;
transition: opacity 0.5s ease;
}
inside a div with position relative.
works fine in firefox, wondering what needs to be added for it to work the same in safari. I know there are browser specific css to add for cross browser compatibility
I had the same problem and I fixed it with webkit prefix:
.test {
position: absolute;
z-index: 9;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
opacity:0;
transition: opacity 0.5s ease;
}
To get rid of these problems, i suggest you use a javascript library like this:
http://leaverou.github.io/prefixfree/
You can happily code your css without adding browsers prefixes, prefixfree will do it for you!
What I am trying to do is depending on a variable I get, change the 100% rotate value in the keyframe to the new calculated value. I have no problem with using Javascript to do this, but I want it to be done in the External CSS, not inline, once changed I need to restart the animation for that time. Is this possible? If so, how? (NOTE ALL DONE CURRENTLY THROUGH BUTTON CLICK) this is not to be saved, only done to update the graphic with a new position.
.arrow {
-webkit-animation: rotate 3s linear 0 1;
animation: rotate 3s linear 0 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-play-state: paused;
animation-play-state: paused;
visibility: visible !important;
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Any help will be much appreciated! I have been trying to find something that would work for about a week now.
It is possible to change keyframes on loaded stylesheets. Here you have a stack overflow answer from 2011. And here's a link to a recent blog post about it.
So, as adeneo mentioned, it is not possible to make javascript change an external style sheet.
The thing you can do is make 2 css classes and use javascript to change the class. This way you are not using inline styles.
Also, because you are changing the class, the animation will begin from the start - as you want it.
I am trying to make the element rotate 45ยบ on click action, the toggle element should open.
If you click on it again I want it to rotate back and the toggle element should close.
I have tried a lot of codes, I would like to keep it as simple as possible.
Plugin I am using
jQuery:
$(".category-desc-toggle").click(function () {
$('.category-desc').slideToggle(300);
$(".category-desc-toggle").toggleClass("rotate45");
});
Css:
.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.category-desc-toggle {
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
What am I doing wrong? Is there an easier way(Less code)?
Indeed JuanT is right that CSS3 can accomplish the transformation, See Firefox MDN Link for more info.
jsFiddle: http://jsfiddle.net/7K6GP/4/
<div class="description-wrapper">
<div class="category-desc-toggle rotate"></div>
<div class="category-desc">Just Some Description</div>
</div>
<script>
$(".description-wrapper").click(function() {
$(this).children('div.category-desc').slideToggle(300);
$(this).children('div.category-desc-toggle').toggleClass("rotate45");
});
</script>
Without knowing your requirements, its hard to give you a full answer. Though, this can be accomplished with css3's rotate and transition property.
transform: rotate(45deg);
I have created a jsfiddle demonstrating this. http://jsfiddle.net/hGZbW/
EDIT:
If anyone is trying to accomplish this without CSS, there is a jquery plugin that supports most major browsers. To accomplish this affect for IE you would need to use the matrix filter.
https://github.com/heygrady/transform/wiki