Animierte Google-Logos

**unpolitisch** · 07. 09. 2010, 08:36

Wie erstellt Google diese animierten "Grafiken"? Flash kommt ja zum Glück nicht zum Einsatz. Das macht es für mich interessant.

**WhiteRabbit89** · 07. 09. 2010, 09:09

Ich vermute das es **.gif Bilder sind.

**Tipo.** · 07. 09. 2010, 09:26

Hää wo ist da was animiertes. Bei mir ist nur das "normale" Logo zu sehen.

[edit]

Jetzt sehe ich die Animation auch.
Es sind einzelne DIVs die mit JavaScript bewegt werden.

[/edit]

**Psykal** · 07. 09. 2010, 09:29

hi,
das funktioniert mit div-Elementen und javascript. ist ne nette Spielerei.
gut ist, dass wenn man Javascript deaktiviert hat, dass man das normale logo sieht.

**unpolitisch** · 07. 09. 2010, 09:34

Gibt's dafür einen Oberbegriff? Ich finde irgendwie keine Tutorials für Dinge dieser Art.

**nitramf4** · 07. 09. 2010, 09:38

Ich seh da nix animiertes

Kannst du bitte einen Screenshot machen?

**Tipo.** · 07. 09. 2010, 09:57

Normal

Wenn man mit der Maus darüber fährt

**hell18** · 07. 09. 2010, 10:35

- HMTL 5
- Javascript (wobei CSS3 schon reichen könnte)
- Canvas
- CSS3

**DaTobi** · 07. 09. 2010, 10:48

vor paar Tagen hatten die auch son nettes Logo wo statt einem O ein bestimmtes Mölekül war. Dieses war an der Stelle festgepinnt und man konnte es mit der Maus anschubsen

**unpolitisch** · 07. 09. 2010, 11:38

Jo, das war die Form, wie sie u.a. beim traditionellem FußBall verwendet wird.

Danke für die Infos, welche Techniken verwendet wurden, aber gibt's irgendwo eine Art Tutorial oder zumindest die Befehle, etc.?

**hell18** · 07. 09. 2010, 14:21

Einfach den Quellcode von der google Seite anwatchen!

**Avatarus** · 07. 09. 2010, 14:26

Zitat von nitramf4

Kannst du bitte einen Screenshot machen?

Ja klar kann er das. Aber was nutzt es dir?
Weil ein Screenschot ja auch garantiert animiert ist? http://smilies-smilies.de/smilies/lu...milies/184.gif

**unpolitisch** · 08. 09. 2010, 03:33

Zitat von hell18

Einfach den Quellcode von der google Seite anwatchen!

Auweia, sieht nach hartem Tobak aus.

**hell18** · 08. 09. 2010, 18:03

Bei google muss man ein bissel aufräumen!

Ich kenne mich da auch nicht wirklich mit aus, sonst würde ich dir was genaueres erzählen ...

Das Pacman gab es ja mal irgendwann online zum selbst nutzen ...

**sars** · 08. 09. 2010, 20:58

Zitat von hell18

- HMTL 5, HTML klar, aber schnödes HTML 4 täte es vollkommen
- Javascript (wobei CSS3 schon reichen könnte), CSS3 würde nicht reichen und wurde hier auch gar nicht verwendet
- Canvas, Wie Tipo schon sagte, es sind einzelnen DIVs
- CSS3, auch CSS 2.1 reicht hier vollkommen

Wenn sich das speziell auf die Animation auf der Google-Seite bezieht, sind die deine Aussagen nach dem was ich gesehen hab, ziemlich willkürlich. Hast du dir die Animation überhaupt richtig angeschaut?

**unpolitisch** · 09. 09. 2010, 09:05

Also, JavaScript und CSS reicht, um so eine Grafik zu erstellen? Ich steige durch den Code gar nicht durch. Nun ist die Grafik ja auch weg. Gestern gab's wieder eine Neue, die farbig wurde, wenn man in die Suche Begriffe eingegeben hat.

**minimal-techno** · 09. 09. 2010, 10:25

Zitat von sars

Wenn sich das speziell auf die Animation auf der Google-Seite bezieht, sind die deine Aussagen nach dem was ich gesehen hab, ziemlich willkürlich. Hast du dir die Animation überhaupt richtig angeschaut?

Naja, CSS3 wurde schon benutzt, die hatten den DIV-Elementen nämlich einen -moz-border-radius gegeben, damit es Kreise werden und diese dann einfach mittels background-color eingefärbt. Geht natürlich auch mit Grafiken...

@ungesund
Ja, CSS und JavaScript reicht. Und es ist keine "Grafik", sondern viele einzelne div-elemente die mit CSS entsprechend gestyled wurden. Die Positionsangaben wurden dann einfach mit JavaScript manipuliert.

Heute gibt es im übrigen eine Live-Suche, die die Suchbegriffe direkt umsetzt.

**Tipo.** · 09. 09. 2010, 10:54

Da es mich auch interessiert wie das Logo animiert wurde, habe ich mal angefangen die DIVs so zu definieren das es Kreise ergeben.

Nur leider ist mir noch unklar wie man dort JavaScript einbettet damit sich die DIVs verschieben.

HTML

Spoiler:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>HTML,CSS & JavaScript | Animiertes Logo</title>
</head>
<body>
	<div id="wrap">
		<div id="no0" class="grey"></div>
		<div id="no1" class="black"></div>
		<div id="no2" class="grey"></div>
		<div id="no3" class="black"></div>
	</div> <!-- /wrap -->
</body>
</html>

CSS Stylesheet

Spoiler:

HTML-Code:

body {
	margin: 0px;
	padding: 0px;
}

* {
	margin: 0px;
	padding: 0px;
}

#wrap {	
	margin: 20% auto;
	height: 86%;
	width: 78%;
}
.grey {
	border-color: grey;
	background-color: grey;
}
.black {
	border-color: black;
	background-color: black;
}

#no0 {
	height: 10px;
	width: 10px;
	border: 1px solid grey;
	border-radius: 10px;
	-moz-border-radius:10px;
	-webkit-border-radius: 10px;
}
#no1 {
	height: 30px;
	width: 30px;
	border: 1px solid;
	border-radius: 15px;
	-moz-border-radius:15px;
	-webkit-border-radius: 15px;
}
#no2 {
	height: 50px;
	width: 50px;
	border: 1px solid;
	border-radius: 25px;
	-moz-border-radius:25px;
	-webkit-border-radius: 25px;
}
#no3 {
	height: 5px;
	width: 5px;
	border: 1px solid;
	border-radius: 5px;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
}

Wäre nett wenn hier jemand sich die Zeit nehmen würde das zu erläutern.

**minimal-techno** · 09. 09. 2010, 11:20

Simpel gedacht, würde ich sagen, man gibt den Kreis-divs ein position:absolute; mit diversen Positionsangaben und manipuliert dann bei einem onmouseover diese Positionsangaben mit JavaScript, z.B.: durch Zufallszahlen, die sich in einem gewissen Spektrum bewegen. Dann fliegen die Bälle zwar sonst wohin, aber immerhin...

Wie gesagt simpel.

Edit: Nee, moment, die wechseln dann ja einfach nur ihre Position... und "fliegen" nicht.

Edit2: Vielleicht lässt sich in Verbindung damit was machen: http://api.jquery.com/animate/