Develop Reference

make an element rotate based on the direction of motion with javascript

I have created a mockup of a "kite flying" page that a client requested, which makes the kite follow the cursor around the screen. I would like to have it rotate so that it looks like the kite is traveling in the direction of the movement.
I would like to do something like:
transform: rotate3d(0, 1, 1, 25deg); //TURN KITE TO THE RIGHT
transform: rotate3d(0, -1, -1, 25deg); //TURN KITE TO THE LEFT
But I don't know enough about JS to set up the function so that if the movement on the X-axis is increasing, it rotates right, and if it is decreasing, it rotates left.
Demo in question: http://stoysnet.com/clients/wingsofthewind/flyme/
Pardon my messy code... I am very new at Javascript and CSS animations.
EXTRA: If anyone has suggestions on how to make the "string" so that it A) moves left and right as currently shown, but also B) tips so that it is pointing toward/connected to the kite, I am open to suggestions.
EDIT: Full code of page shown here (cleaned up a bit), so others can still view it when the mockup is removed:
// SCRIPT FOR CURSOR FOLLOW
$(document).on('mousemove', (event) => {
$('.follower').css({
left: event.clientX,
top: event.clientY/1.5 -100,
});
$('.string').css({
left: event.clientX,
});
});
// END SCRIPT FOR CURSOR FOLLOW
// SCRIPT FOR SWAP IMAGE
function pickKite(kite) {
document.getElementById("flyme").style.backgroundImage = "url(" + kite + ")";
}
// END SCRIPT FOR SWAP IMAGE
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#keyframes windy {
0% {
transform: translateX(-30%) translateY(-30%);
}
25% {
transform: translateX(-50%) translateY(-50%);
}
50% {
transform: translateX(-80%) translateY(-30%);
}
75% {
transform: translateX(-50%) translateY(-10%);
}
100% {
transform: translateX(-30%) translateY(-30%);
}
}
body {
padding:0px;
margin:0px;
}
.container {
width:100%;
height:100vh;
background-image: url(https://i.imgur.com/ak3aIyl.png);
background-size: cover;
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 180s linear infinite;
-ms-animation: animatedBackground 180s linear infinite;
-moz-animation: animatedBackground 180s linear infinite;
-webkit-animation: animatedBackground 180s linear infinite;
cursor:crosshair;
}
.follower {
width: 200px;
height: 200px;
background-image: url(https://i.imgur.com/i4xmPPt.png);
background-position: center center;
background-size: contain;
transition-duration: 1800ms;
transition-timing-function: ease-out;
position: fixed;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
transform-origin:50% 50%;
animation: windy 20s ease-in-out infinite;
-ms-animation: windy 20s ease-in-out infinite;
-moz-animation: windy 20s ease-in-out infinite;
-webkit-animation: windy 20s ease-in-out infinite;
}
.string {
width: 2px;
height: 400px;
background:#FFFFFF;
background-position: center center;
background-size: cover;
transition-duration: 1000ms;
transition-timing-function: ease-out;
position: fixed;
left:50%;
top:100%;
transform: translateX(-50%) translateY(-50%);
transform-origin:100% 50%;
}
.kite-selector {
position: absolute;
bottom:10px;
right:10px;
width:300px;
height:100px;
background-color:rgba(0,0,0,0.31);
}
.kite-selector div {
float:left;
margin-left:15px;
}
label > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
label > input + img{ /* IMAGE STYLES */
cursor:pointer;
background-color:rgba(255,255,255,0.00);
}
label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
background-color:rgba(255,255,255,0.25);
}
<div class="container">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follower" id="flyme"></div>
<div class="string">String Position Marker</div>
<!-- KITE IMAGE SELECTOR -->
<div class="kite-selector">
<h3 style="margin:10px;">Select your kite:</h3>
<form>
<div>
<label><input type="radio" name="kite" value="https://i.imgur.com/i4xmPPt.png" checked onClick="pickKite(this.value);"><img src="https://i.imgur.com/i4xmPPt.png" style="max-height:50px;" alt="kite1"></label>
</div>
<div>
<label><input type="radio" name="kite" value="https://i.imgur.com/iXRQF77.png" onClick="pickKite(this.value);"><img src="https://i.imgur.com/iXRQF77.png" style="max-height:50px;" alt="kite2"></label>
</div>
<div>
<label><input type="radio" name="kite" value="https://i.imgur.com/L3IA1hX.png" onClick="pickKite(this.value);"><img src="https://i.imgur.com/L3IA1hX.png" style="max-height:50px;" alt="kite3"></label>
</div>
</form>
</div>
<!-- END KITE IMAGE SELECTOR -->
</div>

Rotating background image tiles in css

I would like to make a full screen rotating background with tiled images like this one:
.overlay{
position:fixed;
background:url(https://codepo8.github.io/canvas-images-and-pixels/img/horse.png);
background-repeat:repeat;
-webkit-animation:180s rotate-left infinite linear;
-moz-animation:180s rotate-left infinite linear;
-o-animation:180s rotate-left infinite linear;
-ms-animation:180s rotate-left infinite linear;
animation:180s rotate-left infinite linear;
top:0;
left:0;
width:100%;
height:100%;
}
#-moz-keyframes rotate-left{
0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; }
100%{ -moz-transform:rotate(-360deg); }
}
#-webkit-keyframes rotate-left{
0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; }
100%{ -webkit-transform:rotate(-360deg); }
}
<div class="overlay">
</div>
Is there a trick to make the tiles to fill the whole screen in all positions?
Thank you for your help in anticipation.

