Develop Reference

jQuery move background to follow element positioned using CSS Animations

I got an application where I'm moving an image around the page using CSS3 Animations the idea is you click a button and the next animation runs and this way the "sprite" moves around a map.
However on mobile I was asked to keep the size of the map the same as desktop but instead move the map instead of the sprite, my question is how can I make that work?
My current (really early) code looks like this:
$(document).on("boatAnimationStarted", function(event) {
window.isAnimating = true;
var boatElement = $("#boat-sprite");
var backgroundElement = $("#background");
var backgroundWidth = backgroundElement.width();
var backgroundHeight = backgroundElement.height();
var windowSize = { width: $(window).width(), height: $(window).height() };
var originalOffset = boatElement.offset();
window.animationInterval = setInterval(function() {
var boatOffset = boatElement.offset();
var working = {
top: originalOffset.top - (boatOffset.top / 2),
left: originalOffset.left - (boatOffset.left / 2),
}
$("#background").offset(working);
}, 10);
});
This does manage to move it somewhat but it doesn't seem to be exact and isn't really accounting for the offset of the #background element when it changes position.
So I'm guessing I should do everything relative to the Background image (which is around 1200w X 421h)
So to do that you would do something like this i'm guessing
var relativeOffset = {
top: boatOffset.top - backgroundElement.offset().top,
left: boatOffset.left - backgroundElement.offset().left
}
And I would in theory get the offsets of the sprite relative to the large background image as opposed to the mobile viewport. But then how would I go about moving the background?
Sorry if it's a simple question but it's the first time I've ever had to work with this kind of stuff so I'm a bit confused.

Is there anyway that I can give a div a function in p5.js

Im trying to take a div that I created and make it move across the screen every hour using p5.js and I'm wondering if that is at all possible I was also wonderig if that div can change color randomly every hour in p5.js

