Get SuperHi Unlimited, our brand new membership service, at a 40% off early-bird price!
June 14, 2018
In the ideology.press site, there's a floating 3d book that rotates and follows your mouse around the page. Using six flat images, we talk about how to turn those images into a digital interactive cube.
Now what do we want to do?Well, we said when we moved the mouse on the page,we want to do something, what do you want to do?Well, we wanna move the box somewhere,so the first thing we need to do is get the box,how do we get the box?Well, I'm gonna set up another constant,'cause we're not gonna change it, called boxand this is gonna equal to something in the page,well, what do we wanna find?So similar to what we would do in CSS,we wanna do, what do we call it?A section, let's call it,so we wanna find, we wanna do a querySelector,it's kind of like CSS,in quotes the section.Now if we had the class in this section,we could do section.box for instance,there's only one section on our site,so that's all we need to do.Now the next thing we need to do is,well, we've got the box, we've got the x, we've got the y,let's move it around, so on the box,what do you wanna change?We want to change its style,'cause we've got our CSS,what do we wanna do first of all?Well, we wanna change the left position,now what is a new left position?Well, this is gonna equal to x, 'cause we know where it is,now it's not just x,it's x in pixels, 'cause this is in pixels as well,but in CSS, we have 150 px,so we add px to it.Now what we'll get right now is on the page,I can move my mouse up and down,but this just follows down the page with me,what I wanna do is also move that to the top as well,so in the top, it's the same kind of thing, box.style.top,this is equal to not x, but y plus the unit, px.The next thing we want to dois actually twist it around the page.(upbeat electronic music)At the moment, I'm only changing one part of my section tag,the top and left, it's actually two,but we'll count it as one,but we also wanna change the transform as well,the rotation of this, so at the momentwhat we get is this, we can move round,but what I wanna do is if I'm at the center of this page,I don't want there to be any rotationand as I move across the page and up and down the page,I want to change the rotation.So what we're gonna do is first of allfind the middle of the page,how do we even think about that?So if I go back to my code in my rotate.js,I know the top and left position of the page,so right in the top left corner,how do I find the middle?Well, I'm gonna save this again to another constant,this constant is called midx, again, I've just named that,this is gonna be equal to,well, we know the top left corner position, which is x,but let's take away the middle of the page,so it could be positive directionand negative direction as well,so where is the middle of the page?Well, window.innerwidthand we'll divide it by two,so how wide is this page?Five by two, so it's in the middle,but x positive, this way, negative.We also wanna find up and down, so we're gonna do midyand this is gonna be the window.innerheight divided by two,so we've found the middle of the page,now let's rotate this around the middle,so we're gonna start off by changing which part?Well, which part are we gonna change?If I look in my style.css is the transform,we'll change the rotateX to not 320 degrees, but zeroand the y rotation is zero as well, let's start with that.So how do we think about that?So in my box, I'm gonna change the style,but I'm gonna change the transform this time,this is gonna equal to in quotes,'cause this is gonna stay the same,rotateX brackets zero degreesand rotateY brackets zero degrees as well,now if we look at the preview in the page,we'll see as we move around, currently it's not rotating,so the middle, this shouldn't rotateand as I move this way, you can kind of see the edgedue to the perspective on the site,we wanna rotate this way and this way.
Now which way do I actually want to rotate?Now, if I'm currently in the middle of my final design,if I'm going up and down the page,which way am I rotating?Well, I'm actually rotating in the x direction,remember if I've got a piece of stringgoing from left to right of the page,that's the way it's twisting around at the moment,so it might be quite, you might be tempted to say,well, if I'm moving in the y direction, we're rotating in yand if we're moving in the x direction, we're rotating by x,it's actually the other way round,because it depends on this kind of like invisible string,that the book is kind of rotating on,so let's think about that.So instead of this being zero degreesand zero degrees here,instead, it's not gonna be zero, it's changeable,so I'm gonna get rid of zeroand put a quote plus quote,now in here, what I'm gonna put inis not the midx, but the midy,so midyand then plus that as well,so I've got something that stays the sameplus something that doesn't, it changes,plus all of the stuff, which does stay the same,so now depending on where my y position is,we're gonna rotate in the x way,so now if I go across the page,that's the x way, it doesn't change rotation,if I go up and down the page, it does twistand I can stay on that level each timeand see the back of the book.Now obviously I wanna change this way as well,so how do I do that?It's the same thing, instead of this being rotateY,I'm gonna get rid of that zero and put quote plus quote,now I wanna add in there the midx and add a plus as well,so we've got this bit that stays the same,this bit that changes, this middle bit that stays the same,this bit that changes and finallythis bit that stays the same,so I've got two things that are changing,the midy and the midx position,so now I can rotate up and down the pageand go across as well.Now if I did want to change the kind of speed of that,so maybe it's too quick going in that direction,or too slow, all I'd need to do is change this,all I'd wanna put around thereis maybe a kind of multiplier,so I put a bracket and a bracketand then times by 0.5, let's say,so it's half the speed in the rotateX way,so now it goes fine this way, this way is a lot slower.So that's all we need to doto actually add something that spins around,all I've done is added some HTML,I've got six faces in there,in my stylesheet, all I've done is said all the 3D stuffand then rotate, depending on where it should be,depending on rotateY in these twoand rotateX or fully rotateand then just changed the translationand then to move it round the page,all I've done is say whenever I move my mousearound the page, do some calculations,find the box, move it round the pageand do some rotations, depending on where it is.(upbeat electronic music)
June 14, 2018