How does Google Doodle work? - javascript

How does Google Doodle work?
When i search for it, i found following
Animated Gif
Animated Jpeg Frame. Sprite image will have all frames and this frame is animated using javascript.
Canvas
Which one is correct?

First they enclose the <img> tag JPEG with all the animation frames inside a <div> tag that has a fixed height of 182 pixels and which hides overflow. This creates a fixed window so to speak, which masks all but current animation frame. The image is animated using JavaScript, which changes the top property for the absolutely positioned image to slide it up a fixed interval with the setTimeout() function.
Here is some code of example by Google from one of reference:
<div style="height:182px;position:relative;width:468px;overflow:hidden">
<img border="0" src="source.jpg" id="filmstrip" style="position: absolute; height: 2912px; top: -0px; display: block; ">
</div>
Jquery:
<script>
function naiveAnimation(id) {
var img = document.getElementById(id);
var offset = 0;
var animate = function() {
//slide the image correct frame of animation given by offset
img.style.top = -offset + "px";
//calculate offset to next frame
offset = Math.floor(offset + 182);
//if we are not yet on the last frame...
if(offset < 2912) {
//call me again in half a second
window.setTimeout(animate, 500);
} else {
//at last frame, so all done!
}
};
//start the animation
animate();
}
naiveAnimation('filmstrip');
</script>

I would go for the Animated JPEG and Canvas, although APNG may work too. I haven't seen a 256-bit color image on a doodle. Maybe even a webm. Some doodles have sound and some are interactive, so I think they use whatever they see suitable for their purposes.

Related

Animate image left to right on scroll

What I am trying to do is I have around 6 inline images I want slide them left to right on specific position and stop there for each image. And images have to slide at the time the scrool comes over them.
I tried this javascript for it (totally new to JS)
$(window).scroll(function(){
if($this.scrollTop()>300)
{
$('.onfoot1').slideright();
}
function slideright(){
var a = getElementsByClassName('.onfoot1');
var stoppos = 100;
if (parseInt(a.style.left)< stoppos )
{
a.style.left = parseInt(a.style.left) + 3 + "px";
setTimeout(slideright , 1);
}
}
});
Markup
<div class="onfoot1"></div>
CSS
div.onfoot1{
content:url(../img/onfoot1.jpg);
left:0;
}
I've put together a working examle for your code: https://jsfiddle.net/hmzw9y65/
I've made a few assumptions there... You are using $(...) syntax so I guessed you are using JQuery. JQuery has a .animate() function which should do the trick (http://api.jquery.com/animate/). Also I guessed that you may want to make the css-position of the div fixed so it stays on screen when you scroll.
EDIT: I noticed that you don't want you image on the bottom of the screen but animating when screen reaches it. Updated my fiddle to do that: https://jsfiddle.net/hmzw9y65/1/

Javascript and DOM manipulation efficiency on RPi Win10 IoT

