I wish to scale the body of my website acording to resolution, but the code not seems to work:
document.body.style.transform: scale(window.screen.availHeight/2);
document.body.style['-o-transform'] = window.screen.availHeight/2;
document.body.style['-webkit-transform'] = window.screen.availHeight/2;
document.body.style['-moz-transform'] = window.screen.availHeight/2;
Try
document.body.style.transform = 'scale(' + window.screen.availHeight/2 + ')';
document.body.style['-o-transform'] = 'scale(' + window.screen.availHeight/2 + ')';
document.body.style['-webkit-transform'] = 'scale(' + window.screen.availHeight/2 + ')';
document.body.style['-moz-transform'] = 'scale(' + window.screen.availHeight/2 + ')';
Related
I'm trying to animate multiples leafs randomly. Here's my code :
var leafs = document.querySelectorAll(".leaf");
leafs.forEach(function(leaf) {
var angle = parseInt(leaf.getAttribute("data-angle")),
posY = parseInt(leaf.getAttribute("data-top")),
posX = parseInt(leaf.getAttribute("data-left")),
directionX = Math.random() < 0.5 ? -1 : 1,
directionY = Math.random() < 0.5 ? -1 : 1,
newposX = directionX * Math.round(Math.random()*10) + posX,
newposY = directionY * Math.round(Math.random()*10) + posY,
angleRotation = Math.round(Math.random()*20) + angle;
//keyframe = {transform: ['translate3d(' + posX + 'px,' + posY + 'px, 0px) rotate(' + angle + 'deg)', 'translate3d(' + newposX + ',' + newposY + ', 0px) rotate(' + angleRotation + ')']};
console.log(leaf);
leaf.animate([
{
transform: 'translate3d(' + posX + 'px,' + posY + 'px, 0px) rotate(' + angle + 'deg) '
},
{
transform: 'translate3d(' + newposX + 'px,' + newposY + 'px, 0px) rotate(' + angleRotation + 'deg)'
}
], {
iterations: Infinity,
direction: 'alternate',
easing: 'ease-in-out',
duration: 3000
});
});
In firefox & chrome it's working fine. In safari I got the following error I don't know how to deal with it. I'm using vanilla javascript.
TypeError: undefined is not a function (near '...leaf.animate...')
UPDATE
Turns out I either need a polyfill or Jquery.
PolyFill can be found here : web-animations-js
Check out web-animations-js, the w3 polyfill provided by Google. It's a bit dated but works for most Web Animations API features on at least the top 99% of browsers.
I'm learning to use onmousemove event but can't make it work, the idea is to tilt a bit an image to create an effect like it's following the mouse a kind of parallax I guess. this is what I want to achieve:
https://tympanus.net/Development/PhotographyWebsiteConcept/#
and this is the code:
<div class="container-fluid" >
<div class="row" onmousemove="myFunction(event)">
<div class="col-sm-12" >
<div class="hero" id="myDIV">
<div class="hero__back hero__back--static"></div>
<div class="hero__back hero__back--mover" id="move" style="transform: perspective(1000px) translate3d(-3.08931px, 9.6px, 48px) rotate3d(-0.96, -0.308931, 0, 2deg);"></div>
<div class="hero__front"></div>
</div>
</div>
</div>
</div>
this is JS:
<script>
function myFunction(e) {
var xVal = -1/(win.height/2)*e.clientY + 1;
var yVal = 1/(win.width/2)*e.clientX - 1;
var transX = 20/(win.width)*e.clientX - 10;
var transY = 20/(win.height)*e.clientY - 10;
var transZ = 100/(win.height)*e.clientY - 50;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("move").style.transform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)';
document.getElementById("move").style.WebkitTransform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)';
}
</script>
I think is because the div of class row has no height, you can use inspector to check the height of that div. You can try add the onmousemove function to another div, which has the full height of your image.
I'm playing around with some code which enlarges text based on the size of the div it's in. It can be seen here:
http://codepen.io/anon/pen/zZqXXd
$(function() {
var outer = $('div'), inner = $('h1'),
difference = outer.width()-inner.width(),
ratio = outer.width()/inner.width(),
style = 'translateX(' + difference/2 + 'px) ' + 'scale(' + ratio + ')';
inner.css({'webkit-transform': style, transform: style});
});
However, I'm trying to modify it to use a variable with sizes in, not get it from the div. This was my attempt that doesn't seem to work:
$(function() {
var width = "400",
var inner = $('h1'),
difference = width -inner.width(),
ratio = width /inner.width(),
style = 'translateX(' + difference/2 + 'px) ' + 'scale(' + ratio + ')';
inner.css({'webkit-transform': style, transform: style});
});
You have to replace the comma (',') after var width = "400" with a semicolon. Your current code throws a syntax error.
The corrected code would be:
$(function() {
var width = "400"; // <-----
var inner = $('h1'),
difference = width -inner.width(),
ratio = width /inner.width(),
style = 'translateX(' + difference/2 + 'px) ' + 'scale(' + ratio + ')';
inner.css({'webkit-transform': style, transform: style});
});
Rotating the picture and translating it works except, I want the rotated image to be translated. When the MoveUp button is pressed it moves the non rotated original image up.
var _pic = document.getElementById("picture");
var _rotation = 0;
var _MoveUp = 0;
function RotateLeft(){
_rotation+= 5;
_pic.style.webkitTransform= "rotate(" + _rotation + "deg)";
_pic.style.Moz-transform="rotate(" + _rotation + "deg)";
_pic.style.ms-transform="rotate(" + _rotation + "deg)";
_pic.style.transform="rotate(" + _rotation + "deg)";
}
function RotateRight(){
_rotation-= 5;
_pic.style.webkitTransform= "rotate(" + _rotation + "deg)";
_pic.style.Moz-transform="rotate(" + _rotation + "deg)";
_pic.style.ms-transform="rotate(" + _rotation + "deg)";
_pic.style.transform="rotate(" + _rotation + "deg)";
}
function MoveUp(){
_MoveUp-= 5;
_pic.style.webkitTransform("t100,100r45t-100,0");
//"translateY(" + "T" + _MoveUp + "px)";
_pic.style.Moz-transform="translateY(" + _MoveUp + "px)";
_pic.style.ms-transform="translateY(" + _MoveUp + "px)";
_pic.style.transform="translateY(" + _MoveUp + "px)";
}
Your MoveUp() function overrides the rotation transform. To chain together multiple transforms, you should do (only style.transform shown for brevity):
_pic.style.transform="translateY(" + _MoveUp + "px) rotate(" + _rotation + "deg)";
So basically you concatenate all your transforms into one string and set that as value of style.transform.
Ok, so I am trying to use jQuery to get the innerWidth() of an element #preview. I want to create a conditional that says IF x offset LEFT + #preview width is greater than page width, give it style right: z where z = #preview width + xOffset.
I apologize my code below is a mess and the syntax for .css ("right", (rightFloat + xOffset) + "px") (line 125) is off, but that's part of my problem.
<script>
$(document).ready(function(){
//append "gallery" class to all items with "popup" class
imagePreview();
$(".popup").addClass("gallery");
});
//The overlay or pop-up effect
this.imagePreview = function() { /* CONFIG */
xOffset = 40;
yOffset = 40;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").click(function(e) {
return false;
});
$("a.preview").hover(function(e) {
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
var rightFloat = e.pageX + ("#preview").innerWidth;
$("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' />" + c + "</p>");
$("#preview").hide().css("top", (e.pageY - yOffset) + "px").css("left", (e.pageX + xOffset) + "px").fadeIn("2000");
while ((left + 400) > window.innerWidth) {.css("right", (rightFloat + xOffset) + "px")
}
}, function() {
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e) {
var top = e.pageY - yOffset;
var left = e.pageX + xOffset;
var rightFloat = e.pageX + ("#preview").innerWidth;
//flips the image if it gets too close to the right side
while ((left + 400) > window.innerWidth) {.css("right", +(rightFlaot + xOffset) + "px")
}
$("#preview").css("top", top + "px").css("left", left + "px");
});
};
</script>
Try using http://api.jquery.com/offset/
if($('#preview').offset().right<0){
var right = parseInt($(window).width()) - e.pageX + xOffset;
$("#preview").css("top", top + "px").css("right", right + "px");
}else{
var left = e.pageX + xOffset;
$("#preview").css("top", top + "px").css("left", left + "px");
}
I made these fixes because I couldn't get your code to work in jsfiddle:
var xOffset = 40;
var yOffset = 40;
$("a.preview").bind('mouseover',function(e){
var rightFloat = parseFloat(e.pageX)+$("#preview").innerWidth();
var ptop = parseFloat(e.pageY) - yOffset;
var pleft = parseFloat(e.pageX) + xOffset;
$("#preview").css({"top":ptop + "px","left":pleft + "px"});
});
There's the fixes for the top half but I have no idea what you're trying to do with the bottom part (with the while loop). Can you explain what functionality you want?