One way to do this is to use the window.setInterval function. With this function, we can perform the animation every hour. However, one problem which arises is that, according to the P5.js documentation, the draw() function executes continuously after the setup() function is called. We can fix this by taking advantage of the noLoop() and loop functions.
The noLoop() function call will stop the draw() function from executing and the loop() function will start the execution again. So, let's take a look at how we can code this:
Note: According to the documentation, there can only be one draw function for each sketch. So, if you have other things animating throughout the course of the hour this approach may not be the best choice.
//stores the position of the element on the x-axis of the screen
var xPos = 0;
var delay = 60000 * 60; //1,000 milliseconds in a second
window.setInterval(function(){
//code to be called every hour; make draw function loop
loop();
}, delay);
function setup(){
//create your canvas or div or whatever
createCanvas(400, 400);
}
function draw(){
// clear the current background
background(255);
// set the fill color of your element
fill(255, 0, 0);
//change the x position so it can move across the screen
xPos = xPos + 1;
// if the circle moves off screen, it's finished animating for the hour
if(xpos > width)
{
xPos = 0; //reset back to 0;
noLoop(); //end the looping of the draw function
}
//draw your element to the correct location and size; here I'll use an ellipse
ellipse(xPos, 100, 25, 25);
}
I'm not the most familiar with P5.js as I've stated but hopefully this gives you enough an idea to get it working.
Edit: An alternative approach would be to use CSS animations. With CSS animations you wouldn't even need P5.js to get your desired effect.
HTML:
<div id="my-div" class="my-div"></div>
CSS:
.my-div {
/* animation name followed by how long the animation takes to perform */
/* browser prefixes for more browser support */
animation: slide-across-screen 1s;
-webkit-animation: slide-across-screen 1s;
-moz-animation: slide-across-screen 1s;
}
#keyframes slide-across-screen {
0% {
margin-left: 0;
}
100% {
margin-left: 100%;
}
}
JavaScript:
var div = document.getElementById("my-div");
div.addEventListener("animationend", function(){
div.style.marginLeft = 0;
div.style.animationPlayState = paused;
}
window.setInterval(function(){
div.style.animationPlayState = running; //might need browser prefixes here as well
}, 60000 * 60);

You can also use the createDiv() element from the p5.dom.js addon library. http://p5js.org/reference/#/libraries/p5.dom
var x = 0;
var myDiv;
function setup() {
var myDiv = createDiv("This is my DIV!");
setInterval(function() {
x+=100;
myDiv.position(x, 200);
}, 60*60*1000);
}

Making background fade in using Javascript

Hello below is my JS code for a changing background image every 30 seconds. I have this example code too from research, can somebody please please please show me how to integrate the example code into my JS, so the changing image fades in as I simply have no clue where to start and feel completely lost.
My JS
<script>
bgArr = ['images/bg1.jpg', 'images/bg2.jpg', 'images/bg3.jpg'];
bgCur = 0;
backgroundSwitch = function()
{
if (bgCur == bgArr.length) bgCur = 0;
document.body.style.backgroundImage = 'url('+ bgArr[bgCur++]+ ')';
}
window.setInterval(backgroundSwitch, 30000); // Switch every 30 seconds.
</script>
Example JS that I want to integrate
var img = document.getElementById("fade");
var fadeLength = 5500;
var opacity = 0;
var startTime = Date.now();
requestAnimationFrame(function me() {
// It's faded in, stop animating!
if (opacity >= 1) {
return;
}
opacity = (Date.now() - startTime) / fadeLength;
img.textContent = opacity;
img.style.opacity = opacity;
requestAnimationFrame(me);
});
Also is there a way to fit the background to the browser window within the javascript without using css?
Thank you and somebody please help!

One solution here is to use CSS transitions. No JS transition needed.
transition: background-image 6s;
Example

sliding logos - best way

I am creating event's page and at the bottom I placed many logos. It sliding from right to left. I don't use jQuery, only pure Javascript and I just wondering about the best performance. My code works, but maybe there is better way to do that ? I think this 'animation' sometimes slow down.
var banners = [],
links = [];
links[0] = 'http://...',
banners[0] = 'img/logo1.png',
...
var banLenght = banners.length,
banContent = "<div id='bannersBack'><div id='banners' style='display:inline-block;'>";
for (var ii =0; ii < banLenght; ii++){
banContent += "<a target='_blank' href='"+links[ii]+"'><img src='"+banners[ii]+"'></a>";
}
banContent += "</div></div>";
document.getElementById('sliding-logos').innerHTML = banContent;
var actual = document.getElementById('banners');
var move = function(){
position = actual.offsetLeft;
position -= 1;
actual.style.left = position +"px";
// 3000 is sum of banner's width
if (position > -3000) {
setTimeout( move, 20);
}else {
actual.style.left = "0px";
move();
}
};
move();

single image sprite rather than multiple image
CSS Transitions rather than JS. CSS is part of the browser engine and doesn't have to modify the properties of the DOM so it should be faster
Here's an example (however it is does NOT work in all browsers yet)
http://css-tricks.com/infinite-all-css-scrolling-slideshow/

Best performance is achieved by using CSS transforms+translate. Modern browsers will be able to use the GPU to do the transformation.
.animation {
transition: .25s ease-in-out;
transition-property: transform, width;
}
.move {
width: 200px; // set width to 200px
translateX(-200px); // move 200px to the left (always relative)
}
Typically, if you move large images or large DOM Nodes, you will see some stuttering. With CSS transform you get no stuttering.
If you can't use CSS transform (because you need it to work in IE8 or lower) I'd use jQuery's .animate.

How to show animated image from PNG image using javascript? [ like gmail ]

First of all,check out this image
Gmail uses this image to display the animated emoticon.
How can we show such animation using a png image?

I leave you a rough example so you can get a starting point:
I will use a simple div element, with the width and height that the animated image will have, the png sprite as background-image and background-repeat set to no-repeat
CSS Needed:
#anim {
width: 14px; height: 14px;
background-image: url(https://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/wink2.png);
background-repeat: no-repeat;
}
Markup needed:
<div id="anim"></div>
The trick is basically to scroll the background image sprite up, using the background-position CSS property.
We need to know the height of the animated image (to know how much we will scroll up each time) and how many times to scroll (how many frames will have the animation).
JavaScript implementation:
var scrollUp = (function () {
var timerId; // stored timer in case you want to use clearInterval later
return function (height, times, element) {
var i = 0; // a simple counter
timerId = setInterval(function () {
if (i > times) // if the last frame is reached, set counter to zero
i = 0;
element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
i++;
}, 100); // every 100 milliseconds
};
})();
// start animation:
scrollUp(14, 42, document.getElementById('anim'))
EDIT: You can also set the CSS properties programmatically so you don't have to define any style on your page, and make a constructor function from the above example, that will allow you to show multiple sprite animations simultaneously:
Usage:
var wink = new SpriteAnim({
width: 14,
height: 14,
frames: 42,
sprite: "https://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/wink2.png",
elementId : "anim1"
});
var monkey = new SpriteAnim({
width: 18,
height: 14,
frames: 90,
sprite: "https://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/monkey1.png",
elementId : "anim4"
});
Implementation:
function SpriteAnim (options) {
var timerId, i = 0,
element = document.getElementById(options.elementId);
element.style.width = options.width + "px";
element.style.height = options.height + "px";
element.style.backgroundRepeat = "no-repeat";
element.style.backgroundImage = "url(" + options.sprite + ")";
timerId = setInterval(function () {
if (i >= options.frames) {
i = 0;
}
element.style.backgroundPosition = "0px -" + i * options.height + "px";
i++;
}, 100);
this.stopAnimation = function () {
clearInterval(timerId);
};
}
Notice that I added a stopAnimation method, so you can later stop a specified animation just by calling it, for example:
monkey.stopAnimation();
Check the above example here.

Take a look at this:
http://www.otanistudio.com/swt/sprite_explosions/
and http://www.alistapart.com/articles/sprites
The answer lies within.

CMS's answer is fine, but there's also the APNG (animated PNG) format that you may want to use instead. Of course the first frame (the one displayed even by browsers that don't support APNG) should be the "ending" frame and just specify to skip the first frame in the file.

Set the background image of an element to the first image, then use javascript to change the image by altering the style every x milliseconds.

You can do it with TweenMax and steppedEase easing : http://codepen.io/burnandbass/pen/FfeAa or http://codepen.io/burnandbass/pen/qAhpj whatever you choose :)

CSS #keyframes can be used in this case
#keyframes smile {
0% { background-postiion: 0 -16px;}
5% { background-postiion: 0 -32px;}
10% { background-postiion: 0 -48px;}
/*...etc*/
}