Did you ever wonder how fictional animated movies and arts are produced?
With constant development of digital technologies, we are more and more mesmerized by their capabilities. Pictures and paintings are not no longer created only by colors and brushes anymore. Now they are being created by lines of code, design software, and touch panels. In this blog, we are going to walk through several products of virtual reality and 3D printing, which are expanding opportunities for artists and expanding their audience. We will also discuss the impact of digital transformation on the marketing world and potential implications for the future.
Contents
What is digital transformation ?
The wide variety of digital arts
Digital technology is a new powerful marketing tool
The term digital transformation is known as the integration of digital technology across all functions of an organization, and it significantly alters how you do business and provide value to consumers. Digital transformation in art refers to the use of technology to change the way art is created, shared and experienced. This can include the use of digital tools such as computer software and mobile apps to create digital art, online platforms to share and sell art, and virtual and augmented reality experiences to view art in new ways. The goal of digital transformation in art is to make art more accessible, interactive, and engaging for people, and to open up new possibilities for artists to create and share their work.
2. The wide variety of digital arts
When it comes to exhibitions, museums, ballet, and opera, there are also new art experiences that are influenced by digital art. It is a promising technique that has been utilized to create these experiences, virtual reality. For instance is the Van Gogh museum in Atelier des Lumières. Situated in the romantic city of Paris, visitors get a chance to experience a different world of arts, where they are surrounded by a Van Gogh painting. With the help of enormous videos and light projections, art lovers can walk through the picture and other major works by varying artists here.
Taking the digital art to another level is the movie „Avatar 2“ which was lately released. It is considered one of the most complex and ambitious films ever made with a lot of technological advancements and innovations that are now widely used in the film industry. The movie Avatar was made using a combination of cutting-edge technology and traditional filmmaking techniques.
Techniques to bring the film’s alien world of Pandora to life, according to The film’s director, James Cameron
Performance Capture: Actors‘ movements and facial expressions were captured using motion capture technology and then translated onto computer-generated characters.
Virtual Cameras: Cameron used virtual cameras to pre-visualize the film’s scenes and plan out the camera work before filming.
Computer-Generated Imagery (CGI): The film’s alien creatures, landscapes, and environments were created using CGI and rendered using powerful computers.
Motion-Control Photography: Cameron used motion-control photography to capture the live-action elements of the film, such as the human characters.
3D Filming: The film was shot in 3D, which added depth and immersion to the film’s visuals.
Special Effects: The film’s many special effects, including explosions and flying creatures, were created using a combination of practical effects and CGI.
Moving on to the game industry, this field is also known for utilizing the advanced technologies to generate games. For instance, „Horizon Forbidden West“ is a highly-anticipated video game developed by Guerrilla Games for the PlayStation 5. The game is made using a combination of cutting-edge technology and extensive game development processes. The development process likely involves multiple stages, including:
KENZO Paris is a French luxury fashion house established in 1970 by Japanese designer Kenzo Takada. The company is utilizing 3D visualization to improve the presentation of its products and online experiences to customers. This technology offers a detailed and interactive portrayal of the products. It also includes all the important elements required to effectively advertise them, such as lighting, textures, angles, and color shades.
The use of 3D visualization is widespread across various industries, including e-commerce, media and advertising, 3D animation and printing, design, and architecture. This is due to the belief that 3D visualization is more effective for attracting and engaging customers. It’s because the human brain processes visuals much faster than text and 80% of the information we process is visual.
Marketers believe that using this technology in their marketing strategies is the key to success, as it allows customers to customize the product according to their preferences and lifestyle. It is estimated that 25-30% of consumers have a high level of interest in purchasing custom-made products.
Why can 3D visualization do?
3D visualization enables customers to preview items from a 360° angle, interact with it, and make changes if necessary. Customers can now choose their preferred design, color, material, accessories, and even personalize the product with engraving or messages. With just a few clicks, they can order and pay for their customized product.
Another benefit of 3D visualization is its ability to streamline the purchasing process. Once the customer is satisfied, they can order and pay in just a few clicks. This type of technology is particularly useful in the fashion industry, where customers often struggle with sizing and fit. By offering a detailed and interactive preview of the product, 3D visualization technology helps customers to make informed purchasing decisions and reduces the risk of returns and dissatisfaction.
The marketing efforts of KENZO Paris is a smart move that will likely result in increased sales and customer engagement. As consumers continue to demand more personalized and interactive shopping experiences, companies that invest in this type of technology will have a competitive advantage. KENZO Paris is setting the standard for innovative and effective marketing in the fashion industry.
The latest 3D visualization trend for E-Commerce platform
Interactive Product Demonstrations: 3D visualization is allowing e-commerce companies to provide customers with interactive product demonstrations, allowing them to explore products from every angle, zoom in to see details and even virtually try on items like clothing or jewelry.
Virtual Reality (VR) and Augmented Reality (AR) experiences: These technologies allow customers to experience products in a more immersive way, through either a fully-realized virtual environment or by overlaying digital information on the physical world.
Customizable Products: With 3D visualization, customers can now co-design products that better fit their needs and preferences, choosing designs, colors, materials, accessories, and personalizing products with engravings or messages.
360° Product View: 3D visualization provides customers with a 360° view of products, enabling them to see the product from all angles and helping to build trust and confidence in their purchasing decision.
4. Conclusion
In conclusion, digital transformation has had a significant impact on the art world. The advent of digital tools and technology has opened up new possibilities for artists, allowing them to create and share their work in ways that were previously impossible. Digital art has also enabled greater access to art education and resources, making it more inclusive and democratizing the art world.
With the help of digital tools, artists can reach a wider audience and create art that is interactive, immersive and dynamic. Digital art also has the potential to extend the shelf-life of artworks, making it more accessible to future generations. However, it’s important to note that digital transformation also has its downsides, such as dependence on technology, limited lifespan and limited originality. As digital art continues to grow in popularity, it will be important to strike a balance between utilizing the benefits of digital technology while also preserving the tradition, essence and value of art. Artists and art institutions must adapt to digital transformation by embracing the opportunities it provides, while also being mindful of its limitations and potential challenges.
About the author:
Linh Nguyen studies Informationsmanagement in her third semester with the main focus on marketing, media and communication. She is also a template developer for the KKH insurance company with the head office in Hannover, Germany.
Shion Kimu is in his third semester majoring in the Informationsmanagement. His main focus is Web Science and IT. Currently he is working as a web developer for Activelaw Company in Hannover, Germany.
Literature
apviz (2021): How 3D marketing can help raise your conversion rates. Available on https://apviz.io/blog/3d-marketing/ [Accessed on 01.01.2023]
Von Anfang an war es mein Plan, ein simples und optisch ansprechendes kleines Spiel zu designen, bei dem Animationen sinnvoll zum Einsatz kommen.
Nach ein paar verworfenen Ideen entschied ich mich für diese Variante, bei der die räumliche Wahrnehmung und das Gedächtnis des Spielers auf die Probe gestellt wird. Das Konzept des Spiels ist angelehnt an einen Intelligenztest für Schimpansen, bei dem deren Arbeitsgedächtnis getestet wird. Bei diesem werden aufeinanderfolgende Zahlen auf einem Bildschirm abgebildet, diese zahlen müssen dann in der richtigen Reihenfolge gedrückt werden. Nachdem die erste Zahl gedrückt wurde, werden alle anderen hinter identisch aussehenden Feldern versteckt.
Mein Spiel „forty in 49“ funktioniert nach einem ähnlichen Prinzip. Anstatt einer bestimmten Reihenfolge geht es hierbei aber um die Position der Felder. In einem Raster sind 7×7 Felder angeordnet,. Zu Beginn des Spiels verschwinden 40 der 49 Felder für wenige Sekunden. Der Spieler muss sich die Position der übrigen 9 Felder (Bomben) merken und diese vermeiden. Das Ziel ist es, möglichst viele der 40 Felder anzuklicken. Klickt man auf eine Bombe, ist das Spiel vorbei.
Animationen
Die Animationen erfüllen sowohl funktionale als visuelle Zwecke.
Um die Orientierung zu vereinfachen, werden Felder größer und ändern ihre Farbe, wenn der Mauszeiger darüber hovert. Wird ein Feld angeklickt, wird es entweder grün und verschwindet in einer rotierenden Animation, oder es wird rot und dreht sich langsam um 180° um die y-Achse und um 45° um die z-Achse. Dadurch wird dem Spieler visuell verdeutlicht, ob er richtig lag. Um das Ganze auditiv zu unterstützen, gibt es für den Klick auf die zwei Arten von Feldern jeweils einen Soundeffekt.
Ist das Spiel vorbei (alle richtigen Felder oder eine Bombe wurden geklickt), erscheint eine Karte mit der Punktzahl. Sie bewegt sich von unten nach oben und landet mittig über dem Spielfeld. Außerdem gibt es natürlich die fade-out/fade-in Animation am Anfang, ohne die das Spiel überhaupt nicht möglich wäre.
Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang, Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.
Dieser Beitrag ist ein Tutorial zu der Animation „Ein Tag mit Bobby“ bei dem auf die Details zum Code, Inhalt, Besonderheiten, das Konzept und Schwierigkeiten eingegangen wird. Die Bilder dienen zur Veranschaulichung und Nachvollziehbarkeit und sind anklickbar, sodass man diese in Vollbildmodus und besserer Auflösung betrachten kann.
Die Animation ist ein Storytelling, bei dem der User mit Hilfe von Buttonklicks durch die einzelnen Szenen geleitet wird. Dieser begleitet den Hauptcharakter Bobby durch den Tag und führt verschiedene Anweisungen durch, die Bobby in der Sprechblase gibt. Diese können durch einen Buttonklick realisiert werden. Sobald der User auf einen Button klickt, wird entweder die Szene gewechselt oder ein visueller Effekt erzeugt.
Das Ziel ist es mit dem User eine Interaktion zu starten, wobei dieser den Ablauf der Animation lenkt. Der User wird zu Beginn auch direkt von Bobby mit dem Namen angesprochen und aufgefordert mit ihm den Tag zu verbringen.
Die Idee eine Animation mit Hund(en) zu erstellen, kommt von der persönlichen Liebe zu Tieren und insbesondere zu Hunden. Die kindliche und amüsante Darstellung soll den User animieren und erfreuen. Die Hintergrundmusik sorgt für eine zusätzliche entspannte Atmosphäre, die die Stimmung der Animation unterstützt. Der User kann sich somit entspannen, zurücklehnen und die Animation genießen.
Aufbau
Die Animation ist in vier Szenen aufgeteilt:
Start-Szene (div class=“ story_start_scene“)
Bobby im Wohnzimmer (div-class= „dog_in_livingroom_scene“)
Bobby im Park (div class=“background_image_park_day“)
Schluss-Szene bei der Bobby im Park nachts ist (div class=“dog_in_park_night“)
Start Szene
Bei der Start Szene sieht man den schlafenden Bobby auf einem Teppich ohne jeglichen Hintergrund, das sich zu den restlichen Szenen unterscheidet. Der Grund dafür ist, dass man zum einen den beweglichen und farbwechselnden Hintergrund auf sich wirken lassen kann und zum anderen sollte es schlicht gehalten werden, damit der Wechsel zu den Hauptszenen spannender gestaltet wird. Zudem soll der Fokus zu Beginn auf dem Hauptcharakter liegen. Mit dem Buttonklick auf „Aufwecken“ startet die ganze Animation.
Start Szene
Zweite Szene
In der zweiten Szene befindet sich Bobby im Wohnzimmer, wo er zuvor auf dem Teppich geschlafen hat. Der User hat ihn aufgeweckt und nun fragt Bobby ihn nach seinem Namen. Die Abfrage passiert zwischen der ersten und der zweiten Szene, die mit Hilfe von JavaScript erzeugt wurde. Je nachdem welchen Namen der User eingibt, erscheint dieser in dem Begrüßungstext in der Sprechblase. Hier wird der User aufgefordert die Anweisungen von Bobby durchzuführen. In dieser Szene soll der User mit Bobby in den Park gehen.
Zweite Szene
Dritte Szene
Die dritte Szene spielt sich im Park tagsüber ab in den mehrere Aktionen passieren. Zu Beginn sieht man den Park, in dem sich ein Grill und Bobby befinden. Bobby weist darauf hin, dass es vom Grill sehr gut riecht und er gerne einen Hot Dog haben möchte. Dieser Bitte kann der User nachgehen, indem er auf den langsam erscheinenden Button „Hot Dog geben“ klicken kann. Sobald dies gemacht wurde, erscheint ein animierter Hot Dog, der vom Grill aus zu Bobby in einer 360 Grad Drehung geworfen wird. Daraufhin bedankt sich Bobby und gibt den nächsten Hinweis, dass er seinen Freund Bello sieht und mit ihm Ball spielen möchte.
Dritte Szene
Auch hier kann der User der Anweisung nachgehen, indem er auf den nächsterscheinenden Button „Mit Bello spielen“ klickt. Hier erfolgt die nächste Animation, bei der sich Bello und Bobby den Ball zu werfen. Dabei springen beide versetzt hoch und werfen den Ball mit ihrem Kopf einander zu. Nun erscheint der fünfte Button „Weiter“, der den User darauf hinweist, dass danach die nächste Szene erscheint.
Vierte Szene
Vierte Szene
Die vierte und letzte Szene findet in dem selben Park statt. Jedoch ist es schon spät geworden und Bobby ist müde. Er macht vor Freude Rückwärtssaltos und bedankt sich für den großartigen Tag, den er mit dem User erlebt hat. Auch hier weist Bobby daraufhin, dass er müde und erschöpft ist. Hier ist es Zeit sich von Bobby zu verabschieden und ihm eine Gute Nacht zu wünschen.
Letzte Szene
Mit dem Buttonklick kann man dies tun, wobei das Bild von Bobby in den ursprünglich schlafenden Zustand zurückgebracht wird. Es taucht ein Eyecatcher auf, der zoomt und sich hin und her in verschiedene Winkel dreht. Dies ist der Abschluss der Animation, der durch den animierten Text „Gute Nacht, Bobby“ kenntlich gemacht wird. Der letzte Button unterscheidet sich in der Erscheinungsweise von allen anderen, denn dieser macht auf sich Aufmerksam, indem sich dieser hin und her bewegt und dabei vertikal spiegelt. Der Grund für diese Erscheinungsweise ist das Aufmerksam machen, dass ab hier keine neue Szene erscheint, sondern alles nochmal vom Anfang beginnt. Somit ermöglicht dieser Button die Animation nochmal neu zu starten
Der Code
Für die Animationen wurden HTML5, CSS3 sowie JavaScript und jQuery benutzt. HTML5 wurde für das Grundgerüst und Aufbau, CSS3 für die Animation sowie das Styling und JavaScript bzw. jQuery für das Auslösen/Verstecken verschiedener Animationsobjekte benutzt.
Allgemeine Einstellungen
In der ID „animation_start“ in HTML5 spielt sich die gesamte Animation ab. Die jeweiligen Szenen sind in einzelne div-classes unterteilt in denen die dazugehörigen Objekte enthalten sind. Die div-classes sind nach den Szenarien benannt, das das Erkennen der Inhalte vereinfacht.
<div id="animation_start"class="whole_animation"> <!--ID der gesamten Animation-->
<div class="story_start_scene"><!--Erste Szene: Startbildschrim-->
<img src="sleeping_dog.png" id="sleep"/>
<img src="carpet.png" id="carpet"/>
</div>
<div class="dog_in_livingroom_scene"> <!---Zweite Szene: Bobby im Wohnzimmer Szene samt Begrüßung-->
<div class="living_room_background">
<img src="room.png" class="backgroundimage_livingroom" style="visibility: hidden;"/>
</div>
<div class="dog_character">
<img src="standing_dog.png" id="hello_dog" style="visibility: hidden;"/>
<img src="sprechblase.png" id="speak1" style="visibility: hidden;"/>
<p id="welcome_text" style="visibility: hidden;">Hallo! Ich bin Bobby. Lass uns den Tag zusammen verbringen.</p>
</div>
</div>
<div class="dog_in_park_day"> <!--Dritte Szene: Bobby im Park Szene mit dazugehörigen Objekten-->
<div class="background_image_park_day">
<img src="meadow_at_day.png" class="backgroundimage_park_day" style="visibility: hidden;"/>
</div>
<div class="park_items">
<img src="grill.png" id="bbq" style="visibility: hidden;"/>
<img src="food.png" id="hot_dog" style="visibility: hidden;"/>
<img src="standing_dog2.png" id="dog_at_park" style="visibility: hidden;"/>
<img src="sprechblase2.png" id="speak2" style="visibility: hidden;"/>
<p id="hot_dog_text" style="visibility: hidden;">Das riecht aber toll! Kannst du mir einen Hot Dog geben?</p>
<p id="thank_you_hot_dog_text" style="visibility: hidden;">Danke! Ouh Schau! Da ist Bello. Ich möchte mit ihm Ball spielen.</p>
<img src="playing_dog_brown.png" id="bello" style="visibility: hidden;"/>
<img src="playing_dog_grey.png" id="bobby" style= "visibility: hidden;"/>
<img src="ball.png" id="toy" style="visibility: hidden;"/>
</div>
</div>
<div class="dog_in_park_night"><!--Abschlussszene: Bobby im Park nachts.-->
<div class="background_image_park_night">
<img src="meadow_at_night.png" id="backgroundimage2" style="visibility: hidden;"/>
<img src="dog_by_night.png" id="night_dog" style="visibility: hidden;"/>
<img src="sprechblase3.png" id="speak4" style="visibility: hidden;"/>
<img src="sleeping_dog2.png" id="tired" style="visibility: hidden;"/>
<p id="thank_you_for_the_day" style="visibility: hidden;">Danke dir für den schönen Tag! Ich bin jetzt aber müde.</p>
<p id="good_night_bobby" style="visibility: hidden;">Gute Nacht, Bobby</p>
</div>
</div>
</div><!--Ende der "animation_start"-->
In der aside-class wurden alle Buttons und der Titel der der Animation eingetragen, da diese Inhalte sich immer an der selben Position befinden.
<body>
<!--Alle Elemente sind auf "visibility:hidden" gesetzt, die über JavaScript aktiviert werden, wenn man auf einen Button klickt-->
<script src="animation_functions.js"></script> <!--Einbindung der JavaScript Datei-->
<aside class="title_and_buttons"> <!--Übergreifende Class für alle Buttons und Titel der Animation (h1) damit die Position die selbe bleibt-->
<h1> Ein Tag mit Bobby</h1>
<button id="button_aufwecken">
<a class="button_1">Aufwecken</a>
</button>
<button id="button_park" style="visibility: hidden;">
<a class="button_2">Lass uns in den Park gehen</a>
</button>
<button id="button_hot_dog" style="visibility: hidden;">
<a class="button_3">Hot Dog geben </a>
</button>
<button id="button_play" style="visibility: hidden;">
<a class="button_4">Mit Bello spielen</a>
</button>
<button id="button_next" style="visibility: hidden;">
<a class="button_5">Weiter</a>
</button>
<button id="button_good_night" style="visibility: hidden;">
<a class="button_6">Gute Nacht!</a>
</button>
<button id="button_reload" style="visibility: hidden;">
<a class="button_7">Neustart</a>
</button>
</aside>
Auffallend im Code ist, dass alle Objekte nicht sichtbar sind (visibility: hidden). Diese werden zu dem Zeitpunkt wann die jeweiligen Objekte zu sehen sein sollen mit Hilfe von jQuery sichtbar gemacht. Die allgemeine Position aller Elemente ist in der ID „animation“ sowie dessen class „whole_animation“ zu sehen. So entsteht ein Rahmen für die verschiedenen Bilder, das die Zentrierung der Szenen möglich macht. Die gewählte Größe und Position erstellt eine Box, wo sich die Animation abspielt. Dies soll ein Gefühl erzeugen, als würde man in einem Kino vor einer Leinwand sitzen.
Im Body ist die Animation des ineinanderfließenden Hintergrundes zu sehen. Die keyframes bringen diese Animation zum Laufen. Zunächst muss man drei Farben definieren, die man in dem Übergang haben möchte. Des Weiteren war es wichtig die Dauer und Länge zu definieren. In diesem Fall sollte der gesamte Übergang 13 Sekunden dauern und unbegrenzt durchlaufen.
body {
font-family: "Comic sans MS";
background-size: cover;
justify-content:center;
background-position: center;
background: -webkit-linear-gradient(132deg, #FC415A, #591BC5, #4a8ead);
background-size: 400% 400%;
align-items: center;
min-height: 100%;
overflow:hidden;
-webkit-animation: moving_background 13s ease infinite;
animation: moving_background 13s ease infinite;
}
@-webkit-keyframes moving_background { /*Animation des Backgrounds, der in Dauerschleife die Farben wechselt*/
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%; /*Inspired by https://www.sliderrevolution.com/resources/css-animated-background/*/
}
100% {
background-position: 0% 50%;
}
}
Die Buttons
Die Buttons haben wie schon zuvor erwähnt den funktionalen Zweck den User durch die Szenen zu geleiten und verschiedene Animationen hervorzurufen. Somit sind diese essenziel für das Abspielen der Animation. Aus diesem Grund werden diese oberhalb der Animationsbox dargestellt, damit die Aufmerksamkeit des Users zu den bestimmten Zeitpunkten darauf gelenkt wird.
Die Buttons haben alle den selben Stil, jedoch haben alle verschiedene Dauer und Art und Weise der Animation. Daher wurde jeder einzelne Button in CSS3 angelegt. Das Aussehen der Buttons ist Oval und hat drei Farbverläufe, das in zarten und hellen Farben gehalten ist, um mit dem Hintergrund zu harmonieren. Beim Hovern erfolgt ein Spiegeleffekt bei dem die Farben von rechts nach links ineinander laufen. Durch das bewegte Gelb wir ein Relief- bzw. Spiegeleffekt erzeugt. Die transition ermöglicht dies.
#button_aufwecken { /*Design und Animation der Buttons. Alle haben die gleiche Einstellung nur andere Animationsangaben. Daher jeden Button einzeln angelegt, anstatt die zusammenzufassen*/
border-radius: 50%;
align-items: center;
font-size: 15px;
display: flex;
margin: auto;
background-image: linear-gradient(135deg, #ee9ca7 0%, #fbed96 51%, #ee9ca7 100%); /*Inspired by https://blog.avada.io/css/button-hover-effects/*/
background-size: 200% auto;
box-shadow: #a05a9c 0px 0px 5px;
-webkit-animation: push_buttom 3s infinite;
animation: push_button 3s infinite;
outline: none;
}
@-webkit-keyframes push_button { /*Inspired by https://css-tricks.com/css-animation-libraries/*/
0% {
box-shadow: 0px 0px 4px rgb(255,250,250);
}
50% {
box-shadow: 0px 0px 23px rgb(255,250,250);
}
100% {
box-shadow: 0px 0px 12px rgb(255,250,250);
}
}
@keyframes push_button {
0% {
box-shadow: 0px 0px 4px rgb(255,250,250);
}
50% {
box-shadow: 0px 0px 23px rgb(255,250,250);
}
100% {
box-shadow: 0px 0px 12px rgb(255,250,250);
}
}
#button_aufwecken:hover {
background-position: right center;
transition: all 0.5s ease-out;
}
.button_1{
flex: 1 auto;
margin:5px;
padding:10px 25px;
text-align:center;
transition: all 0.5s ease-out;
cursor:pointer;
background-size: 200% auto;
font-family: "Comic sans MS";
}
Animierte Objekte
Alle benutzen Bilder, bis auf die Hintergrundbilder der Szenen, haben einen funktionalen Zweck. Alle Bilder sind PNG Dateien und von Pixabay. Durch die position: relativ war es einfach alle Objekte in einer Szene zu platzieren. Ausgerichtet und an den gewünschten Platz gebracht wurde mit bottom, top, left, right und margin. Keyframes erzeugen die Animationen der Objekte. Die nachfolgenden Abschnitte beschreiben die einzelnen animierten Objekte.
Text in Sprechblase
Der sprechende Text, den Bobby in der Sprechblase sagt zoomt rein und raus und wechselt dabei zwischen drei Farben. So sollte die Aufmerksamkeit auf den Text gelenkt werden, damit der User den Anweisungen folgen kann. Dazu wird die animation-timing-function auf ease gesetzt. Zudem soll der Zoomeffekt in Dauerschleife ablaufen. Daher der Wert infinite. Durch scale() konnte die Größe der Transformation des Textes eingerichtet werden. Color sorgt für den Farbverlauf, der sich über die verschiedenen Sequenzen (0%, 50%, 100%) ändert.
Für die Animation des fliegenden Hot Dogs wurden in den keyframes die Werte translateX(), translateY() und rotate() verwendet. Die beiden ersten Werte sorgen für die Verschiebung auf der X- und Y-Aschse, wobei ein negativer translateY() Wert das Objekt nach oben versetzt. Daher ist bei 50%, das der höchste Punkt der Flugbahn sein soll, ein negativer Wert von -80px. rotate() sorgt für die Rotation des Objektes. Hierbei müssen Gradzahlen eingetragen werden.
Die Animation der zwei spielenden Hunde war am schwierigsten zu gestalten, da hier der Zeitfaktor eine große Rolle spielt, damit alles synchron abläuft. Zunächst die Gestaltung der beiden springenden Hunde. Hierbei muss man die Sequenzen (0%-100%) der bottom-Wert ändern. Je größer der Wert, desto höher steigen die Objekte auf. Die ease-out Eigenschaft sorgt dafür, dass das Ende der Sequenz langsamer abläuft. So kommt der fließende Sprung zustande. Beide Hunde haben die selben Animationseigenschaften. Der Unterschied liegt im animation-delay. Bello fängt eine Sekunde später an zu springen als Bobby. So entsteht der abwechselnde Sprung.
Die Animation des Balls wurde nach dem selben Konzept wie die des Hot Dogs gestaltet. Hier bestand die Schwierigkeit mit der Positionierung und der Dauer des fliegenden Balls. Es musste alles auf die beiden springenden Hunde angepasst werden, sodass der Effekt eines Kopfballs entsteht.
Saltomachender Bobby
In der letzten Szene macht Bobby ein Rückwärtssalto. Dieser Effekt wurde mit den gleichen Eigenschaften wie bei dem fliegenden Hot Dog und Ball animiert. Da der Charakter sich auf einer Stelle bewegt und nur hochspringt und dreht, bleibt der translateX()vWert bei 0px. Dem entsprechend muss der translateY() und rotate() angepasst werden.
Die Buttons wurden im vorherigen Kapitel schon beschrieben. Nun wird näher auf die animierenden Effekte eingegangen. Der Effekt des Einblendens wurde durch die opacity Eigenschaft erzeugt, der von 0 auf 1 steigt und durch die animation-duration in die Länge gezogen wird. Der erste und letzte Button haben jedoch ein paar zusätzliche Effekte. Beim ersten Button „Aufwecken“ leuchtet der Button-Hintergrund in Weiß. Durch den versetzten box-shadow und der Dauerschleife (infinite) wird das pulsierende Leuchten erzeugt (siehe Bild ). Der letzte Button „Neustart“ dreht und bewegt sich von links nach rechts und rückwärtsrum, während sich dieser vertikal spiegelt. Die animation-direction: alternate-reverse gibt an, dass die Animation sich vor- und zurückspielen soll. Animation-timing-function sorgt für den linearen. also gleichbleibenden/flüssigen Ablauf. translateX() sorgt dafür, dass sich der Button von links nach rechts bewegt. scaleX() hingegen sorgt für die Spiegelung, wobei der negative Wert die Spiegelung an der X-Achse erzeugt.
Gute Nacht, Bobby Schrift
Der Abschließende Text „Gute Nacht, Bobby“ wurde mit einer Zoom-, Leucht- und Rotations-Funktion gestaltet. Wie schon zuvor erwähnt erzeugt scale() den Zoomeffekt. Für das Textleuchten ist text-shadow zuständig. rotate() sorgt für die Drehung des Textes. Der Unterschied bei dieser Textanimation liegt in der animation-timing-function. Hierbei setzt man cubic-bezier () ein um, einen Verzerrungseffekt zu erstellen.
var name = "Snoopy" /*Variable für die Namensabfrage für die Begrüßung von Bobby*/
$(document).ready(function(){
/*Funktion, bei der bei einem Buttonklick bestimmte Objekte sichtbar oder ausgeblendet werden*/
$("#button_aufwecken").on("click", function() { /*Button "Aufwecken"*/
$(".story_start_scene").css({"visibility": "hidden"});
$(".backgroundimage_livingroom").css({"visibility": "visible"});
$("#hello_dog").css({"visibility": "visible"});
$("#speak1").css({"visibility": "visible"});
$("#button_park").css({"visibility": "visible"});
$("#button_aufwecken").css({"visibility": "hidden"})
$("#welcome_text").css({"visibility": "visible"});
$("#name_text").css({"visibility": "visible"});
$("form").css({"visibility": "visible"});
$("#button_park").css({"-webkit-animation-play-state": "running"}); /*Animationen, die pausiert werden, werden hierbei zum Abspielen gebracht*/
$("#welcome_text").css({"-webkit-animation-play-state": "running"});
name = prompt("Bitte gib deinen Namen ein", "Snoopy"); /*Namensabfrage. Inspired by https://www.w3schools.com/jsref/met_win_prompt.asp*/
console.log(name);
if (name != null) {
document.getElementById("welcome_text").innerHTML =
"Hallo " + name + "! Ich bin Bobby. Lass uns den Tag zusammen verbringen.";
}
});
Um die Übergänge zwischen den einzelnen Szenen und Animationen möglich zu machen, wurde jQuery eingesetzt. Durch den Buttonklick werden Objekte, die in HTML5 auf „hidden“ gesetzt sind, sichtbar gemacht. Dafür nutzt man die $(„#button“).on(„click“, function() {}}); . Diese zeigt welche Objekte beim Buttonklick gezeigt werden und welche verschwinden sollen. Die Namensabfrage zwischen der ersten und der zweiten Szene erfolgte über JavaScript mit der promt() Methode.
Bobby JS
Hierbei wurde eine Variable erstellt, das einen default Wert liefert, der in der promp() Abfrage und if-loop eingefügt ist. Es öffnet sich ein Pop-up Fenster bei dem die Aufforderung „Bitte gib deinen Namen ein“ und dem default Wert „Snoopy“ steht. Diese wurden zuvor definiert. Wenn der User seinen Namen eintippt, nimmt die p id=“welcome_text“ diesen entgegen und Bobby begrüßt den User mit „Hallo [Username]! Ich bin Bobby. Lass und den Tag zusammen verbringen“. Falls das Eingabefeld leer bleibt, begrüßt Bobby den User mit dem Namen null. Durch diese Funktion wird eine Bindung zum User aufgebaut.
Die Animationen, die mit Hilfe von transitions und keyframes in CSS3 erstellt wurden, wurden bei webkit-animation-play-state auf paused gesetzt. Der Grund dafür ist, dass bestimmte Funktionen wie animation-delay oder animation-duration ab der Start Szene anfangen zu zählen. Das war aber nicht die Intention. Es sollten alle Abläufe erst nach einem Buttonklick starten. So war das Problem z.B. bei dem zweiten Button „Lass und in den Park gehen“. Dieser wird nach 3 Sekunden eingeblendet. Wäre -webkit-animation-play-state auf running gesetzt, so hätte das Einblenden des Buttons nach 3 Sekunden nicht funktioniert, wenn man sich länger als 3 Sekunden in der Start Szene befunden hätte. Der Button wäre dann beim Szenenwechsel schon da und der Einblende Effekt wäre nicht sichtbar. Damit die einzelnen Animationen erst beim Buttonklick abspielen, muss man diese über jQuery bei -webkit-animation-play-state auf running setzen.
Eine Besonderheit ist die im Hintergrund eingesetzte Musik, um die Animation spannender zu gestalten und den User in eine angenehme Stimmung zu versetzen. Des Weiteren wurden so gut wie alle benutzen Objekte animiert. Es wurde versucht jedes Animationselement individuell zu gestalten, um verschiedene visuelle Effekte zu erzeugen. Die letzte Besonderheit ist, dass der letzte Button einen Neustart der Animation ermöglicht, falls man erneut das Story Telling durchspielen möchte.
Schwierigkeiten
Beim Erstellen der Animation traten zwei Probleme auf.
Der animierte Sprechtext sollte ursprünglich abgetippt werden. Dafür wurde die step() Methode verwendet. Leider konnte ein Zeilenumbruch für die Animation nicht erstellt werden, da ansonsten der „abgetippte Text“ nicht korrekt funktioniert hat wie er es sollte. Dieser hätte in die Sprechblase passen müssen. Daher wurde eine alternative Darstellung des Textes eingebaut.
Die Hintergrundmusik wird manchmal in Google Chrome nicht abgespielt. Daher wird empfohlen sich die Animation in Microsoft Edge anzuschauen.
Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang, Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.
Die Idee der Animation ist, ein erheiterndes, kleines Visual Graphic Novel zu erstellen, durch das der User mit visuellen Effekten durchgeführt wird.
Das Ziel ist, den User von Anfang bis Ende durch mehrere kleine Animationen zu führen, während er Interaktionen ausführt und Feedback zu den ausgeführten Aktionen erhält. Das Feedback besteht ebenfalls aus visuellen Effekten, sodass der User jederzeit weiß, wo und in welcher Ebene er sich befindet.
Die Führung durch das Visual Graphic Novel erfolgt visuell durch verschieden aufleuchtende Buttons. Durch sich farblich (türkis) abgrenzende Umrandungen der Buttons wird der User zu den gewünschten Aktionen gelotst, da diese am meisten auffallen (über Bewegung und Farbe).
Das Visual Graphic Novel besteht aus zwei Szenen, die der Nutzer frei wählen kann. Die Reihenfolge der Auswahl hat dabei keine Auswirkungen.
Die erste Ebene, der Startbildschirm, dient dem User dazu, das Visual Graphic Novel zu starten.
Auf der zweiten Ebene kann der User eine Szene (Home- oder Outdoor-Szene) auswählen, ohne jedoch das Szenenbild vorher zu sehen. Hier liest er nur den Text der Entscheidungsmöglichkeiten, was auch einen kleinen Überraschungseffekt bei der Auswahl geben soll.
Auf der dritten Ebene kann der User dann zwischen den beiden Szenen hin und her springen, so oft er möchte. Um das ganze unterhaltsamer zu machen, spricht die Figur einen Text. Die Sprechblase wiederholt sich hierbei unendlich oft, sodass der User den Text gut lesen kann, ungeachtete der Lesegeschwindigkeit.
Die vierte Ebene ist der Endbildschirm, wo sich ein „Thanks for playing“ (DE: „Danke für das Spielen“) bei dem User verabschiedet. Auf dieser Ebene hat der User die Möglichkeit, das Visual Graphic Novel erneut zu starten.
Verwendete Programmiersprachen:
Die ganze Animation wurde auf Codepen erstellt. Für die Erstellung der einzelnen Animation/-en wurden verwendet:
Die Besonderheiten bei dem Visual Graphic Novel sind klein, haben jedoch einen großen Effekt und Einfluss.
Zunächst ist das Design schlicht gehalten, bzw. der Hintergrund und die Hauptfarbe der Buttons. Dadurch wird die Aufmerksamkeit des Users auf die Szenen(-bilder) und die einzelnen, visuellen Effekte gelenkt.
Die Effekte der Klasse ‚hint‚
Die Klasse ‚hint‘ hat das Ziel, den User durch das Visual Graphic Novel zu führen. Der visuelle Effekt ist ein türkis-farbenes Pulsieren (in CSS definiert). Beim Startbildschirm (Ebene 1) wird die Aufmerksamkeit des Users somit vor allem auf den Start-Button gelenkt. Danach (Ebene 2) wird der Effekt „verschoben“ und ist nun nur auf der Szenen-Auswahl zu sehen, damit der User weiß, dass er sich nun für eine der beiden Optionen entscheiden soll. Ist nun eine Szene ausgewählt (Ebene 3), wird der pulsierende Farb-Effekt auf die nicht ausgewählte Option verschoben, sowie den Stop-Button. Damit weiß der User zum Einen, dass die andere Option noch ausgewählt werden kann, und zum Anderen, dass jederzeit das Spiel nun beendet werden kann. Wird nun auf den Stop-Button geklickt, wird der Farb-Effekt erneut auf den Start-Button geschoben, damit der User nun die Möglichkeit erkennt, erneut auf Start zu klicken. Die Steuerung, wann der Farb-Effekt, bzw. die Klasse ‚hint‘ wo hin verschoben werden soll, wird mit Hilfe der Buttons in JavaScript festgelegt. Der Effekt selbst wird mit CSS erstellt, mehr dazu unter dem Abschnitt Visuelle Effekte.
Die Figur und Objekte
Die Figur ist nicht nur eine Dekoration, sondern erfüllt auch einen Zweck: Ein Feedback an den User. Das Feedback ist simpel: Wurde sich nun für eine Szene entschieden, taucht eine Sprechblase von der Figur auf. Damit wird dem User gezeigt, dass die Szenen-Auswahl durchgeführt wurde und etwas passiert ist. Dabei wird der gesprochene Text in der Sprechblase unendlich oft wiederholt, damit der User jederzeit den Text erneut und so oft er will lesen kann. Des Weiteren erheitert der gesprochene Text der Figur (hoffentlich!) den User und hinterlässt somit einen positiven Eindruck. Die Figur wird in CSS mit der Klasse ‚figure‘ definiert.
Die anderen Objekte / Graphiken dienen hier der Dekoration und erhöhen den Spaß-Effekt beim Umschalten der Szenen.
Der Wegweiser
Der Wegweiser (eine SVG-Graphik), der einzig allein in Ebene 2 auftaucht, besitzt eine wichtige Funktion: Das Wegweisen. Da Graphiken, bzw. Bilder, meist mehr für sich sprechen als Text, wird dem User vor dem Lesen der Optionen bereits gezeigt, dass nun eine Entscheidung auf ihn zukommt. Ein Wegweiser ist hierbei ein allgemein bekanntes Symbol, dass von dem User nicht falsch verstanden werden kann, und dabei schneller auffällt als der Text in den Optionen. Der Wegweiser wird mit der ID ‚#signpost‘ in CSS definiert und mit Hilfe von JavaScript gesteuert. Mehr dazu unter dem Abschnitt Buttons & Option.
Grundbausteine
Da es in dem Visual Graphic Novel viele verschiedene Elemente gibt, die von JavaScript gesteuert werden und auf verschiedenen Instanzen auftauchen sollen, schließen verschiedene div-Container diese ein.
Im ‚body‘ wird alles Wichtige wie background-size, background-color, sowie die Inhaltsplatzierung innerhalb des ‚bodys‘ und die Schriftart definiert. Die border- und box-shadow-Einstellungen schaffen hierbei eine Abgrenzung von dem restlichen Browserfenster und begrenzen die Darstellungsoberfläche des Visual Graphic Novels.
Der div-Container mit der Klasse ‚main-content‘ ist dafür da, um den gesamten Inhalt (also alle Graphiken) als eine Einheit zu platzieren und sie durch JavaScript und JQuery zu steuern, d.h. einen Start-Bildschirm zu erschaffen. Damit kann der gesamte Inhalt in ‚main-content‚ mit einem Klick aus- und eingeblendet werden, wenn einer der Buttons gedrückt wird. Das geschieht dadurch, dass dieser Klasse eine Id ‚gamestop‘ und ‚gamestart‘ (definiert in CSS) mit der Eigenschaft ‚visibility:hidden‘ zugewiesen und wieder entfernt wird.
<!-- die Id wird in JS genutzt, um einen Startbildschirm zu erschaffen --!>
<div id="gamestart" class="main-content"> <!-- wird genutzt, um den main-content zu steuern und zu positionieren -->
Der div-Container ‚illustration‘ enthält alle Graphiken, bzw. SVG-Graphiken, und fixiert diese. Da nicht alle SVG-Graphiken eine geeignete Proportionalität besitzen, um zusammen dargestellt zu werden, hilft das Fixieren auch dabei, um sie gegenseitig aufeinander abzustimmen.
Person-type: Home-Body & Outdoor-Person
<div class="person-type home-body active"> <!-- hier ist die home-scene mit dazugehörigen Objekten -->
<div class="scenery">
<img src="https://image.freepik.com/free-vector/living-room-interior-with-panoramic-window-night-time_33099-1735.jpg" class="backgroundimg"/>
</div>
<div class="background.items">
<img src="https://image.flaticon.com/icons/svg/214/214283.svg" width="100px" height="400px"/>
</div>
<div class="foreground-items">
>img src="http://image.flatcon.com/icons/svg/198/198916.svg" width="65px" style="margin-left:-10%"/>
<img src="Http://image.flaticon.com/icons/svg/3145/3145435.svg" width="65px" style="padding-left:30%;"/>
</div>
</div>
Mit der Klasse ‚person-type‚ werden in CSS alle Kindelemente dieser Klasse definiert und in JavaScript zwischen den Szenen hin- und hergewechselt, wenn die jeweilige Option ausgewählt wird.
.person-type > div {
transform: scale(0);
opacity:0;
}
.person-type.active > div {
transform: scale(1);
opacity: 1;
Durch ‚person-type > div‘ werden alle Kindelemente der Klasse ‚person-type‚ ausgewählt. Es gibt ‚person-type‚ einmal für die Home-Szene (inklusive der dazugehörigen Graphiken) und dann für die Outdoor-Szene. Wenn eine der Szenen ausgewählt wird, wird diese Szene durch ‚person-type.active‘ (definiert in CSS) nach „vorne geschoben„‚(transform:scale (1))‘ und durch ‚opacity:1‘ sichtbar gemacht. Die andere Szene wird durch ‚person-type > div‘ nach „hinten geschoben„ ‚(transform:scale(0))‘ und mit ‚opacity:0‘ unsichtbar gemacht. Dadurch können beide Szenen an den gleichen Platz im Container geschoben werden, ohne dass sie sich gegenseitig verdrängen. Die Szenenauswahl wird durch den Button mit JavaScript ausgelöst. Darauf wird später in Buttons & Option noch mehr eingegangen.
Container Scenery & Backgroundimg
Der div-Container ’scenery‘ umfasst das Szenenbild (für jeweils die Home- und Outdoor-Szene). Mit dieser Klasse wird der Einblendungseffekt / Übergangseffekt beim Szenenwechsel in CSS mit ‚transition:‘ definiert.
Der div-Container ‚backgroundimg‘ wird in CSS definiert und erfüllt den Zweck, die Hintergrundbilder der Szenen auf die gleiche Größe zu skalieren und dem Bild mit ‚border-radius‘ und ‚box-shadow‘ eine Form und einen visuellen Tiefen-Effekt zu geben.
.scenery 7
transition: all 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: -2;
0/* Styled die Hintergrundbilder der Scenen */
.backgroundimg7
border-radius:50%;
margin-left:-73%;
width:626px;
height: 3356px;
box-shadow: 0px 0px 15px #000000;
Der ‚foreground-items‘ div-Container beinhaltet die Graphiken, die sich in den beiden Szenen jeweils weiter vorne befinden und bei einem Szenenwechsel später eingeblendet werden als die Graphik im Hintergrund und das Hintergrundbild.
Mit ‚transition:‘ wird der Einblendungseffekt / Übergangseffekt dieser Objekte beim Szenenwechsel festgelegt.
Background-items Container
Der div-Container mit der Klasse „background-items“ beinhaltet die eine Graphik (jeweils in beiden Szenen), die zu einem früheren Zeitpunkt als die Graphiken in dem ‚foreground-items container‘ in der ausgewählten Szene auftauchen. Dies ist in CSS mit ‚transition:‘ definiert, wie in der folgenden Abbildung zu sehen ist.
Der div-Container ‚option-wrapper‘ beinhaltet beide Szenen-Optionen und umschließt diese, damit sie zusammen in einem Button erscheinen können. Außerdem wird mit dieser Klasse der div-Container per JavaScript „anvisiert“, bzw. mit einem Leuchteffekt versehen, damit dieser zum geeigneten Augenblick die Aufmerksamkeit des Users bekommt. Zu den Buttons unter Buttons und zu dem Leucht-Effekt unter Visuelle Effekte mehr.
<div class="option-wrapper">
<aclass="option active wobble-vertical-on-hover homeoption hint" data-option="home">
I'm gonna read a nice book and stay in. </a>
<a class="option wobble-vertical-on-hover outdooroption hint" data-option="outdoor">
I'm gonna explore the wide world and beyond! </a>
</div>
Buttons & Option
Die Klasse ‚option‘ ist allen Buttons zugeteilt. Also jeweils dem Start- und Stop-Button sowie beiden Szenen-Optionen. Die Klasse ‚option‘ regelt mit ‚transition:‘ in CSS den Übergang der ausgewählten Option sowie den Style der einzelnen Optionen. Somit grenzen sich z.B. die Outdoor-Szene und Home-Szene innerhalb des ‚Option-Wrappers‘ voneinander ab und erscheinen als zwei eigene Buttons. Mit ‚cursor‘ wird zudem der Cursor über dem Button definiert.
Die Klasse ‚active‘ definiert, wie die ausgewählte Option aussieht. Durch die Klasse ‚active‘ verändert sich die Hintergrundfarbe und Schriftfarbe des Buttons (gelber Hintergrund, schwarze Schrift), wenn dieser angeklickt wird.
Bei der Szenenauswahl wird der ‚person-type‘ der jeweiligen Option angesprochen, der bei beiden Szenen unterschiedlich ist und in der JavaScript-Funktion jeweils definiert ist, bzw. welche Elemente dazugehören. Der Wechsel der Optionen, sowie die Zuweisung der Klasse ‚active‘, geschieht mit folgender Funktion in JavaScript:
$(".option").on("click", function() {
$(".person-type").removeClass(active");
$(".option").removeClass("active");
$(this).addClass("active");
var type = $(this).data("option");
console.log($(type));
Die beiden Person-Types (‚data-option‘ in HTML) der Optionen, also ‚person-type home‘ und ‚person-type outdoor‘ in JavaScript, bestimmen, welche weiteren Grafiken / Objekte dargestellt werden. Dies ist definiert als if und else if (untere Abbildung) in der Funktion „click“, (obere Abbildung). Wird also die ‚option‘ mit dem ‚type == „home“‚ (in HTML data-option) angeklickt, wird der Klasse ‚home-body‘ die Klasse ‚active‘ zugewiesen. Desweiteren werden damit alle benötigten Elemente für diese Szene eingeblendet, sowie nicht benötigte ausgeblendet, mit folgender Funktion:
setTimeout(function() {
if (type === "home") {
$(".home-body").addClass("active");
$("#signpost").css({"visibility": "hidden"});
$("#bubbletoggle1").css({"visibility": "visible"});
// Hier der Wechsel der Sprachblasen
$(".bubble2").hidden();
$(".bubble1").show();
$".stop-button").addClass("hint");
$(".homeoption").removeClass("hint");
}
<div class="option-wrapper ">
<a class="option active wobble-vertical-on-hover homeoption hint" data-option="home">
I'm gonna read a nice book and stay in.</a>
<a class="option wobble-vertical-on-hover outdooroption hint" data-option="outdoor">
I'm gonna explore the wide world and beyond! </a>
</div>
Der ‚Signpost‘ ist eine Grafik, die in Ebene 2 eingeblendet wird, hier jedoch ausgeblendet werden soll. Mit der Klasse ‚hint‘ wird eine farbliche (türkis-farbene) Umrandung um den Stop-Button gesetzt, damit der User darauf aufmerksam gemacht wird, dass er das Visual Graphic Novel ab jetzt beenden kann. Gleichzeitig wird diese Klasse der jetzt ausgewählten Option entzogen, da die Aufmerksamkeit des Users bereits auf diesem Button liegt. Die ID ‚#bubbletoggle1‘ ist in einem anderen Abschnitt erklärt.
Der Start- und Stop-Button
Der Start- und Stop-Button dient dazu, einen Start-Bildschirm und einen End-Bildschirm zu erschaffen, sowie dem User die Möglichkeit zu geben, dass Visual Graphic Novel jederzeit zu verlassen. Dazu wird den beiden Buttons die Klasse ‚active‘ gegeben, damit diese genauso wie die Szenen-Options reagieren (weiter oben beschrieben). Ebenso wird zum Zwecke der User-Lenkung und User-Aufmerksamkeit die Klasse ‚hint‘ vergeben, die farbliche Effekte (türkis-farbene Umrandung) vergibt.
Der Style der beiden Buttons wird in CSS festgelegt. Dafür wird die Klasse ‚buttons‘ vergeben. Der Zweck der Klasse ‚hint‘ wird im Abschnitt ‚Besonderheiten‘ und die CSS-Definition unter Visuelle Effekte mehr erläutert.
.button{
display: flex;
position: center;
margin:0en auto;
background: rgba(255,255,255,0.25);
border-radius: 50px;
padding: 5px;
max-width: 300px;
font-size: 15px;
line-height: 1.2;
} /* Wird genutzt, um per JS zu steuern, wann der Inhalt auftaucht, wenn die buttons gedrückt werden*/
#gamestart{
visibility:hidden;
}
#gamestop{
visibility:hidden;
}/* Danke-Text am Ende des Spiels */
Die ID ‚#gamestart{visibility:hidden;}‘ und ‚#gamestop{visibility:hidden;}‘ werden in JavaScript dafür verwendet, um beim Klicken der Buttons den ‚main-content‘ einzublenden und beim Drücken des Stop-Buttons den ‚main-content‘ auszublenden. Zur Übersichtlichkeit der Steuerung in JavaScript wurden also die beiden ID’s jeweils einzeln in CSS definiert, obwohl sie die gleichen Attributwerte besitzen. Die beiden Funktionen für den Start-Button und den Stop-Button sehen wie folgt aus:
$(".star-button").on("click", function() {
$(".main-content").removeAttr("id", "gamestart");
$(".thanks").css({"visibility": "hidden"});
$("#signpost").css({"visibility": "visible"});
// "hint" gibt dem User Hinweise, wo hingeklickt werde
$(".button").removeClass("hint");
$(".start-button").removeClass("hint");
$(".option-wrapper").addClass("hint");
});
//Funktion und eizelne Aktionen, die ausgeführt werde
$(".stop-button").on("click", function() {
$(".mnain-content").attr("id", "gamestop");
$(".bubble").hide();
$("#signpost").removeAttr("style", "visible");
$(".thanks").css({"visibility": "visible"});
$(".button").addClass("hint");
// wenn der stop-button geklickt wird, muss das lightni
$(".stop-button").removeClass("hint");
//hiermit wird die Klasse "hint" den beiden Scenen-Opt
$(".homeoption").addClass("hint");
$(":outdooroption").addClass("hint");
});
Die beiden Funktionen definieren auch, was beim Drücken des Buttons eingeblendet und ausgeblendet werden soll. Dies geschieht durch die Klassen und ID’s, die in CSS definiert sind (wenige Ausnahmen befinden sich als Attributwert in HTML).
Sprechblase
Die Sprechblase der Figur in beiden Szenen hat jeweils einen verschiedenen Text. Aus diesem Grund wurden einmal die Klassen ‚bubble1‘, ‚bubbletoggle1‘, ‚bubble2‘, ‚bubbletoggle2‘ vergeben und an beide jeweils die Klassen ‚bubble‘ und ‚anim-typewriter‘.
<div id="bubbletoggle1" class="buble1" style="visibility:hidden;">
<a lass="bubble bubble1 anim-typewriter "> Ah! That was a good desicion! Now a nice cup of tea...would you set the kettle on? </a>
</div>
<div id="bubbletoggle2" class="bubble2" style="visibilioty:hidden;">
<a class="bubble bubble2 anim-typewriter">What a lovely day, isn't it? Ans such charming strangeers visiting!</a>
</div>
Die Klasse bubble
Die Klasse ‚bubble‘ ist dafür da, um die Sprechblase per CSS zu stylen. Die CSS-Attributwerte von ‚min-width‘, ‚max-width‘, ‚max-height‘ sind hierbei besonders wichtig, da sie bestimmen, wie groß die Sprechblase werden kann, wenn der Text auftaucht. Je nachdem, wie lang der Text ist, muss natürlich auch die ‚min-width‘, ‚max-width‘ und ‚max-height‘ angepasst werden. Wäre ‚max-height‘ in diesem Fall kleiner als die festgelegten ’50px‘, würde nicht der ganze Text auftauchen können.
Wichtig hierbei ist der Attributwert infinite, der leider etwas schwierig zu handhaben ist. Darauf wird in „bubbletoggle: Der unendliche Text“ weiter eingegangen.
Die Klassen bubble1 und bubble2
Die Klassen ‚bubble1‘ und ‚bubble2‘ werden in JavaScript verwendet, um die jeweilige Sprechblase in der richtigen Szene einzublenden und auszublenden. Die Klasse ‚bubble1‘ ist hierbei für die Home-Szene, ‚bubble2‘ für die Outdoor-Szene. Aus- und eingeblendet wird die Klasse in JavaScript mit ‚$(.bubble1).hide()‘ und ‚$(.bubble1).show()‘. Da beide Szenen auch unterschiedlich helle Hintergründe haben, wird mit dieser Klasse in CSS auch die Farbe der Sprechblasen angepasst.
Eigene Abbildung: Der unendliche Text der Sprechblase
Der Text in den Sprechblasen wird unendlich wiederholt, um dem User das Lesen zu ermöglichen und zu vereinfachen, wann auch immer die Szene ausgewählt wird und unabhängig davon, wie schnell die Lesegeschwindigkeit des Users ist. Die Klassen ‚bubbletoggle1‘ und ‚bubbletoggle2‘ werden dafür verwendet, um den Text der Sprechblasen durch JavaScript (und CSS) in HTML mit ‚visibility:hidden‘ und ‚visibility:visible‘ unsichtbar und sichtbar zu machen. Dies ist sehr ähnlich wie das, was die Klassen ‚bubble‘ und ‚bubble1‘ (oder bubble2) schon machen. Hierbei gibt es aber ein Problem:Unendlich heißt unendlich. Die einzige Möglichkeit in diesem Fall, den sich unendlich wiederholenden Text in der Sprechblase unsichtbar zu machen, ist über eine extra ID und ein dazugehöriger Style-Attributwert in HTML, der in JavaScript gezielt angesprochen wird. Damit wird keine andere Klasse beeinflusst oder verändert, was später zu Komplikationen führen könnte. In JavaScript sieht das dann folgendermaßen aus: $(„bubbletoggle1″).css({visibility:“visible“}); für die Home-Szene und für die Outdoor-Szene $(„#bubbletoggle2“).css({„visibility:“visible“}); . In dem Abschnitt Buttons ist die gesamte Funktion erklärt und zu sehen.
<div id="bubbletoggle1" class="bubble1" style="visibility:hidden;">
<a class="bubble bubble1 anim-typewriter ">Ah! That was a good decision! Now a nice cup of tea...would you set the kettle on?</a>
</div>
<div id="bubbletoggle2" class="bubble2" style="visibility:hidden;">
<a class="bubble bubble2 anim-typewriter">What a lovely day, isn't it? And such charming strangers visiting!</a>
</div>
Visuelle Effekte
Die Klasse hint
Eigene Abbildung: Klasse hint beim Start-Button und Stop-Button
Die User-Lenkung durch die Klasse ‚hint‘ wurde vom Zweck und der Funktion her im Abschnitt Besonderheiten erläutert. Der Licht-Pulse-Effekt wird in CSS erstellt und definiert.
Die Dauer der Animation ist mit ‚-webkit-animation-duration:2s;‘ festgelegt. Der Farbwechsel (oder auch die Intensität) im Verlauf der Animation ist durch die ‚@-webkit-keyframes hintpulse‘ definiert. Dabei wurden verschiedene Abstufungen des original Farbtons für die Intensität verwendet.
Der Wobble-Effekt
Der Wobble-Effekt wird durch die Klasse ‚wobble-vertical-on-hover‘ in CSS definiert. Beim Hovern über ein Element mit dieser Klasse „wobbelt“ jenes. Damit weiß der User, dass mit diesem Element interagiert werden kann. Die Definition und Animation ist in CSS festgelegt.
Mit der Klasse ‚wobble-vertical-on-hover‘ und zusätzlich ‚:hover‘, ‚:focus‘, ‚:active‘ wird festgelegt, dass sowohl beim hover, als auch so lange die Maus darauf ist der Effekt gilt. Mit ‚animation-iteration-count:infinite‘ wird dieser Effekt so lange wiederholt, bis weder ‚hover‘,’active‘ noch ‚focus‘ für dieses Element gilt, bzw. es dadurch nicht mehr ausgelöst wird. Mit ‚@keyframes wobble-vertical-on-hover‘ wird die Bewegung nach oben und unten definiert/ festgelegt; also die Vektoren, wo sich das Element mit dieser Klasse an einem bestimmten Prozent(-punkt) der Bewegung befinden muss.
Und nun sind alle wichtigen Code-Abschnitte erklärt. Falls das Interesse an dem Quellcode (inklusive Kommentare darin!) vorhanden ist, muss nur wieder nach zum Seitenanfang gesprungen, die ZIP-Datei heruntergeladen und entpackt werden!
Im Sommersemester 2018 sind über eine Lehrkooperation zwischen den Abteilungen Design und Medien und Information und Kommunikation der Fakultät 3 im Rahmen des Kurses „Entwicklung von Multimediasystemen 2“ (Leitung Alexandra Panzert und Viktor Eisenstadt) weitere digitale und interaktive Angebote zum Thema Bauhaus entstanden wie z.B. die Folgenden:
Preloader sind Animationen, die während dem Ladevorgang einer Website angezeigt werden. Sie informieren den Nutzer über Ladeprozesse und befriedigen sein Bedürfnis zu wissen, was während der Interaktion mit einer Website im Hintergrund abläuft. Gleichzeitig überbrücken die Wartezeit. So sind sie zum einen unterhaltsam, zum andern verbessern sie die User Experience einer Seite.
In diesem Beispiel dient der Preloader durch sein außergewöhnliches Design, passend zu einer Website aus dem Themenbereich Foodblogging, zusätzlich dem Branding. Die Animation bleibt dem Nutzer im Gedächtnis und steht in einem klaren thematischen Bezug zur Seite aus dem Genre.
Dabei handelt es sich um eine zustandsbehaftete Animation, die, zumindest in der praktischen Anwendung, mit HTML Statuscodes korrespondiert. Zur Erstellung wurde mit der Web Animation API und CSS3 eine native Animationstechnik genutzt.
Dieser Preloader besteht aus zwei Bestandteilen: Einem sehr grafiklastigen endless Spinner, der zur Unterhaltung der Betrachters dient und einem Ladebalken, der je nach Implementierung scheinbar oder tatsächlich einen Ladefortschritt anzeigt.
Nun zum praktischen Teil. Im Folgenden ist in 3 einfachen Schritten erklärt, wie ein individueller Leader selbst ‚gebaut‘ werden kann.
Die Entwicklungsumgebung:
Entwicklungsumgebungen wie codepen.io eignen sich besonders gut zum Erstellen von Animationen, da sie den Code sehr übersichtlich visualisieren und das Ergebnis des Codes und Änderungen daran augenblicklich aktuell anzeigen. Dennoch eignen sich auch klassische Texteditoren wie Notepad++.
Schritt 1: HTML-Grundgerüst
Im ersten Schritt wird ein einfaches HTML-Grundgerüst erstellt. Dennoch sollte im Voraus bereits ein Polyfill für die Web Animation API (WAAPI) eingebunden werdende diese nicht von allen Browsern unterstützt wird. Anschließend wird eine Div-Klasse für die gesamte Animation erstellt, sowie drei weitere für den oberen Teil der Animation sowie eine Klasse und Unterklasse für den Ladebalken, um diese Elemente später mit CSS3 und Java Script weiter bearbeiten zu können. Der gesamte HTML-Code sieht wie folgt aus:
HTML-Grundgerüst
Schritt 2: Styling und Animation mit CSS
Das Entwickeln des CSS Codes ist der komplexeste Teil der Animation. Als erstes wird die Größe des Div-Containers für die gesamte Animation festgelegt. Anschließend werden die drei Elemente, die sich über dem Ladebalken befinden sollen und später animiert werden, gestylt. Durch eine Anweisung kann Größe, Höhe und Position für alle drei Elemente festgelegt werden und deren Farbe ggf. in individuellen Anweisungen für jedes Element. An dieser Stelle ist es wichtig, die Eigenschaft ‚display‘ auf den Wert ‚inline-block‘ zu setzten, sodass die Elemente nebeneinander angezeigt werden.
Um den Ladebalken zu erstellen, werden zunächst Größe, Form und Farbe sowie Position für diesen festgelegt. Dabei ist eine absolute Positionierung innerhalb des übergeordneten Containers zu empfehlen, um Verschiebungen der Grafik bei unterschiedlichen Bildschirmgrößen zu vermeiden. Darauffolgend werden die Animationsmöglichkeiten von CSS3 genutzt , da diese leicht einzusetzen und für einen Leader mit unbestimmten Ladefortschritt gut geeignet sind.
Zum Animieren des Ladebalkens wird zunächst ein weiterer Balken mit anderer Farbe und geringerer Größe innerhalb des ersten Balkens erstellt. Diesem wird mithilfe der CSS Eigenschaften ‚transition:‘ und ‚animation‘ Funktionalität verliehen. Durch die Attribute dieser Eigenschaften können ua. Dauer, Art und Iteration der Animation bestimmt werden. Anschließend werden für die load Eigenschaft des Ladebalkens Keyframes definiert. So startet in diesem Beispiel der Ladevorgang bei 2% und hat bei 10% ebenfalls 10% der Länge des Balkens erreicht.
Schritt 3: Animation mit JS
Im letzten Schritt wird der obere Teil des Loaders mithilfe von Java Script uns WAAPI animiert. Für einfache Ladegrafiken ist die Verwendung von CSS3 ausreichend. Animationenmit Java Script erlauben jedoch mehr Kontrolle und bieten mehr Möglichkeiten. Das erste zuganimierende Element wird zunächst mit dem Quer Selektor ausgewählt und im Folgenden mit der .animate() Methode animiert. Mit der Eigenschaft ‚transform‘ werden Keyframes festgelegt. Das bedeutet in diesem Fall das Verschieben des Elementes auf der Y-Achse. Des Weiteren werden Dauer und Wiederholungsfreqenz festgelegt. In diesem Beispiel ist die Animation ‚infinite‘, in der Implementierung in einer Website würde die Animation in Abhängigkeit mit dem Ladestatus der Website bzw. einem Systemstatus gesetzt werden. Der Vorgang wird für alle zu animierenden Elemente wiederholt.
Abschließend können nach Belieben an Stelle der mit CSS gestylten Elemente Grafiken eingefügt werden. Hier eignen sich besonders Icons im Flat Design, um eine optische Überladung der Animation zu vermeiden.
Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.
Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.
Bei dieser Prüfungsleistung handelt es sich um eine konzeptionelle Erstellung eines Multistep Formulars mit funktionalen Animationen. Für die Umsetzung wurden ausschließlich Html-5, Css3 und Javascript (JQuery) verwendet.
Die Grundidee ist ein Formular mit visuellem Feedback und einer inhaltlichen Strukturierung.
Dies wird primär mit drei funktionalen Animationen umgesetzt:
Einer Progressbar, die sich direkt über dem Formular befindet und den Fortschritt visualisiert.
Einer Strukturierung in 4 Formulareinheiten (Slides), die mit 2 Navigationsbuttons bedient werden und an die Progressbar geknüpft sind. Die Übergänge der einzelnen Slides sind zusätzlich animiert, um die Bedienung intuitiver zu gestalten.
Einem Shake-Feedback bei nicht Ausfüllen von benötigten Feldern (im Beispiel nur das Username Feld).
Die Progressbar:
Zunächst wurde in Html ein Grundgerüst für die Progressbar erstellt und das erste <li> Element mit der class=“active“ markiert. Diese Klasse wird später mithilfe von Javascript an die weiteren <li> Elemente weitergegeben um den gewünschten Fortschritt zu visualisieren.
Grundgerüst für die Progressbar
Anschließend wird mit Css die visuelle Struktur eines Balkens erstellt, der mithilfe der :before und :after Selektoren die einzelnen Punkte verbindet. Zusätzlich wird ein counter erstellt, der eine Nummerierung durchführt. Zuletzt wird das „first-child“ der :before Selektoren (also das erste Verbindungselement) ausgeblendet, um die gewünschte Struktur zu erhalten. Es würde sonst links überstehen, z.b. ist das Blau gefärbte Verbindungsstück in der unteren Abbildung tatsächlich der :before Element des zweiten Punktes <li>).
Code des Balkens
Fortschrittsbalken
Die Sliderstruktur:
In Html wird nun die Grundstruktur für die verschiedenen Slider geschaffen, indem jeweils pro Slide ein <fieldset> Element geschaffen wird. Anschließend werden den <fieldset> Elementen die <input> Elemente, die aus Formelementen wie text, password, email, tel und dem Submitelement Button bestehen untergeordnet.
Grundstruktur der verschiedenen Slider
Nachdem die einzelnen Slider in Css visuell angepasst wurden, ist vor allem ein Schritt interessant: Momentan befinden sich noch alle Slides, bzw. <fieldset> Elemente untereinander, wir blenden also alle außer dem ersten zunächst aus. Dies ist mit einer Zeile Code möglich, da die Html Struktur hierarchisch so aufgebaut ist, dass die <fieldset> Elemente direkt dem <form> Element mit der id #formwrapper untergeordnet sind.
Nun werden im JQuery Teil zunächst die Variablen definiert, die uns die Übergangsanimation ermöglichen: Die Fieldsets, um richtig iterieren zu können, die Attribute, die wir verändern um eine Animation zu erschaffen und der Animationszustand selbst, mit dem wir bei wiederholtem Knopfdruck Überschneidungen verhindern können.
Der Übergang läuft wie folgt ab:
Mit dem next_fs index übergeben wir den active Status auf der Progressbar. Dann beginnen wir das momentane Fieldset zu verstecken, während das nächste angezeigt wird. Das momentane Fieldset wird transparenter, da die opacity auf 0 geht, zusätzlich wird es auf 80% Größte herunterskaliert. Gleichzeitig wird das nächste Fieldset von rechts eingeschoben, während dessen opacity auf 1 hochgeht.
Dieser Vorgang findet innerhalb eines click Events beim drücken des ‚Next‘ Button statt, ein Ablauf feuert auch bei der Interaktion mit dem ‚Previous‘ Button. Dabei sind dann die Animationsrichtungen angepasst, außerdem werden die entsprechenden active Klassen auf der Progressbar wieder entfernt.
Das Shake-Feedback:
Bei dem Shake-Feedback in diesem Beispiel handelt es sich um eine kurze links-rechts Bewegung des Inputs, wenn der ‚Next‘ Button gedrückt wird, während ein benötigtes Feld noch nicht ausgefüllt wurde (in diesem Fall nur bei dem ersten Slider und dem ‚Username‘ Input Feld). Hierfür erstellen wir zunächst eine .error Klasse im Css, die eine Animation beinhaltet und noch keinem Html Element zugewiesen wird. Zusätzlich erstellen wir einen zugehörigen Keyframe at-rule und definieren hier die links-rechts Bewegung mithilfe der 0-100% Skala.
Als muss mit Javascript sichergestellt werden, dass diese Klasse allen leeren Input Elementen hinzugefügt wird, die sich im aktuellen Fieldset befinden, während der ‚Next‘ Button gedrückt wird (In diesem Beispiel selektieren wir statisch die id ‚#username‘). Anschließend erstellen wir einen Timer, der diese Klasse nach 2 Sekunden wieder löscht, damit diese Interaktion nochmal stattfinden kann (In diesem Beispiel selektieren wir statisch die id ‚#username‘).
Weitere Features:
Ein weiteres Feature, was nicht unbedingt den funktionalen Animationen zugehört ist die Erkennung des Inputs ins Username Feld und die Übergabe an das Titel Feld des folgenden Fieldsets. Hierbei ist zu beachten, dass das Titel Feld beim feuern der Buttons mit der empty Funktion zurückgesetzt wird, um eine Überflutung von Worten zu vermeiden.
Zuletzt ist der ‚Done!‘ Submit-Button zu erwähnen, dieser ist rein dekorativer Natur und hat absolut keine Funktion.
Die Grundlage bildet eine auf HTML5 basierte Single-Page Website (1). Diese bietet den Vorteil, dass die Navigation ohne Verzögerung ausgeführt, da sich der Besucher immer der gleichen Seite befindet, ohne es zu merken.
Für eine schönere Darstellung wurde eine öffentlich verfügbare Schriftart von google (2) und ein Farbschema von coolors.co (3) benutzt.
Benutzung / Chart
Der interessante Teil befindet sich unter dem Menüpunkt ‚Chart‘. Das erste Eingabefenster reagiert auf Eingaben und beinhaltet die, unter dem Diagramm angezeigten, Labels. Das zweite Eingabefenster reagiert ebenfalls auf Eingaben und beinhaltet die Anzahl der jeweiligen Note. Die Eingaben müssen mit einem Komma getrennt werden. Nachkommastellen werden mit einem Punkt abgebildet (z.B. 2,1.75,1.5,1.25,1). So ist es auch möglich verschiedene Notenschemata zu verwenden. Der Chart wurde mit Hilfe der Library Chart.js (4) erstellt. Unter dem Chart wird die auf zwei Nachkommastellen gerundete Durchschnittsnote angezeigt. Über die Checkbox ‚Barchart‘ lässt sich die Darstellung des Charts zwischen Barchart und Linienchart schaltet.
Tutorial
Das Tutorial erklärt zuerst, wie ein statisches Diagramm angezeigt werden kann. Ab Kapitel 5. wird erklärt, wie sich das Diagramm dynamisch verändern lässt. In Kapitel 8. wird die Berechnung der Durchschnittsnote gezeigt. Abschließend ist das Resultat auf Codepen.io zusehen.
Die Darstellung eines statischen Diagramms gestaltet sich als relativ einfach.
Die Konfiguration (‚{configuration}‘) wird im nächsten Schritt erläuert.
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {configuration...}
4. Konfiguration des Charts
Der Chart wird mit Hilfe eines javascript-Objektes konfiguriert. Dieses Objekt beinhaltet alle Information, die für die Darstellung notwendig sind.
Die einzelnen Konfigurationsmöglichkeiten werden in den Kommentaren erläutert.
{
type: 'bar', //Zeigt die Daten in einem Balkendiagramm an
data: { //Datenobjekt
labels: ["6", "5", "4", "3", "2", "1"], //Beschriftung der Y-Achse
datasets: [ //Liste von Daten, da mehrere pro Chart angezeigt werden können.
{
label: 'Notenverteilung', //Überschrift
data: [0, 2, 3, 5, 8, 5], //Dateneingabe: Anzahl des jeweiligen Labels (z.B. Note '6' = 0)
backgroundColor: 'rgba(255, 99, 132, 0.2)', //Hintergrundfarbe der Balen (Listen sind möglich für verschiedene Farben)
borderColor: 'rgba(255,99,132,1)', //Farbe der Umrandung (auch hier sind Listen möglich)
borderWidth: 1 //Weite der Umrandung
}
]
}
}
Bis jetzt haben wir einen statischen Chart, der die vorkonfigurierten Labels („6″,“5″,“4″,“3″,“2″,“1“) und die dazugehörige Verteilung (0,2,3,5,8,5) anzeigt.
5. Reagieren auf Benutzereingaben
Zuerst erstellen wir ganz normale HTML-Textareas. Eins für die Labels und eins für die Anzahl der Noten. Wir definieren das Event ‚onkeyup‘, das ausgeführt wird, sobald eine Taste in der entsprechenden Textarea losgelassen wird. Das Event soll den Aufruf der javascript-Funktion ‚zeicheneGraph()‘ ausloesen. Diese Methode wird im folgendem Punkt erläutert.
<h3>Eingabe<h3>
<p>Labels</p>
<textarea id ="labelInput"rows="4" cols="50" onkeyup="zeichneGraph()">1,2,3,4,5,6</textarea>
<p>Noten</p>
<textarea id ="notenInput"rows="4" cols="50" onkeyup="zeichneGraph()">0,2,3,5,8,5</textarea>
6. Manipulation der Chart-Daten
Wie zuvor erklärt, wird die zeichneGraph()-Funktion bei jeder Eingabe ausgelöst. Nun wird beschrieben, wie die Eingaben in den Chart gelangen.
Zuerst muss die Eingabe in ein Format gebracht werden, wo mit der Chart arbeiten kann. Das sind in diesem Fall Listen von Labels und Daten.
Vorbedingung: Die Informationen liegen komma-getrennt vor, z.B. 1, 2, 3,….
6.1 Zugriff auf die Eingabefelder
Auf das Eingabefeld wird mit jQuery zugegriffen und dessen Wert ausgelesen:
$('#notenInput').val()
6.2 Eingabe in eine Liste konvertieren
Der Befehl split(‚,‘) zerlegt die Eingabe an der Stelle des Kommas und liefert so eine Liste von Werten, z.B. [1,2,3,…].
var noten = $('#notenInput').val().split(',');
6.3 Zuweisung der Liste in den Chart
Diese Liste muss jetzt nur noch dem Objektes unseres Charts zugewiesen werden.
In der Konfiguration kann man erkennen das die Labels in dem Objekt data liegen. Der Zugriff erfolgt so auf myChart.data.labels.
myChart.data.labels = labels;
Die Daten liegen in dem dataset-Objekt, welches wiederum auch in dem Objekt data liegt. Das dataset-Objekt ist eine Liste, da mehrere Graphen in einem Chart angezeigt werden können. Wir haben nur einen Graphen definiert und die Daten befinden sich daher an der ersten Stelle in der Liste. Der Zugriff erfolgt daher auf die Stelle 0.
myChart.data.datasets[0].data = noten;
6.4 Chart neu zeichnen
Damit der Chart neu gezeichnet wird, muss auf dem Objekt die update()-Methode aufgerufen werden.
myChart.update();
6.5 Gesamte Methode
Abschließend noch mal die Methode in ihrer Gesamtheit.
function zeichneGraph(){
var noten = $('#notenInput').val().split(',');
var labels = $('#labelInput').val().split(',');
myChart.data.datasets[0].data = noten;
myChart.data.labels = labels;
myChart.update();
}
7. Änderung der Chart-Art
Die Änderung der Chart-Art (z.B. Linien- und Balken-Diagramm) gestaltet sich ähnlich, wie die Änderung der angezeigten Werte aus Kapitel 6.
7.1 Erstellung einer Checkbox
Es wird eine HTML-Checkbox verwendet, deren Änderungs-Event (onchange) mit einer javascript-Funktion verbunden ist. Das Attribut checked definiert, dass die Checkbox direkt gesetzt ist.
Eine Checkbox kann gesetzt bzw. checked sein, oder nicht.
Wir übergeben unserer Funktion die Checkbox selber über den Parameter mit (this).
In unserer javascript-Funktion können wir auf das Attribut checked zugreifen und prüfen, ob die Checkbox gesetzt ist oder nicht.
function klickAufBarchart(cb) {
if(cb.checked){
aendereGraph('bar');
}
else{
aendereGraph('line');
}
}
7.3 Änderung der Art des Charts ausführen
Das Object myChart muss komplett gelöscht und neu erstellt werden.
Dazu wird zuerst die destroy-Funktion aufgerufen und danach ein neues Chart-Objekt mit der übergebenen art-Objekt (z.B. ‚line‚ oder ‚bar‚) neu erstellt.
Die Daten werden auf den Ursprung-Zustand gesetzt, aber abschließend, durch den Aufruf der zeichneGraph()-Funktion mit den Werten der Eingabefelder aktualisiert.
function aendereGraph(art){
myChart.destroy();
myChart = new Chart(ctx, {
type: art,
data: chartData,
});
zeichneGraph();
}
8. Berechnung der Durchschnittsnote
Die Durchschnittsnote wird bei jeder Eingabe neu berechnet. Es bietet sich daher an, die Funktion, die wir schon für die Änderung des Diagramms (zeichneGraph()) erstellt haben, zu erweitern.
Ein Status-Text soll hier mögliche falsche Eingaben abfangen und eine Fehlermeldung ausgeben.
8.1 Überprüfung der gleichen Längen
Um eine Berechnung machen zu können, müssen die Labels die gleiche Anzahl wie die Noten haben.
if(noten.length==labels.length){ ... }
8.2 Berechnung der Zwischenwerte
Es muss berechnet werden, wie viele Noten in Summe eingetragen worden sind um die Anzahl von Klausuren zu erhalten.
Und es muss eine Summe errechnet werden, welche die Klausuren nach ihren Noten gewichtet z.B. (6*0)+(5*2)+(4*5)+….
Das passiert in einer Schleife, bei der über die Liste der Noten und Labels gelaufen wird.
Nachdem beide Summen errechnet worden sind, wird der Durchschnitt errechnet, indem die gewichtete Summe durch die Anzahl der Klausuren geteilt wird.
Abschließend wird der Durchschnitt auf zwei Stellen gerundet mit Math.round(durchschnitt * 100) / 100).
var notenSum=0;
var notenAnzahl=0;
var breakup = false;
for(var i=0; i< noten.length;i++){
//https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/parseFloat
//zu Zahlen konvertieren
var label= parseFloat(labels[i]);
var note = parseFloat(noten[i]);
//https://www.w3schools.com/jsref/jsref_isnan.asp
//Falls keine Zahl => Berechnung abbrechen und Fehlermeldung anzeigen
if(isNaN(label) || isNaN(note)){
breakup = true;
break;
}else{
notenAnzahl = notenAnzahl + note;
notenSum = notenSum + (note*label);
}
}
if(breakup){
$('#status').text('Bitte nur komma-getrennte Zahlen eingeben (z.B. 1,3,2).');
$('#durchschnitt').text('');
}
else{
var durchschnitt = notenSum/notenAnzahl;
//https://stackoverflow.com/questions/9453421/how-to-round-float-numbers-in-javascript
$('#durchschnitt').text('Durchschnittsnote: '+ Math.round(durchschnitt * 100) / 100);
}
Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.
Technisches Konzept für ein radiales Menü
Autor: Julian Hundertmark
Als Ziel gesetzt wurde ein Menü mit verschiedenen Funktionalitäten und Animationen welches als individualisierbare Grundlage für weitere Nutzer zur Verfügung gestellt werden soll. Hierzu soll es leicht in eine bestehende Seite integrierbar, intuitiv und vielseitig einsetzbar sein.
Begonnen wurde damit, ein bereits vorhandenes Menü als Grundlage einzubauen. Dieses wurde nachfolgend sowohl in der Funktion als auch im Design und Animation abgeändert und erweitert.
Das Menü lässt sich mithilfe einer Javascriptfunktion aktivieren. Dies triggert die Menüknöpfe welche animiert in den Vordergrund verschoben werden und wodurch diese nun anwählbar sind. Weitere Javascriptfunktionen wurden als Beispielfunktionen hinzugefügt. So lässt sich exemplarisch die Schriftgröße der Webseite oder auch die Hintergrundfarbe per Mausklick verändern. Zusätzlich wurde das Menü in einem ziehbaren Div-Container eingegliedert sodass es für Nutzer frei auf der Webseite zu bewegen ist. Diese zweckmäßige Annehmlichkeit soll die Usabillity der Menüs erhöhen. Auch die animierten Tooltips sollen zukünftigen Nutzern weitere Möglichkeiten geben das Menü intuitiv auf einer eigenen Seite anzubieten. So könnte das Menü auf One-Pagern eine alternative Steuer- und Anpassungsmöglichkeit bieten. Die Möglichkeiten weiterer Veränderungen und Individualisierung in Form von weiteren Funktionen bietet sich an.
Auch das Design des Menüs lässt sich leicht den Funktionalitäten anpassen. So können wie bereits durch meinen Entwurf gezeigt Knöpfe hinzugefügt oder entfernt werden. So habe ich die Positionen einzelner Knöpfe wieder in eine Symmetrische Position gebracht und Hover-Effekte nachgebaut.
Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.
Konzept: Ein mobiles Hamburger Menü
Autorinnen: Katharina Suhr, Anna Ratzke
Als funktionale Animation wurde ein Hamburger-Menü für eine mobile Ansicht mit Unterstützung von Codepen.io erstellt. Zudem wurde ein rotierender Pfeil zum Einblenden für das Untermenü mit Hover-Effekt programmiert.
Das Hamburger-Menü ist eine Variante der versteckten Navigation. Zunächst sind nur drei horizontale Striche zu erkennen. Die Elemente des Hauptmenüs sind erst durch eine gezielte Nutzeraktion sichtbar. Im Vergleich zu Desktop-Bildschirmen sind Smartphone Displays deutlicher kleiner und somit sollten auch die Menüs angepasst und schnell auffindbar sein. Das Hamburger-Icon kann weniger schnell zwischen den anderen Seitenelementen untergehen, dem Nutzer fällt es sofort ins Auge. Viele App-Anwendungen auf Smartphones nutzen bereits dieses Menü, dadurch entsteht beim Nutzer ein bestimmter Wiedererkennungswert, der erahnen lässt, dass sich hinter dem Hamburger-Icon eine Navigation befindet. Das Hamburger-Menü besitzt drei verschiedene Zustände. Wenn auf das Hamburger-Icon geklickt wird, erscheint kurzzeitig nur ein horizontaler Strich. Der Schließen-Button (in Form eines X) ist der dritte Zustand. Dieser Schließen-Button führt den Nutzer durch Erfahrungswerte zu der Intention, dass sich durch Anklicken das Menü wieder schließen lässt.
Ist das Hamburger-Menü angeklickt, erscheint das Hauptmenü. Die Seiten „HOME“, „ABOUT“, „BLOG“ und „CONTACT“ sind zu sehen. Rechts neben dem Menüpunkt „ABOUT“ ist der Pfeil zu erkennen. Wird der Pfeil angeklickt, erscheint das Untermenü. Der Pfeil besitzt zwei Zustände. Wenn das Menü geschlossen ist, zeigt der Pfeil nach unten, dabei wird unbewusst der Instinkt beim Nutzer ausgelöst, dass sich etwas hinter diesem Pfeil versteckt und es wird angeklickt. Im zweiten Zustand, wenn das Untermenü geöffnet ist, zeigt der Pfeil nach oben, um zu symbolisieren, dass das Menü wieder geschlossen bzw. versteckt werden kann. Beim ersten Anklicken bewegt sich der Pfeil nach rechts oben, dies war eine bewusste Entscheidung, da z.B. auch beim Öffnen des Deckels einer Flasche diese Richtung verwendet wird. Also handelt es sich um eine instinktive natürliche Bewegung. Beim zweiten Anklicken zeigt der Pfeil eine rotierende Bewegung nach rechts auf. Dies wurde ebenso mit Absicht so gestaltet, denn der Mensch schreibt von links nach rechts und somit handelt es sich auch um eine natürlich zu erwartende Bewegung.
Technische Umsetzung
Zu Beginn wurde ein passender Hamburger-Button ausgewählt, dieser bildet das Grundgerüst für die funktionale Animation. Die Größe des Hamburger-Menüs wurde für eine mobile Ansicht optimiert sowie oben links platziert. Anschließend wurde das Hauptmenü so animiert, dass beim Anklicken des Hamburger-Icons, das Menü von links eingeflogen kommt. Als nächsten Schritt wurde der Pfeil programmiert sowie im Menü integriert.
Folgender Quellcode ist nur ein Ausschnitt aus der funktionalen Animation
Das Attribut transform: rotate lässt den Pfeil drehen. Mit den Angaben 0degund -180deg wird die Endposition der Drehung bestimmt. Die Dauer der Animation wird mit dem transition: .6s bestimmt. Die JavaScript Funktion ToggleClass lässt den Nutzer zwischen den zwei Zuständen hin und her gewechseln. Die Gestaltung des Pfeils wurde in CSS festgelegt.
Kommentare werden geladen …
Diese Website benutzt Cookies. Wenn du die Website weiter nutzt, gehen wir von deinem Einverständnis aus.