background-size will not work here because you are rotating a div, not the background itself.
Mathematically, if you want the child div to cover the entirety of parent div's area during animation you need to make sure the child's height and width are equal or grater to the diagonal distance between corners of parent element.
So, you can either do the math, or simply make it really big.
body{ margin: 0; }
.parent{
position: relative;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
overflow: hidden;
}
.overlay{
background:url(https://codepo8.github.io/canvas-images-and-pixels/img/horse.png);
background-repeat:repeat;
-webkit-animation:180s rotate-left infinite linear;
-moz-animation:180s rotate-left infinite linear;
-o-animation:180s rotate-left infinite linear;
-ms-animation:180s rotate-left infinite linear;
animation:180s rotate-left infinite linear;
width:1000%;
height:1000%;
position: absolute;
top: 50%;
left: 50%;
}
#-moz-keyframes rotate-left{
0%{ -moz-transform:rotate(0deg) translate(-50%, -50%); -moz-transform-origin: top left; }
100%{ -moz-transform:rotate(-360deg) translate(-50%, -50%); -moz-transform-origin: top left; }
}
#-webkit-keyframes rotate-left{
0%{ -webkit-transform:rotate(0deg) translate(-50%, -50%); -webkit-transform-origin: top left; }
100%{ -webkit-transform:rotate(-360deg) translate(-50%, -50%); -webkit-transform-origin: top left; }
}
#keyframes rotate-left{
0%{ transform:rotate(0deg) translate(-50%, -50%); transform-origin: top left; }
100%{ transform:rotate(-360deg) translate(-50%, -50%); transform-origin: top left; }
}
<div class="parent">
<div class="overlay">
</div>
</div>

div animation using transition

I want to animate the div when moving from left to right
The div is moving fine but with no animation
It is very fast
and more over i have assigned the top and right property to the div when hover but it is not happening
HTML:
<body><div></div></body>
CSS:
div
{
width:100px;
height:100px;
background:red;
transition-property: right, left;
transition-duration: 10s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:ease;
position:absolute;
}
div:hover
{
right:30px;
top:10px;
}
JS Fiddle
I need the div to be moved with ease and slowly

First you need to define right for starting position, e.g right: calc(100% - 100px);
.wrap {
width: 100%;
height: 100px;
background: orange;
}
.cube {
width:100px;
height:100px;
background:red;
right: calc(100% - 100px);
transition-property: right;
transition-duration: 10s;
-webkit-transition-property: right; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:ease;
position:absolute;
}
.wrap:hover .cube
{
right:30px;
}
<div class="wrap">
<div class="cube"></div>
</div>

Try this, it's works
div {
width:100px;
height:100px;
background:red;
transition: 1000ms;
position:absolute;
left: 0;
}
div:hover {
left: 100%;
margin-left: -100px;
}
JSFiddle http://jsfiddle.net/3SYka/287/

Replace right,left with margin-left.
div
{
width:100px;
height:100px;
background:red;
transition-property: margin-left;
transition-duration: 2s;
-webkit-transition-property: margin-left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:linear;
position:absolute;
}
div:hover
{
margin-left:80%; /* Using margin-left */
top:10px;
}
<body>
<div></div>
</body>

Did you know that we can hardware-accelerate graphics-intensive CSS features by offloading them to the GPU for better rendering performance in the browser?
Try to use it, here is an example with transform
jsfiddle

background image zoomin Effect.

Here is my code
html
<h1 class="logo-title"><span>DAVE</span></h1>
css
h1.logo-title {background: url(bg.jpg) no-repeat;background-position: 50% 100%;-webkit-background-clip: text;}
I am trying to use my background image zoomin and zoomout animation effect like those websites. here is demo.
http://wowslider.com/jquery-slider-bar-kenburns-demo.html
http://owwwlab.com/toranj/index-2.html
please give me any sollution for my background image. Anybody help me out in this situation. ??

