Welcome to the World of Scrolly.

NOTE: It is important that you work on as large a monitor as possible and that you have optimally adjusted the menu in the top left via the

INTERFACE ZOOM.

Click ▶| again

// Es ist wichtig, dass Sie an einem möglichst großen Monitor arbeiten und das Menü oben links über INTERFACE ZOOM optimal eingestellt haben.

Bitte nochmal auf ▶| klicken.

Here comes the first HTML box on Slide 3. These (responsive) text boxes guide the reader through the story. You can see the text input field for editing in the top right of the frame. You adjust the appearance of all HTML boxes in the bottom right in the first tab. The boxes are always positioned above the entire scene. Behind them is a three-dimensional WebGL space, which may still appear two-dimensional to you for now.

// Hier kommt das erste HTML-Feld auf Folie 3. Diese (responsiven) Textfelder führen den Leser durch die Geschichte. Oben rechts im Rahmen sehen Sie das Texteingabefeld zur Bearbeitung. Die Darstellung aller HTML-Felder können Sie unten rechts auf der ersten Registerkarte anpassen. Die Felder werden immer über der gesamten Szene positioniert. Dahinter befindet sich ein dreidimensionaler WebGL-Raum, der Ihnen vorerst vielleicht noch zweidimensional erscheint.

😉 Please click next slide // Klicke wieder auf ▶|

Now let’s move to the top bar. Please click on the small field  1:1 . Now you can see the entire stage in the preview window in the middle. From left to right: Next to the language selection (choose  EN ), you can adjust the menu size to your screen (+/-). In the middle, you can simulate how the scrolly will look on different devices and aspect ratios. Ignore the preview zoom at this point for now. What's more important is what comes next: The Safe Area shows the middle section with a  green frame . The information in this section can be viewed on virtually any device. For now, press  ALL OFF  and click ▶| to go to the next slide.

// Gehen wir nun zum oberen Menü-Bereich. Bitte klicken Sie auf das kleine Feld  1:1 . Jetzt sehen Sie die gesamte Bühne im Vorschaufenster in der Mitte. Von links nach rechts: Neben der Sprachauswahl (wählen Sie DE) können Sie die Menügröße an Ihren Bildschirm anpassen (+/-). In der Mitte können Sie simulieren, wie der Scrolly später auf welchem Gerät und in welchem Seitenverhältnis aussehen wird. Ignorieren Sie bitte den Vorschauzoom an dieser Stelle erstmal. Wichtiger ist, was rechts daneben kommt: Die „Safe Area“ zeigt den mittleren Bereich mit einem  grünen Rahmen  an. Die Objekte in diesem Bereich können auf praktisch jedem Gerät angezeigt werden. Klicken Sie vorerst auf  ALLE AUS  und dann wieder ▶|, um zum nächsten Slide zu gelangen.

When you create your first scrolly later, you should start with simple assets. Here it's simply an image that appears from below and disappears again at the top. As you can see in the colorful menu at the bottom left, you can place and animate any type of asset in the scrolly. You can click on Preview at the top left in the menu right now to see and scroll through how the scrolly will feel later. Then come back here by clicking x and click through to the next slide.

// Wenn Sie später Ihren ersten Scrolly erstellen, sollten Sie mit einfachen Elementen beginnen. Hier handelt es sich lediglich um ein Bild, das von unten erscheint und oben wieder verschwindet. Wie Sie im bunten Menü unten links sehen können, lassen sich beliebige Elemente im Scrolly platzieren und animieren. Sie können jetzt jetzt oben links im Menü auf „Vorschau“ klicken, um auszuprobieren, wie sich der Scrolly später anfühlt. Kehren Sie dann durch Klicken auf das „x“ hierher zurück und klicken Sie sich zur nächsten Folie durch.

Of course, you can also use video and audio files. However, make sure that all assets you use don't have too large a file size so that the overall file size of the scrolly remains small. Especially with poor internet access or older devices with little video memory, you'll notice if a scrolly is over 100 MB in total.

// Natürlich können Sie auch Video- und Audiodateien verwenden. Achten Sie jedoch darauf, dass keine der von Ihnen verwendeten Dateien zu groß ist, damit die Gesamtdateigröße des Scrollys gering bleibt. Sie werden es deutlich merken, wenn ein Scrolly größer als 100 MB ist, insbesondere wenn Sie eine schlechte Internetverbindung haben oder ältere Geräte mit begrenztem Videospeicher verwendet werden.

The possibilities in this editor are extremely flexible, as we combine a 2D world with a 3D world. Even though it may appear otherwise, the SVG or infographic here consists of vector data and sits above the 3D scene, between the WebGL 3D space and the HTML windows. Nevertheless, you can also convert these objects into 3D objects – they are then rendered and behave differently in 3D space. You can see this, for example, in our star logo above, which can be both a 3D object and a SVG. Please go to the next slide.

// Die Möglichkeiten in diesem Editor sind äußerst flexibel, da wir eine 2D-Welt mit einer 3D-Welt kombinieren. Auch wenn es auf den ersten Blick anders erscheinen mag: Die SVG-Grafik oder Infografik besteht hier aus Vektordaten und befindet sich über der 3D-Szene, zwischen dem WebGL-3D-Raum und den HTML-Fenstern. Dennoch können wir diese Objekte auch in 3D-Objekte umwandeln – in diesem Fall werden sie gerendert und verhalten sich im 3D-Raum anders. Das lässt sich beispielsweise an unserem Stern-Logo oben erkennen, das sowohl ein 3D-Objekt als auch ein SVG sein kann. Bitte gehen Sie zum nächsten Slide.

As you can see, real 3D objects now appear in the space. They can cast and receive shadows or reflect each other. Lights can also be placed here.

// Wie Sie sehen können, tauchen nun plötzlich echte 3D-Objekte im Raum auf. Diese können Schatten werfen und empfangen oder sich gegenseitig reflektieren. Auch Lichter könenn hier gesetzt werden.

The tool gives you incredible room to let your creativity run free. But please take it slow and start from the beginning. ;-)

// Unser Tool bietet dir unglaublich viel Spielraum, um deiner Kreativität freien Lauf zu lassen. Aber fang bitte erst einmal ganz in Ruhe von vorne an. ;-)

We’ve included a few tutorials in the top right-hand corner of the menu bar to help you get started. Please make use of them. There’s still so much to discover!

// Wir haben für den Start oben rechts in der Menüleiste ein paar Tutorials eingebaut, um dir bei den ersten Schritten zu helfen. Bitte nutze diese. Es gibt noch sehr viel zu entdecken!

THE END.