I am trying to learn how to build a parallax site and I decided to create a little scene with a car and a road. I have the clouds and car along with the background and a few items working well. However, the road has a hill on it and I want to figure out how at a specific spot on the page I can rotate the car and have it move up as it goes up the road then rotate it back down and move it down as it goes down the road. I can't figure out the best way to determine where and when to rotate and move up and then back down. If anyone could help me that would be awesome. I have the code put on a fiddle for you to view. http://jsfiddle.net/xmukh8p8/
and the javascript is here:
$(window).bind('scroll', function(e){
parallaxScroll();
});
function parallaxScroll() {
var scrolled = $(window).scrollTop();
var rotate = 1;
console.log(scrolled);
$('.cloud1').css('background-position', (0-(scrolled*.5)) + 'px 10px');
$('.cloud2').css('background-position', (0-(scrolled*1)) + 'px 10px');
$('.car').css('left', (0+(scrolled*.2)) + 'px');
if (scrolled > 1026 && scrolled < 1396) {
$('.car').css('transform', 'rotate(' + (rotate--)+ 'deg)');
}
}
$.jInvertScroll(['.scroll'], {
height: 6000,
onScroll: function(percent) {
//code
}
});
I've begun to implement what you want, you'll need to fine tune some of the values though to get it perfect. Implementing the height shouldn't be too difficult with this:
EDIT: Improved code and added fiddle link
function parallaxScroll() {
var scrolled = $(window).scrollTop();
console.log(scrolled);
$('.cloud1').css('background-position', (0-(scrolled*.5)) + 'px 10px');
$('.cloud2').css('background-position', (0-(scrolled*1)) + 'px 10px');
$('.car').css('left', (0+(scrolled*.2)) + 'px');
console.log(scrolled);
if (scrolled > 1026 && scrolled < 1396) {
$('.car').css('-webkit-transform', 'rotate(' + ((1026-scrolled)/20)+ 'deg)');
}
else if(scrolled >= 1396 && scrolled < 2000){
$('.car').css('-webkit-transform', 'rotate(' + (((1026-1396)/20)-(1396-scrolled)/20)+ 'deg)');
}
else if(scrolled >= 2000 && scrolled < 2197){
$('.car').css('-webkit-transform', 'rotate(' + (((1026-1396)/20)-((1396-2000)/20)+((2000-scrolled)/20))+ 'deg)');
}
else{
$('.car').css('-webkit-transform', 'rotate(' + 0+ 'deg)');
}
}
Updated Fiddle
EDIT 2:
Added in the translation for good measure. Again some tweaking is needed but the logic is there:
function parallaxScroll() {
var scrolled = $(window).scrollTop();
console.log(scrolled);
$('.cloud1').css('background-position', (0-(scrolled*.5)) + 'px 10px');
$('.cloud2').css('background-position', (0-(scrolled*1)) + 'px 10px');
$('.car').css('left', (0+(scrolled*.2)) + 'px');
console.log(scrolled);
if (scrolled > 1026 && scrolled < 1396) {
$('.car').css('-webkit-transform', 'rotate(' + ((1026-scrolled)/20)+ 'deg) translate(0px,'+(-((scrolled-1026)/3))+'px)');
}
else if(scrolled >= 1396 && scrolled < 2000){
$('.car').css('-webkit-transform', 'rotate(' + (((1026-1396)/20)-(1396-scrolled)/20)+ 'deg) translate(0px,'+(-(1396-1026)/3)+'px)');
}
else if(scrolled >= 2000 && scrolled < 2197){
$('.car').css('-webkit-transform', 'rotate(' + (((1026-1396)/20)-((1396-2000)/20)+((2000-scrolled)/20))+ 'deg) translate(0px,'+(-(1396-1026)/3+((scrolled-2000)/3))+'px)');
}
else{
$('.car').css('-webkit-transform', 'rotate(' + 0+ 'deg)');
}
}
Fiddle with translation and rotation
Related
I have a school homework where I have this issue: if you start to rotate the image, then move the mouse out of the gray area and back into the area again, but at a different location, the image "jumps": it undergoes a major rotation change. I need to avoid this inconvenience.
function init(JQuery) {
let coordX = JQuery.pageX;
let coordY = JQuery.pageY;
$(".zoneSouris").mousemove(function(event) {
if (event.buttons == 1) {
$(".zoneImage").css({
'-webkit-transform': 'rotateX(' + event.pageY + 'deg) rotateY(' + event.pageX + 'deg)',
'-moz-transform': 'rotateX(' + event.pageY + 'deg) rotateY(' + event.pageX + 'deg)',
});
} else if (event.buttons == 2) {
$(".zoneImage").css({
'-webkit-transform': 'rotate(0)',
'-moz-transform': 'rotate(0)',
});
}
});
$(".zoneSouris").bind("contextmenu", function(e) {
return false;
});
}
init($);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<div class="espaceRotation">
<div class="elemEspace zoneImage">
<img src="https://i.imgur.com/eNqPru1.png" />
</div>
<div class="elemEspace zoneSouris">
<span>Manipulez avec la souris !</span>
</div>
</div>
</main>
I'm trying to scale my SVG with g.animate({ transform: "s2.5,2.5," + bbox.cx + "," + bbox.cy }, 0); and then animate wheelAnimation(bbox.cx, bbox.cy, 1500);
var i = 0;
function wheelAnimation(cx, cy, speed){
i++;
g.animate(
{ transform: "r360," + cx + ',' + cy}, // Basic rotation around a point. No frills.
speed, // Nice slow turning rays
function(){
if(i == 5)
speed = 5000;
g.attr({ transform: 'rotate(0 ' + cx + ' ' + cy}); // Reset the position of the rays.
wheelAnimation(cx,cy, speed); // Repeat this animation so it appears infinite.
}
);
}
But my SVG didn't scaling. It's only rotates. If I remove rotation - SVG scaling. How to combine it to immediately scale and then animate rotation?
Plunker example
I've never used Snap.svg but you might try this:
var i = 0;
function wheelAnimation(cx, cy, speed, scale){
i++;
g.attr({ transform: "r0 " + cx + " " + cy + " s" + scale + "," + scale + "," + cx + "," + cy }); //Reset + Scale setup
g.animate({
transform: "r360," + cx + "," + cy + " s" + scale + "," + scale + "," + cx + "," + cy }, // Basic rotation around a point. No frills.
speed, // Nice slow turning rays
function(){
if(i == 5)
speed = 5000;
wheelAnimation(cx, cy, speed, scale); // Repeat this animation so it appears infinite.
}
);
}
Hope this helps you :)
See Plunkr
To display Image I used colorbox..In that I have add rotate-left and rotate-right to rotate the image..
The code is:
var rotate_right = document.getElementById('cboxRight');
$(rotate_right).on('click', function () {
var cboxphoto = document.getElementsByClassName('cboxPhoto')[0].style;
cboxphoto.setAttribute('-ms-transform', 'rotate(90deg)');
});
var rotate_left = document.getElementById('cboxLeft');
$(rotate_left).on('click', function () {
var cboxphoto = document.getElementsByClassName('cboxPhoto')[0].style;
cboxphoto.setAttribute('-ms-transform', 'rotate(270deg)');
});
It rotate 90deg if I click again on rightrotate button then it wont work..I want to rotate it again when click on button
You're only ever rotating to 90 or 270 degrees. When you click again, it doesn't move as it is already rotated to that angle.
Keep track of the current rotation instead and set the attribute to that value plus or minus 90deg - you can probably clean up the code a bit as well, but something like this fiddle: http://jsfiddle.net/w6ho689e/
var degrees = 0;
$("#cboxRight").on('click', function () {
var $cboxphoto = $('.cboxPhoto');
degrees += 90;
$cboxphoto.css('-ms-transform', 'rotate(' + degrees + 'deg)');
$cboxphoto.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
$cboxphoto.css('transform', 'rotate(' + degrees + 'deg)');
});
$("#cboxLeft").on('click', function () {
var $cboxphoto = $('.cboxPhoto');
degrees -= 90;
$cboxphoto.css('-ms-transform', 'rotate(' + degrees + 'deg)');
$cboxphoto.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
$cboxphoto.css('transform', 'rotate(' + degrees + 'deg)');
});
How do I make the center of the div as the center point for the rotation.
I came across this while I was doing some research but I can't seem to fit it in to mine.
This is what the post has suggested. But doesn't work.
$(area).css('-webkit-transform-origin', 'rotate(' + dgR + 'deg)');
function rot(e, area) {
var offset = area.offset();
var ceX = (offset.left) + ($(area).width() /2);
var ceY = (offset.top) + ($(area).height() /2);
var muX = e.pageX;
var muY = e.pageY;
var rdi = Math.atan2(muX-ceX, muY-ceY);
var dgR = (rdi * (180/Math.PI)*-5);
$(area).css('transform', 'rotate(' + dgR + 'deg)');
$(area).css('-webkit-transform', 'rotate(' + dgR + 'deg)');
$(area).css('-o-transform', 'rotate(' + dgR + 'deg)');
$(area).css('-ms-transform', 'rotate(' + dgR+'deg)');
}
You're using the transform-origin incorrect.
$(area).css('-webkit-transform-origin', '50% 50%');
This should place the rotation origin point in the middle of the area
When I got you right, you just want to rotate a div in it's center point, aren't you? Here you have to define the center point with transform-origin: 50% 50%; in your div.
Heres a fiddle to play around (without jscript): http://jsfiddle.net/nub0umft/
Something I've wanted to learn for quite a time now, but haven't been able to figure out.
http://jsfiddle.net/Mobilpadde/Xt7ag/
Then you move the mouse, it follows, which is the easy part, but I want to rotate too, like always look in the direction of the mouse, but not so static, more like, if you move your mouse up, it should kinda rotate first, and then you move the mouse further away, it should begin to follow again (If you know what I mean).
Is that something simple to do, or 3k lines? (Or maybe a jQuery plugin?)
Hiya I got it something more closer by using an old post of mine : demo http://jsfiddle.net/Z3pGQ/3/
I am still working, will flick you more smoother version or if you can improve before me:
Old post: Rotating an element based on cursor position in a separate element
Hope it helps, I am trying to make it smoother now, cheers
Sample code
$(document).ready(function() {
$(document).mousemove(function(e) {
$(".firefly").css({
"top": (e.pageY * 2) + "px",
"left": (e.pageX * 2 + 130) + "px"
});
})
})
var img = $(".firefly");
if (img.length > 0) {
var offset = img.offset();
function mouse(evt) {
var center_x = (offset.left) + (img.width() / 2);
var center_y = (offset.top) + (img.height() / 2);
var mouse_x = evt.pageX;
var mouse_y = evt.pageY;
var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
var degree = (radians * (180 / Math.PI) * -1) + 90;
img.css('-moz-transform', 'rotate(' + degree + 'deg)');
img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
img.css('-o-transform', 'rotate(' + degree + 'deg)');
img.css('-ms-transform', 'rotate(' + degree + 'deg)');
}
$(document).mousemove(mouse);
}
Image
This is going to involve a lot more math than I want to do right now, but you can apply rotations with css easily. Here are the properties for mozilla and webkit, you can see the rest of the (IE,Opera...) at this page. Here is your function with a 120deg rotation applied. You will still need to calculate the proper rotation, and adjust the left and top accordingly.
$(document).mousemove(function(e){
$(".firefly").css({
"top":(e.pageY*2)+"px",
"left":(e.pageX*2+130)+"px",
"-moz-transform": "rotate(120deg)",
"-webkit-transform": "rotate(120deg)"});
})
There is a jQuery plugin for that http://pixelscommander.com/en/iphone-development/rotate-html-elements-with-mouse/