I have this element that after executing a certain javascript function, will make its css transform value to :
-webkit-transform : translateX(25px) translateY(25px) scale(1);
how do i get that value through javascript in the form of
"translateX(25px) translateY(25px) scale(1)" ?
What I really want to achieve is that I want to add a "rotate(360deg)" on mouseenter. I'm thinking i'll be able to achieve this if I get hold to its current transform value.
the :hover pseudo-class wouldn't do the trick because it will be overwritten by the current value of -webkit-transform
EDIT:
I forgot to mention that this is actually for a plugin i'm doing. The translate values are being set through html data-attributes and being extracted through jQuery's .data().
If the values are fixed an not computed by the script, I think that a better choice is to keep of css form javascript, so instead of hardcoding the animation value in your script you could simply create a couple of css rules, e.g.
.transformed {
-webkit-transform: translateX(25px) translateY(25px) scale(1);
}
.transformed:hover {
-webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg);
}
After the first script execution, just add the .transformed class to your element.
Then you could leave the pseudoclass :hover work for you, without the need to use javascript for this task.
Otherwise if you need to mantain the 360deg rotation also on mouseleave, just change the last rule into
.transformed.mouseenter {
-webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg);
}
and on mouseenter event just add the .mouseenter class.
I'm not sure what the context of your problem is, but it sounds like you need to use a css3 transition library such as jQuery Transit since you are using Javascript heavily. Examples:
$(".box").on("mouseenter", function () {
$(".box").transition({x: '+=25', y: '+=25', scale: 1.5, rotate: 360 }, 500);
});
$(".box").on("mouseleave", function () {
$(".box").transition({x: '-=25', y: '-=25', scale: 1, rotate: 0 }, 500);
});
var scaleFactor = 0.25;
$(".boxGrow").on("click", function () {
$(".boxGrow").transition({scale: '+=' + scaleFactor }, 500);
});
JSFiddle Demo
Related
Using Unveil (https://luis-almeida.github.io/unveil/) a lightweight js lazy load plugin.
The site features an example of a callback. I am using it just fine, but would like to add an additional animation to the opacity.
I am not a coder (front end designer) so all that I've tried is basically just a hack and slash attempt at adding another 'this.style' line.
The current script is as follows:
$("img").unveil(200, function() {
$(this).on("load", function() {
this.style.opacity = 1;
});
});
I am hoping someone can show me how to add another call to load another CSS effect to the above script yet keep the opacity as well. I would like to add the following CSS animation alongside the opacity that's currently being used.
img {
animation: 1s ease-out 0s 1 slideIn;
}
#keyframes slideIn {
0% {
transform: translateY(-10%);
}
100% {
transform: translateY(0);
}
}
To add a new CSS effect, you don't need to add a new callback. You can add all CSS effects right after the other. All the effects that you give will run one by one in a sequential manner.
You could do something like this:
$("img").unveil(200, function() {
$(this).on("load", function() {
this.style.opacity = 1;
this.style.animation = "1s ease-out 0s 1 slideIn"
});
});
By using the from and to keywords of the keyframes rule the animation is declared by specifying the needed property of the element in question. However, the from keyword seems to be expecting an element's property with a predefined value - I have tried auto, inherit, initial, etc. with no avail. The problem is that I want to move an element down by specifying top, but I don't know the initial value (possible to achieve with js, but I'm hoping there's a different solution).
Here are the 2 fiddles:
http://jsfiddle.net/v4m92/
and
http://jsfiddle.net/hExdU/
#keyframes kf {
from {
top: 0;
}
to {
top: 10px;
}
}
The difference lies merely in giving top a predefined value - as it can be seen the animation works only in 1 of the examples. Is there something that can be done to make the other one work without figuring out the dimensions with javascript and modifying the underlying animation rule?
like 2rror404 suggested, you could use CSS transform to accomplish the same thing.
#keyframes kf {
from {
transform: translateY(0);
}
to {
transform: translateY(100px);
}
}
(shown without browser prefixes for brevity)
I am looking for a way to control the CSS for a specific item on hover. Since it's not an element directly in the parent lineage, I can't use CSS.
<article class="portfolio-item web">
<a data-rel="prettyPhoto" href="http://vimeo.com/34266952">
<img src="http://localhost/wordpress/wp-content/themes/dewuske/images/portfolio/introspection.jpg" alt="">
<span class="genericBeaconIsotope">
<span class="beaconContainer">
<span class="beaconBar"></span>
<span class="beaconCircle1"></span>
<span class="beaconCircle2"></span>
<span class="beaconText">Introspection</span>
</span>
</span>
</a>
</article>
I'm trying to hover on beaconContainer and have the image be affected. It should function like a rollover. Here is what I'm trying to accomplish in CSS:
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
transition: all 1s ease-out 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 0s;
}
How would I go about doing this? I know very little JavaScript or jQuery or how to call events from them, especially like this. Thanks
JQuery provides several methods which may be helpful to you.
You could go about manually setting the CSS using the .css() method, or apply CSS classes dynamically to the elements (this is would be my preferred way) using the .addClass() and .removeClass() methods, reacting to user events such as mouse overs, etc.
NB: This is specifically a jQuery solution to the problem presented by your question.
In jQuery, you can use the addClass and removeClass functions. Keep all of the css in the css file, and then just change the class of each element.
http://api.jquery.com/addclass/
You need to create a CSS class with the styles you want to apply:
.rollover {
/* your styles here */
}
and a bit of jQuery that enabled your styles when mouse is over the beaconContainer:
$('article.portfolio-item.web').each(function(index, articleElem) {
var article = $(articleElem);
var image = article.find('img');
var container = article.find('.beaconContainer');
container.mouseover(function() { image.addClass("rollover"); });
container.mouseout(function() { image.removeClass("rollover"); });
});
It will also work if you have multiple articles on page.
You can create the CSS class and then add it to the container when you hover and then remove the class once you mouse out:
$('.beaconContainer img').hover(function(){
$( this ).addClass(cssClassName);
}, function() {
$( this ).removeClass(cssClassName);
}
);
I found the following code while reading a related question at this page: Rotate a webpage clockwise or anticlockwise
html {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
--
My question is how do I set this CSS via JavaScript?
When a visitor clicks on an image, I want to use JavaScript to modify the HTML tag's style using the settings above.
Thanks in advance.
The easiest way to do this is by putting this in a class, and assigning that class dynamically using JavaScript:
CSS:
html.rotateme {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
JavaScript:
document.documentElement.setAttribute('class', 'rotateme'); //Note that this will override the current class
Since you're using a very recent CSS feature, you probably don't need to support older browsers.
Therefore, you can also use Element.classList to add a class.
To prevent this from throwing an exception in older browsers, you can check for the existance of it first:
JavaScript:
document.documentElement.classList && document.documentElement.classList.add('rotateme'); //This won't override the current class
See also: Change an element's class with JavaScript
You use the style attribute on the HTML node.
Something like this will do it:
var htmlNode = document.documentElement;
htmlNode.style.webkitTransform = 'rotate(180deg)';
htmlNode.style.mozTransform = 'rotate(180deg)';
Then, to undo the rotate, set the values to an empty string:
var htmlNode = document.documentElement;
htmlNode.style.webkitTransform = '';
htmlNode.style.mozTransform = '';
Simple
$('#wrap').on('click',function(){
$('html').css('-webkit-transform','rotate(180deg)');
$('html').css('-moz-transform','rotate(180deg)');})
define a class for this:-
.htmlrotate {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
onclick of the button, run this:-
document.documentElement.classList.add('htmlrotate');
$('html').bind('click', function () {
$('html').css({
'-webkit-transform': 'rotate(90deg)',
' -moz-transform': 'rotate(90deg)'
})
});
**JQUERY**
$("#imgID").on("click", function(){
$('html').css({"-webkit-transform": "rotate(180deg)", "moz-transform": "rotate(180deg)"});
});
only js
use user2428118's answer, it's a solid solution.
I'm finally getting round to creating a website for my print design portfolio. I know exactly what I'm trying to achieve but being fairly new to web design I have found some limitations with the knowledge I have....
I have used css3 transitions (currently they only work in Chrome and Safari) to make flip cards which are triggered on hover - these work perfectly and are exactly what I am looking for. All I am now trying to do is add an JavaScript function (using jQuery) that permanently flips the card on click. I don't want it to disable the on hover function which is pure css though.
I have found this extremely difficult to implement.
The site is here:
www.samueljamesdesign.com
Any help would be greatly appreciated.
Just modify your CSS so that the rotation is also triggered by adding a class. For example, change this rule:
#card-container:hover .front {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
To this:
.card-container:hover .front,
.card-container.selected .front,{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
Note that you cannot use #card-container, as it is invalid to have multiple elements with the same ID in the document. Set card-container as the class instead.
To make things stay flipeed when clicked, with your new CSS, you do:
var tiles = $('#tiles .card-container');
tiles.click(function() {
tiles.removeClass('selected');
$(this).addClass('selected');
//To change the image in maincontent to match the
//one in the flipcard clicked on:
$('#maincontent .img-wrapper').empty().append($(this).find('img').clone());
});