Background
I've created a slideshow application with asp.net (C#) and html5/css3/javascript (w/ a bit of jQuery). I'm trying to display this on a Raspberry Pi 2 device running Windows 10 (IoT version) inside the Windows Universal WebView component.
I'm having issues with slides lagging. My slideshow is based off of one div with 3 background images:
The top image is the slide image. Displayed with background-size: contain.
The middle image is a transparent gradient meant to lay over the bottom image for affect.
The bottom image is server generated on image upload and is a zoomed and blurred image meant to give a kind of gradient splash mapping of color hot zones. Any image artifacts left from this process are smoothed by image #2.
Problem
I switch the background image with one line of code:
slide.style.backgroundImage = "url(" + slides[slideIndex % slides.length] + "), " +
"url(../images/egg-shell.png), " +
"url(" + blurred[slideIndex % blurred.length] + ")";
Works great in my browser, however, on the Raspberry Pi the bottom image with middle image overlayed displayed way before the top image.
Abnormalities
I have had to do a couple things to make this work with the Raspberry Pi and Webview component, I only list these because they might be causing my problem:
After changing the background image, I have to set the slide element's display property to none, then back to block to redraw the background image else it won't change.
I'm preloading images by loading a bunch of JS Image objects with paths specified by webservice, then waiting for each image to finish reporting .onload to start the slideshow.
The whole application is pretty lightweight. If needed I can provide it but there must be something simple I'm missing. I don't know the efficiency if I were to load each image in a separate <img> element and then set z-indexs. Nor do I know if the efficiency would increase by letting the images load in separate slides behind the current one. This is why the question is asking about DOM manipulation and Javascript. At any rate, thanks for reading this long explanation and hopefully you can help!
Like this: http://jsfiddle.net/utwqsb45/ or if you prefer
$(function($){
var $slides = $('.slide');
function transition(){
var $current = $('.slide.showing'),
$next = $('.slide[data-number="' + parseInt($current.data('number') + 1) + '"]');
if (!$next.length) {
$next = $('.slide[data-number="1"]');
}
requestAnimationFrame(function(){
$current.removeClass('showing');
$next.addClass('showing');
});
}
setInterval(transition, 1000);
})($);
.slide {
width: 99%;
height: 99%;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: none;
margin: 0 auto;
}
.slide.showing {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide showing" data-number="1">one</div>
<div class="slide" data-number="2">two</div>
<div class="slide" data-number="3">three</div>

Moving image down screen with Javascript

I would like to move my image down the screen from the top left to the bottom left. I call two functions when the body loads:
window.onload = function() {
MoveRight();
MoveDown();
};
I then retreive the width and height of the clients browser window (to ensure the animation stops when it reaches the sides of the window):
document.body.style.height = height;
document.body.style.width = width;
The function "MoveDown()" is this:
function MoveDown(){
for(var i = 0; i < ; i++)
{
document.getElementById("Amanda").style.top=+i;
}
}
For some reason when I load the webpage, the image just sits in the top left. I had hoped the for loop would increment the "top" value by 1px every time, until such time that it was touching the bottom of the window when it would stop.
If it helps, the image position is set to relative with left and top both set to 0px.
If anyone could help it would be great.
*I collect the width as I want the image to move diagonally but figured that if I got moving down figured out I could easily change the code to make it go sideways at the same time.
The reason it's not moving is most likely (depending on browser) because you're not setting the units. Try
document.getElementById("Amanda").style.top=i+"px";
However, you'll find that it jumps straight down rather than animating. The reason is your loop executes all in one go without giving the browser a chance to redraw. There are a number of ways of getting around this, but one simple one would be like this
function MoveDown() {
var i=0;
function step() {
document.getElementById("Amanda").style.top=i+"px";
i++;
if (i<=100) setTimeout(step,10);
}
step();
}
Do you have position: absolute or position: relative (or position: fixed) as styling for your image?
Asking this because top applies only to positioned elements (and by default elements have position: static which is they are not explicitly positioned).
See https://developer.mozilla.org/en-US/docs/Web/CSS/top and https://developer.mozilla.org/en-US/docs/Web/CSS/position
On rereading your question, this loop of yours looks like an endless loop. Consider adding a stop rule for it, or as suggested in the comments - if you do not need some kind of sliding animation, just put css rule for bottom: 0
You'll want to use setTimeout or setInterval (I can never remember) with some interval and a function that increments the top value every time it runs. Then cancel the timeout/interval when the image reaches it's destination!

Overlay DOM element on video

Is there a method to place a DOM element over particular coordinates of particular video frames using Web technology? I am trying to float a picture of my face over the face of an actor in a video.
Any tips or suggestions or algorithms would be much appreciated!
If you know what time (in milliseconds) you want to place the object, then yes. You can set a timer to check the video's current time position using video.currentTime(), and then place objects on the video by absolute positioning.
var objects = {
[
object: $("<div></div>").addClass("myObject"),
timeShow: 3;
timeHide: 9;
]
};
var myVideo = document.getElementById('myPlayer');
var currentTime = 0;
setInterval(function() {
currentTime = myVideo.currentTime();
for(var i=0; i<objects.length; i++) {
if(objects[i].timeShow > currentTime && objects[i].timeEnd < currentTime)
objects[i].object.show();
}
}, 1000); // loops at 1 second
You could use position:absolute and set top and left CSS properties.
Something like this:
<div id="container" style="position:relative">
<video element />
<div id="blocker" style="width:100px; height:100px; position: absolute; top:240px; left:140px; background:yellow">
</div>
</div>
So the "blocker" div will span 100px by 100px and be located at 240px from top and 140px left from the top left of the "container" div.
use absolute positioning position: absolute; (css) to get something in a set position. Note that you might need to use z-index (css) to overlay one item with another.
Just so you know: its pretty much impossible to track a face in a running video and putting a moving <div> on top of it. Not sure what you are trying to achieve :p

How can I move a background image pattern around?

I've looked around for this but I couldn't find an answer, and I don't have a clue how I would do it. What I am looking for is a JavaScript or jQuery script that will "move" a background image to the right in a div container, so that the pattern will have an "animated" effect.
How would it be possible to do this? I apologize if I have not explained the question in enough detail.
You can use the CSS background-position property to set the position of the background.
Here's a live example that moves the background one pixel to the right every quarter second, resetting when it reaches 100 pixels.
HTML:
<div id="theDiv">This is the div</div>
CSS:
#theDiv {
background-image: url(http://www.gravatar.com/avatar/7b13c109d50df67d5f7d0b1d901d7fb7?s=32&d=identicon&r=PG);
background-repeat: no-repeat;
}
JavaScript:
jQuery(function($) {
var pos = 0;
move();
function move() {
++pos;
if (pos > 100) {
pos = 0;
}
$("#theDiv").css("background-position", pos + "px");
setTimeout(move, 250);
}
});
You cannot use jQuery.animate on a background position, because:
All animated properties should be animated to a single numeric value.
And background-position is not a single numeric value property.
Thus, your best bet is to not use a background image in this case directly. You could re-do your layout so that the image is actually an absolutely positioned <div> (the size of your background image) within another fixed-size <div> container (position: relative; overflow: hidden;). And then to make it "move" -- animate CSS left property on your absolutely positioned <div>.

Categories

Resources