You may get the idea here:
HTML:
<div class="zoom-in strawberry">
</div>
<button onclick="zoomin(100, 2, 500)">Zoom In</button>
CSS:
.strawberry{
background-image: url('http://dreamatico.com/data_images/strawberry/strawberry-6.jpg');
background-repeat: no-repeat;
}
.zoom-in{
display: block;
width: 400px;
height:350px;
background-size: 400px;
}
Script:
function zoomin(interval, sizeChangeEveryInterval, stopResizeWhenSizeReached){
var timeout = setInterval(function(){
var target = $(".zoom-in")
var bgposx = target.css('background-position-x') ? parseInt(target.css('background-position-x')) : 0;
target.css('background-position-x',(bgposx - sizeChangeEveryInterval) + "px");
var bgposy = target.css('background-position-y') ? parseInt(target.css('background-position-y')) : 0;
target.css('background-position-y',(bgposy - sizeChangeEveryInterval) + "px");
var bgsize = !isNaN(parseInt(target.css('background-size'))) ? parseInt(target.css('background-size')) : 100;
target.css('background-size',(bgsize + sizeChangeEveryInterval) + "px");
if(stopResizeWhenSizeReached < bgsize) clearInterval(timeout)
}, interval)
}
Here's my Fiddle: http://jsfiddle.net/ThisIsMarkSantiago/xm1zp09g/

easiest way to do it is by just putting an img tag behind your content and then transform: scale(110%,110%);. Animate it using css:
div.container
{
position: relative;
}
img.background
{
position: absolute;
z-index: -1;
left: 0px;
// .. etc etc
transform: scale(100%, 100%);
transform-origin: 50% 50%; // wherever you want the 'midpoint' to be at.
transition: transform 5s linear;
}
img.background.active
{
transform: scale(110%, 110%);
}
easy does it.
you could of course do this with just background-image but then you will have a tougher time switching from image to image.

You can solve this issue also using pure CSS3 animations. Though it might not be supported on every platform
Here is a working example (quickly hacked together & tested in chrome):
html, body {
min-width: 400px;
min-height: 300px;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.container {
position: relative;
height: 100%;
width: 100%;
background: #efefef;
overflow: hidden;
}
.image {
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-animation-name: zoom;
animation-name: zoom;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.image-1{
background-image: url(http://www.chip.de/ii/917741674_393fa282fa.jpeg);
}
.image-2{
-webkit-animation-delay: 5s;
animation-delay: 5s;
background-image: url(http://www.chip.de/ii/917741714_fe3259c85e.jpeg);
}
#keyframes zoom {
0% {transform: scale(1,1); z-index: 2;}
49% {transform: scale(2,2);}
50% {opacity: 0}
}
#-webkit-keyframes zoom {
0% {-webkit-transform: scale(1,1); z-index: 2;}
49% {-webkit-transform: scale(2,2);}
50% {opacity: 0}
}
<div class="container">
<div class="image image-1" style=""></div>
<div class="image image-2" style=""></div>
</div>

How can I recreate this masking effect in CSS/JavaScript?

I'm trying to recreate the effect shown in the gif here. It's fine even to have two separate images - I don't need to recreate the greyscale/blur effect (although I can with webkit filters) - it's just the masking that I'm having trouble with.
Basically I've got a carousel slider, and as it slides left and right, the background underneath the current slide will be blurred, to make the text on top more visible. I can't manage to keep the background in the same place as the slider moves along as a mask. How can I recreate this?
edit: I've managed to figure this out: http://jsfiddle.net/9xk410wk/18/
I used CSS transforms in opposite directions:
.tile {
-webkit-transform: translate3d(-400px, 0px, 0px);
}
.blur > div {
-webkit-transform: translate3d(400px, 0px, 0px);
}
.tile:hover {
-webkit-transform: translate3d(400px, 0px, 0px);
}
.tile:hover .blur > div {
-webkit-transform: translate3d(-400px, 0px, 0px);
}

You could use a webkit grayscale filter for this:
FIDDLE (hover over the image to see the effect)
Markup
<div class="pic">
<div class="mask">SLIDER</div>
</div>
CSS
.pic {
width:288px;
height: 214px;
background: url(https://dl.dropboxusercontent.com/u/51558405/pic.png) no-repeat;
position:relative;
overflow: hidden;
}
.pic:hover .mask {
-webkit-transform: translate3d(228px, 0, 0);
background-position: 100% 0;
}
.mask {
width: 60px;
height: 214px;
position: absolute;
left:0;
top:0;
color: #fff;
background: url(https://dl.dropboxusercontent.com/u/51558405/pic.png) 0 0 no-repeat;
-webkit-transition: all 1.5s linear;
transition: all 1.5s linear;
-webkit-transform: translate3d(0, 0, 0);
-webkit-filter: grayscale(100%);
z-index:1;
}

I'm not sure exactly the issue you are running into without seeing code, but here is a crude fiddle that I created which mimics the gif:
http://jsfiddle.net/z71g26by/
I just used a CSS3 linear animation and changed the opacity of the moving panel. I just used colors, but it should work the same with a background image.
CSS:
body {
/*To hide the horizontal scroller */
overflow: hidden;
}
.container {
width: 500px;
height: 420px;
background-color:blue;
}
.panel {
width: 200px;
height: 420px;
background-color: white;
opacity: .8;
-webkit-animation: move 5s linear infinite;
}
#-webkit-keyframes move {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
HTML:
<div class="container">
<div class="panel"><p>SLIDER</p></div>
</div>
Note: This only works in webkit, but you can add the appropriate pre-fixes to get it working in other browsers.