I've been trying to figure out how Google animate their logos since the particle explosion one a while back, and today they have a chemistry set to celebrate the 200th anniversary of Robert Bunsen.
I'm assuming this is HTML5 (I'm using Firefox 4, Chrome and Safari 5), but can anyone confirm if so and whether there are any good tutorials on how to do those types of animations?
This is partialy HTML5:
they use cross-browser sprite technique - one PNG image with multiple scenes.
They clip area of one scene and display it. To show next scene they just shift clipping area start offset.
Just check with Firebug: image is set as background of div tag with heigth exactly of one scene, then they shift Y-offset and background "moves" - just like film tape :)
Here is snippet (Google (C)), notice -380px and then -570px:
<div style="background: url("/logos/2011/bunsen11-hp-sprite.png")
no-repeat scroll 0pt
-380px transparent; height: 190px; opacity: 0.3;
position: absolute; width: 465px; z-index: 20;"></div>
<div style="background: url("/logos/2011/bunsen11-hp-sprite.png")
no-repeat scroll 0pt
-570px transparent; height: 190px; opacity: 0.3;
position: absolute; width: 465px; z-index: 20;"></div>
Here is good DIY example from stack: How to show animated image from PNG image using javascript? [ like gmail ]
Update:
2. They also use HTML5 canvas to produce part of animation with interactive effects - bubbles for example.
Related
I am a novice html/CSS programmer who needs to satisfy a very specific set of circumstances.
I have 2 images, both must be aligned vertically by the center of the image. One image must be left aligned and the other must be right aligned. They will be in a max width div but I don't think that should be an issue. As the webpage is shrunk down below the width of the two pictures together, the images then need to be horizontally centered with one image on top of the other. I have added pictures to clarfiy (sorry I would have added as pictures but I have zero rep). The div container and images will all be variable so positioning based upon pixels is out of the question.
So I researched this a ton, but all answers I've found have been partial; not able to do everything I'm looking for. Any ideas?
(http://imageshack.us/a/img819/9515/3zt.gif)
(http://imageshack.us/a/img14/853/qp8.gif)
Research:
I notice my question was -1'd. I guess not providing my research was the fault? Here's some of the methods I tried to fix this issue:
Vertical alignment of elements in a div
How to vertically align an image inside div
How to vertically middle-align floating elements of unknown heights?
Wrap long HTML tables to next line
Edit #2
Another version, I think this is the cleanest I can think of
live view
edit view
Use a css table and vertical-align:middle for the wide screen view, then collapse the table for narrow viewports. The code is clean and it's completely independant of image heights.
================
Edit
As #user2748350 correctly pointed out, my original suggestion below didn't align images vertically on a wide screen if they were different heights.
Here's a variation which is an improvement using vertical-align: middle and inline images. The only requirement is that you set a line height larger than the tallest image:
live view
edit view
===============================================
Original
See if this helps you:
live view
edit view
HTML
<div class="container">
<img src="http://placehold.it/300x150" class="left">
<img src="http://placehold.it/250x150" class="right">
</div>
CSS
.container{
margin: 0 auto;
max-width:1000px;
}
img.left{
display:block;
float:left;
}
img.right{
display:block;
float:right;
}
#media (max-width: 570px) {
img.left{
float:none;
margin: 0 auto;
}
img.right{
display:block;
float:none;
margin: 0 auto;
}
}
In the head of your page, you also want to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
for good display on mobile devices.
Hope this helps!
Here is quick solution
img {
max-height: 100%;
max-width: 90%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I just copypasted the code from the tutorial:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rect-tutorial/
The problem is that the style setting for canvas{} isn't taken in account.
I clearly know where the canvas is and that it SHOULD work because:
A) I've already done it, but I can't get a working copy of the code
B) Firebug tells me that there IS a canvas... So why it doesn't work?
My final goal is to distinguish the stage visually (by a border or a proper background color)
Thank you!
Well, alternatively you can draw a border with background color inside KineticJS by using a Kinetic.Rect to distinguish the stage visually:
var border = new Kinetic.Rect({
width: stage.getWidth(),
height: stage.getHeight(),
stroke: 'black',
strokeWidth: 4, //Border Size in Pixels
fill: '#00FF00' //Background Color
});
jsfiddle
The only tiny issue with this is that you'll get 1 Extra Kinetic Node inside your canvas. If you wanna keep the solution outside the canvas, than style your #container to be the same width and height as your stage/canvas, and then wrap the #container inside another <div> and give that <div> the original styling you had on #container. Like this:
HTML:
<div id="containerWrapper">
<div id="container"></div>
</div>
CSS:
#containerWrapper {
/*#container's old styles here*/
}
#container {
width: widthOfStage;
height: heightOfStage;
border: 4px solid #000;
background:#00FF00;
}
2nd example jsfiddle
I'm stumped on how to achieve this with FabricJS. I have the fabric container:
<div class="canvasContainer canvasDemo">
<canvas id="canvas" width="1935" height="1380"></canvas>
</div>
with the corresponding CSS:
.canvasContainer {
border: 1px solid #ccc;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.25);
border-radius: 5px;
margin-top: 5px;
overflow: hidden;
width: 935px;
height: 380px;
}
#canvas {
overflow: visible
}
This effectively creates a much larger canvas inside a container. I was hoping there was something built-in to Fabric that would allow me to "move" the entire canvas to different parts of the overall canvas. Basically, the goal is to have a smaller visible area on a much larger overall canvas.
My goal is to have the move icon on the visible canvas when it is in selection mode so the user can move the entire canvas to other sections of the overall drawing.
Any ideas on how to achieve this with FabricJS?
I have the same problem. I need a hand to move to others zones of canvas and in my case, the scroll don't is an option...
Have you tried x Zoom In Zoom Out? Probably is a solution for you, please look: http://jsfiddle.net/Q3TMA/98/
<canvas id="c" width="1935" height="1380"></canvas>
I'm doing some stylistic text inside of rounded divs, where the text bumps right up against the top of the container. I've been able to control almost all content, nested divs, images set as backgrounds, etc, and had them all clip successfully, but this one has been giving me serious grief.
Using the old-school image borders or cover-ups is not a solution as we have dynamic graphical backgrounds. We need a solution to actually clip the text.
This is mostly visible in Firefox 3.x and older versions of Chrome
Here's the sample code to play with:
http://jsfiddle.net/vfp3v/1/
div {
-moz-border-radius: 45px;
border-radius: 45px;
background-color: #ccc;
font-size: 100px;
color: #777;
line-height: 70%;
overflow: hidden;
width: 257px;
}
the jank:
Notice it's been fixed in the new Chrome and FireFox 4 - the shui:
Most of our site users are Firefox 3.6, so would love to be able to provide an elegant solution for them as well. Any help appreciated! Cheers
This one works in FF 3.6: http://jsfiddle.net/vfp3v/15/
It has some drawbacks, as you can see in the second example (in FF 3.6) the clipped off border has a solid color, so if you are using some kind of background this might look ugly. Just take a look at it, it might fit your needs.
I just added a span:
<div><span></span>WXYZ</div>
and then positioned it over the text with a border in the same color as the background, and a displacement as big as the border:
div{
position:relative;
etc...
}
span{
position:absolute; display:block; width:100%; height:100%;
border:25px solid #fff; top:-25px; left:-25px;
-moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */
}
edit: just tested this in chrome 10.0.6 (which has the clipping bug) and it worked!
In browsers that correctly support the border-radius the span (and it's border-color) isn't even visible because it is clipped off (overflow:hidden).
Does anyone know a way to get Firefox to crop the corners if the border radius of an image is set? It's containing element will work fine but I get ugly corners sticking out.
Any way to fix this without setting the image as a background image or processing it before I put it on my site?
Workaround: Set the image as the background of a container element, then add border radius on that element.
Does it not crop if you apply the border radius directly to the img element? There are known issues with -moz-border-radius as far as contained content is concerned.
--edit
OK, it doesn't crop img either. If your image is some sort of png/gif on a solid background you may be able to do something like this:
img {
border: 10px solid white;
-moz-border-radius: 10px;
}
But if you're trying to get rounded corners on a photo then it's not going to work in 3.5.
I think to have the answer but sorry for my english...
I resolved the question putting another div with border and no background color over the image.
#imageContainer {
-webkit-border-radius:10px
-moz-border-radius:10px;
z-index:1;
}
#borderContainer {
position:absolute;
border:1px solid #FFFFFF;
-webkit-border-radius:10px
-moz-border-radius:10px;
z-index:10;
}
Workaround: Set the image as the
background of a container element,
then add border radius on that
element.
This won't work unless the image is exactly the same size of the div. Unless you use the new css property in firefox 3.6 which allows for background image sizing, but hardly anyone is on 3.6 already.
So I agree with Alex, that is if you make the image the size of the div/other elm.
I don't think there is a way to use -moz-border-radius to directly round an image in FireFox. But you can simulate the rounded corners the old fashioned way, with extra markup.
So that looks like this:
<div id="container">
<img src="images/fubar.jpg" alt="situation normal" />
<div class="rounded lt"></div>
<div class="rounded rt"></div>
<div class="rounded lb"></div>
<div class="rounded rb"></div>
</div>
Then the CSS:
#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url('images/rounded_LT.png') left top no-repeat;}
.rt {background:url('images/rounded_RT.png') right top no-repeat;}
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;}
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;}
The background images of the corners look sort of like a crescent moon, with transparency. This is a negative space technique, where you are allowing the image to show through where the corners have their transparency.
Div corners with PNG-24 backgrounds will work very nicely. If you can deal with the jagginess, you can use GIF backgrounds for IE6, or just remove background image entirely for square corners. Use conditional comments to serve the CSS to IE6.
.round_image_borders {
position:relative; // fix for IE8(others not tested)
z-index:1; // fix for IE8(others not tested)
width:114px;
height:114px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior:url(border-radius.htc); // fix for IE8(others not tested)
}
I got the "border-radius.htc" script from this link:
http://code.google.com/p/curved-corner/
What it does it adds support for round corners for IE8. I also had to set position:relative and z-index, because otherwise the div(and the background image) would show under the desired div container in which the container(round_image_borders) div was put.
This works for:
FF 3.6.16
IE 8
Chrome 12.0
And yes, the image must have the same size as the div with the class round_image_borders. But this workaround is intended to be used with images that all have the same size.
If you use overflow: hidden it won't display the image corners sticking out.
Who knows, they still might be there, just hidden.
img {
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Firefox does seem to clip a background image, so if you set an h1 background image and apply border-radius to that it will clip. (just verified in FF 3.6.12)