Erstelung eines maskierten Hintergrundeffekt mit CSS

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Final product image — What You'll Be Creating

Heute werden wir eine wirklich coole Technik durchlaufen, mit der Sie einen Effekt erzeugen können, der ein bisschen wie Parallax-Scrolling ist, jedoch kein JavaScript benötigt. Dies kann sehr einfach durch reines CSS erreicht werden.

Sehen Sie sich zunächst die Live-Demo an, um zu erfahren, was Sie lernen werden (Sie müssen auf einem Desktop / Laptop sehen, um den Effekt zu sehen).

Diese Technik kann verwendet werden, um großartige Produktbeschreibungsseiten oder etwas ähnliches zu erstellen, das einer Powerpoint- / Keynote-Präsentation ähnelt, und wäre ein großes Potenzial für die Darstellung von Online-Geschichten.

Das ist alles, was wir schaffen werden

Es ist alles im CSS

Der Schlüssel zu dieser Technik ist der CSS background-attachment:fixed;der seit CSS 2.1 verfügbar ist. Jedes Hintergrundbild, auf das dieses Styling angewendet wird, bleibt relativ zum Fenster in einer festen Position (nicht das Element, auf das es angewendet wird). Wir werden es verwenden, um unsere Illustrationen beizubehalten, während unsere Inhalte unabhängig voneinander blättern.

Bei dieser CSS-Eigenschaft müssen Sie beachten, dass die Hintergrundbilder relativ zum Fenster fixiert werden und ihre Position nicht durch Ränder beeinflusst wird, wie dies bei einem regulären Hintergrundbild der Fall wäre.

Sie sollten auch wissen, dass die Eigenschaft zwar in allen Desktop-Browsern hervorragend funktioniert, in Chrome Mobile jedoch derzeit nicht funktioniert und in anderen mobilen Browsern etwas ruckartig wirkt. Während Ihre Besucher Ihre Bilder dennoch gut sehen können, ist der Bildlaufeffekt am besten auf Desktop-Plattformen zu sehen.

Wie es gemacht hat

Die grundlegenden Schritte, um das zu erreichen, was Sie in der Demo sehen, sind:

Erstellen Sie ein Containerelement und fügen Sie Ihren Inhalt hinzu.
Stellen Sie den Container (in unserem Fall ein div) so ein, dass die Polsterung auf einer Seite etwa 50% breit ist, sodass der Inhalt auf die andere Seite verschoben wird.
Fügen Sie ein Hintergrundbild mit einer Breite von etwa 50% hinzu und positionieren Sie es auf der dem Inhalt gegenüberliegenden Seite.
background-attachment: fixed; und schauen Sie die Scroll-Magie an!

Lassen Sie uns durchgehen, wie dies alles Schritt für Schritt geschieht. Sie müssen sich die Quelldateien für dieses Tutorial holen, damit Sie über die erforderlichen Bilder verfügen.

1. Grundeinrichtung

Erstellen Sie zunächst einen Projektordner und fügen Sie ihm eine index.html-Datei sowie einen css-Ordner mit einer hinzugefügten Datei namens style.css hinzu. Kopieren Sie die vier Bilder aus der heruntergeladenen Quelldatei-ZIP-Datei in einen Ordner mit dem Namen images.

Fügen Sie diesen HTML-Code zu index.html hinzu:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>A Visual Demonstration of background-attachment: fixed;</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Alike|Roboto:900" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="content right illustration_01">
        <h2>Scroll Down and Watch What Happens</h2>
        <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, `and what is the use of a book,' thought Alice `without pictures or conversation?'</p>
        <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy- chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
        <p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, `Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat- pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
        <p>In another moment down went Alice after it, never once considering how in the world she was to get out again.</p>
        <p>The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
        <p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled `ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.</p>
        <p>`Well!' thought Alice to herself, `after such a fall as this, I shall think nothing of tumbling down stairs! How brave they'll all think me at home! Why, I wouldn't say anything about it, even if I fell off the top of the house!' (Which was very likely true.) </p>
    </div>  
  </body>
</html>

Was wir hier tun, ist das Einrichten unserer grundlegenden HTML-Shell, das Laden in unser Stylesheet und einige Google-Fonts. Anschließend wird der erste div-Inhaltscontainer erstellt, auf den wir diese Technik anwenden.

Der div Container hat drei Klassen:

.content - das verwendet, um einige Eigenschaften festzulegen, die für alle Inhaltscontainer gelten.
.right - gibt an, dass dieser Container einen rechtsbündigen Inhalt haben soll (später arbeiten wir auch mit einem linksbündigen Container)
.illustration_01 - das verwendet, um das spezifische Hintergrundbild und die Farbe für diesen Container festzulegen

Styling

Jetzt sind wir bereit für ein paar CSS. Fügen Sie Ihrer style.css-Datei zunächst einige grundlegende Normalisierungs- und Formatierungscodes hinzu:

1	* {
2	box-sizing: border-box;
3	}
4	html {
5	font-size: 1em;
6	font-family: 'Alike';
7	background-color: #262626;
8	color: #d9d9d9;
9	}
10	body {
11	margin: 0;
12	}
13	img {
14	max-width: 100%;
15	height: auto;
16	}
17	h1,h2,h3,h4,h5,h6 {
18	font-family: 'Roboto';
19	line-height: 1.313em;
20	}
21	h1 {
22	font-size: 3em;
23	margin: 0.563em 0;
24	}
25	h2 {
26	font-size: 2.25em;
27	margin: 0.625em 0;
28	}
29	h3 {
30	font-size: 1.5em;
31	margin: 1.313em 0;
32	}
33	h4 {
34	font-size: 1.313em;
35	margin: 1.313em 0;
36	}
37	h5 {
38	font-size: 1.125em;
39	margin: 1.313em 0;
40	}
41	h6 {
42	font-size: 1em;
43	margin: 0.75em 0;
44	}

Nun zur Klasse .content. Fügen Sie dies am unteren Rand Ihres Stylesheets hinzu:

.content {
  font-size: 1.875rem;
  color: #262626;
  background-size: 49% auto;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

In dieser Klasse geschieht der größte Teil der Magie. Für den Text legen wir Schriftgröße und Farbe fest. Für den Hintergrund sehen Sie, dass wir background-size auf 49% automatisch setzen.

Dies bedeutet, dass das Hintergrundbild immer gedehnt oder verkleinert wird, um 49% der Seitenbreite auszufüllen, und die Höhe wird proportional angepasst. Wir verwenden einen Wert von 49% anstelle von 50%, da Firefox ansonsten ein seltsames Linienartefakt in der Mitte des Bildschirms anzeigt.

Wir legen dann background-fixed, der, wie Sie bereits aus der Beschreibung oben wissen, das Hintergrundbild beim Scrollen beibehalten und seine Position relativ zum Fenster und nicht zum Container, auf den es angewendet wird, festlegt.

Zum Schluss setzen wir background-repeat: no-repeat;, dass unser Bild nur einmal auf der Seite erscheint.

Als nächstes fügen Sie die .right-Klasse zu Ihrem Stylesheet hinzu:

1	.right {
2	padding: 1.618em 6.472em 3.236em 50%;
3	background-position: 0 50%;
4	}

Diese letzte Klasse platziert den Textinhalt auf einer Bildschirmhälfte und das Hintergrundbild auf der anderen.

Die Einstellung für background-position gibt dem Hintergrundbild an, sich auf der linken Seite des Fensters mit null Pixeln zu positionieren und sich vom oberen Rand des Fensters halb nach unten auszurichten.

Fügen Sie schließlich die Klasse .illustration_01 hinzu:

1	.illustration_01 {
2	background-color: #00c17b;
3	background-image: url("../images/minipadwhite.png");
4	}

Dies legt das spezifische Hintergrundbild und die Farbe fest, die wir für diesen Inhaltscontainer wünschen.

Überprüfen Sie Ihre Website und Sie sollten jetzt Folgendes sehen:

Wenn Sie nach unten scrollen, müssen Sie sehen, dass der Inhalt entlang des Bildes verschoben wird.

2. Fügen Sie einen zweiten Container hinzu

Fügen wir einen weiteren Inhaltscontainer hinzu, diesen mit links ausgerichtetem Inhalt.

Fügen Sie den HTML-Inhalt des Inhaltscontainers unter Ihrem letzten div hinzu:

    <div class="content left illustration_02">
      <h2>Fixed Background Scrolling Effect</h2>
      <p>Down, down, down. Would the fall never come to an end! `I wonder how many miles I've fallen by this time?' she said aloud. `I must be getting somewhere near the centre of the earth. Let me see: that would be four thousand miles down , I think--' (for, you see, Alice had learnt several things of this sort in her lessons in the schoolroom, and though this was not a very good opportunity for showing off her knowledge, as there was no one to listen to her, still it was good practice to say it over) `--yes, that's about the right distance--but then I wonder what Latitude or Longitude I've got to?' (Alice had no idea what Latitude was, or Longitude either, but thought they were nice grand words to say .)</p>
      <p>Presently she began again. `I wonder if I shall fall right through the earth! How funny it'll seem to come out among the people that walk with their heads downward! The Antipathies, I think--' (she was rather glad there was no one listening, this time, as it didn't sound at all the right word) `--but I shall have to ask them what the name of the country is, you know. Please, Ma' am, is this New Zealand or Australia?' (and she tried to curtsey as she spoke-- fancy curtseying as you're falling through the air! Do you think you could manage it?) `And what an ignorant little girl she'll think me for asking! No, it'll never do to ask: perhaps I shall see it written up somewhere.'</p>
      <p>Down, down, down. There was nothing else to do, so Alice soon began talking again. `Dinah'll miss me very much to-night, I should think!' (Dinah was the cat .) `I hope they'll remember her saucer of milk at tea-time. Dinah my dear! I wish you were down here with me! There are no mice in the air, I'm afraid, but you might catch a bat, and that's very like a mouse, you know. But do cats eat bats, I wonder?' And here Alice began to get rather sleepy, and went on saying to herself, in a dreamy sort of way, `Do cats eat bats? Do cats eat bats?' and sometimes, `Do bats eat cats?' for, you see, as she couldn't answer either question, it didn't much matter which way she put it. She felt that she was dozing off, and had just begun to dream that she was walking hand in hand with Dinah, and saying to her very earnestly, `Now, Dinah, tell me the truth: did you ever eat a bat?' when suddenly, thump! thump! down she came upon a heap of sticks and dry leaves, and the fall was over.</p>
      <p>Alice was not a bit hurt, and she jumped up on to her feet in a moment: she looked up, but it was all dark overhead; before her was another long passage, and the White Rabbit was still in sight, hurrying down it. There was not a moment to be lost: away went Alice like the wind, and was just in time to hear it say, as it turned a corner, `Oh my ears and whiskers, how late it's getting!' She was close behind it when she turned the corner, but the Rabbit was no longer to be seen: she found herself in a long, low hall, which was lit up by a row of lamps hanging from the roof.</p>
      <p>There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. </p>
    </div>

Beachten Sie, dass wir diesmal die Klasse .left anstelle von .right verwenden und die Illustrationsnummer erhöht haben, sodass die Klasse .illustration_01 durch .illustration_02 ersetzt wird

Fügen Sie Ihrem Stylesheet die folgenden zwei neuen Klassen hinzu:

.left {
  padding: 1.618em 50% 3.236em 6.472em;
  background-position: 100% 50%;
}
.illustration_02 {
  background-color: #e8697b;
  background-image: url("../images/minipadblack.png");
}

Diesmal haben wir die Auffüllung von 50% auf der rechten Seite des Containers, so dass der Inhalt nach links verschoben wird und der Hintergrund horizontal bei 100% positioniert ist, d. H. Ganz nach rechts. Wir fügen dem Hintergrund dieses Containers auch eine andere Farbe und ein anderes Bild hinzu.

Überprüfen Sie Ihre Website erneut, und scrollen Sie nach unten.llt. Wenn Sie das Ende des ersten Containers erreicht haben, sollten Sie sehen, dass der zweite auftaucht, über Ihrem ersten Bild schrubbt und allmählich Ihr zweites enthü

3. Insert ein Trennzeichen

Es verbessert die Wirkung dieser Technik, wenn sich zwischen den beiden Containern ein Trennzeichen befindet. Fügen wir das jetzt hinzu.

Fügen Sie zwischen Ihren beiden Container-Divs diesen HTML-Code hinzu:

1	<section class="separator">
2	<h3>Another Section Starts Here</h3>
3	</section>

Fügen Sie Ihrem Stylesheet die Klasse .separator hinzu:

.separator {
  font-size: 1.875rem;
  padding: 1.618em 0;
  text-align: center;
}

Wenn Sie Ihre Site aktualisieren, sollten Sie jetzt ein schönes Trennzeichen zwischen Ihren Containern haben:

4. Dritter und vierter Container

Sie können jetzt den Code für Ihre verbleibenden Trennzeichen und Inhaltscontainer eingeben.

Fügen Sie diesen HTML-Code unter Ihren vorhandenen divs hinzu:

    <section class="separator">
      <h3>Another Section Starts Here</h3>
    </section>
    <div class="content right illustration_03">
      <h2>Great For Product Presentations</h2>
      <p>Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alice's first thought was that it might belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them. However, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she tried the little golden key in the lock, and to her great delight it fitted!</p>
      <p>Alice opened the door and found that it led into a small passage, not much larger than a rat-hole: she knelt down and looked along the passage into the loveliest garden you ever saw. How she longed to get out of that dark hall, and wander about among those beds of bright flowers and those cool fountains, but she could not even get her head though the doorway; `and even if my head would go through,' thought poor Alice, `it would be of very little use without my shoulders. Oh, how I wish I could shut up like a telescope! I think I could, if I only know how to begin.' For, you see, so many out-of-the-way things had happened lately, that Alice had begun to think that very few things indeed were really impossible.</p>
      <p>There seemed to be no use in waiting by the little door, so she went back to the table, half hoping she might find another key on it, or at any rate a book of rules for shutting people up like telescopes: this time she found a little bottle on it, (`which certainly was not here before,' said Alice,) and round the neck of the bottle was a paper label, with the words `DRINK ME' beautifully printed on it in large letters.</p>
      <p>It was all very well to say `Drink me,' but the wise little Alice was not going to do that in a hurry. `No, I'll look first,' she said, `and see whether it's marked "poison" or not'; for she had read several nice little histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and she had never forgotten that, if you drink much from a bottle marked `poison,' it is almost certain to disagree with you, sooner or later.</p>
      <p>However, this bottle was NOT marked `poison,' so Alice ventured to taste it, and finding it very nice, (it had, in fact, a sort of mixed flavour of cherry- tart, custard, pine-apple, roast turkey, toffee, and hot buttered toast,) she very soon finished it off. </p>
    </div>
    <section class="separator">
      <h3>Another Section Starts Here</h3>
    </section>
    <div class="content left illustration_04">
      <h2>Simple Technique Using Pure CSS</h2>
      <p> `What a curious feeling!' said Alice; `I must be shutting up like a telescope .'</p>
      <p>And so it was indeed: she was now only ten inches high, and her face brightened up at the thought that she was now the right size for going though the little door into that lovely garden. First, however, she waited for a few minutes to see if she was going to shrink any further: she felt a little nervous about this; `for it might end, you know,' said Alice to herself, `in my going out altogether, like a candle. I wonder what I should be like then?' And she tried to fancy what the flame of a candle is like after the candle is blown out, for she could not remember ever having seen such a thing.</p>
      <p>After a while, finding that nothing more happened, she decided on going into the garden at once; but, alas for poor Alice! when she got to the door, she found he had forgotten the little golden key, and when she went back to the table for it, she found she could not possibly reach it: she could see it quite plainly through the glass, and she tried her best to climb up one of the legs of the table, but it was too slippery; and when she had tired herself out with trying, the poor little thing sat down and cried.</p>`Come, there's no use in crying like that!' said Alice to herself, rather sharply; `I advise you to leave off this minute!' She generally gave herself very good advice, (though she very seldom followed it), and sometimes she scolded herself so severely as to bring tears into her eyes; and once she remembered trying to box her own ears for having cheated herself in a game of croquet she was playing against herself, for this curious child was very fond of pretending to be two people. `But it's no use now,' thought poor Alice, `to pretend to be two people! Why, there's hardly enough of me left to make ONE respectable person!'
      <p>Soon her eye fell on a little glass box that was lying under the table: she opened it, and found in it a very small cake, on which the words `EAT ME' were beautifully marked in currants. `Well, I'll eat it,' said Alice, `and if it makes me grow larger, I can reach the key; and if it makes me grow smaller, I can creep under the door; so either way I'll get into the garden, and I don't care which happens!'</p>
      <p>She ate a little bit, and said anxiously to herself, `Which way? Which way?', holding her hand on the top of her head to feel which way it was growing, and she was quite surprised to find that she remained the same size: to be sure, this generally happens when one eats cake, but Alice had got so much into the way of expecting nothing but out-of-the-way things to happen, that it seemed quite dull and stupid for life to go on in the common way.</p>
      <p>So she set to work, and very soon finished off the cake. </p>
    </div>
    <section class="separator">
      <h1>THE END</h1>
    </section>

Und dieses CSS zu Ihrem Stylesheet:

.illustration_03 {
  background-color: #14b29a;
  background-image: url("../images/miniwhite.png");
}
.illustration_04 {
  background-color: #80b9f1;
  background-image: url("../images/miniblack.png");
}

Sie müssen jetzt Ihre gesamte Anzeige an Ort und Stelle haben, wobei ein dritter und vierter Inhaltscontainer Folgendes anzeigen:

Sowie einen letzten Separator zum Abschließen:

5. Machen Sie es ansprechend

Das letzte, was Sie tun müssen, ist, unterschiedliche Bildschirmgrößen zu berücksichtigen. Wenn das Ansichtsfenster zu klein wird, um unsere Hintergrundbilder bequem unterzubringen, möchten wir sie stattdessen auf Inline-Bilder umstellen.

Fügen Sie am oberen Rand jedes Inhaltscontainers, in den ersten divs und oberhalb des Textes eine Figur mit der Klasse .smallscreen ein, und platzieren Sie in diesem Platz ein img-Tag, um jedes der aktuell in den Hintergründen verwendeten Bilder zu laden:

Erster Inhaltscontainer:

1	<figure class="smallscreen">
2	<image src="images/minipadwhite.png">
3	</figure>

Zweiter Inhaltscontainer:

1	<figure class="smallscreen">
2	<image src="images/minipadblack.png">
3	</figure>

Dritter Inhaltscontainer:

1	<figure class="smallscreen">
2	<image src="images/miniwhite.png">
3	</figure>

Vierter Inhaltscontainer:

1	<figure class="smallscreen">
2	<image src="images/miniblack.png">
3	</figure>

Wir werden die .smallscreen-Klasse verwenden, um dieses Inline-Bild standardmäßig auszublenden, aber bei einer kleineren Bildschirmgröße anzuzeigen.

Fügen Sie Ihrem Stylesheet die folgende Klasse hinzu:

1	.smallscreen {
2	display: none;
3	}

Wir fügen nun die Medienabfragen hinzu, die behandeln, ob Hintergrund- oder Inline-Bilder angezeigt werden. Sie verkleinern auch schrittweise die Größe des Texts und des Abstandes im Layout, sodass wir die Einstellungen in allen Ansichtsfensterräumen gut anpassen.

Fügen Sie diese Medienabfragen zu Ihrem Stylesheet hinzu:

@media (max-width: 106.25rem) {
  .wrapper,
  .separator {
    font-size: 1.6875rem;
  }
}
@media (max-width: 93.75rem) {
  .content,
  .separator {
    font-size: 1.5rem;
  }
  .right {
    padding: 1.618em 4.854em 1.618em 50%;
  }
  .left {
    padding: 1.618em 50% 1.618em 4.854em;
  }
}
@media (max-width: 81.25rem) {
  .content,
  .separator {
    font-size: 1.3125rem;
  }
  .right {
    padding: 1.618em 3.236em 1.618em 45%;
    background-size: 44% auto;
    background-position: 0 55%;
  }
  .left {
    padding: 1.618em 45% 1.618em 3.236em;
    background-size: 44% auto;
    background-position: 100% 55%;
  }
}
@media (max-width: 68.75rem) {
  .content,
  .separator {
    font-size: 1.125rem;
  }
  .right {
    padding: 1.618em 3.236em 1.618em 40%;
    background-size: 39% auto;
    background-position: 0 60%;
  }
  .left {
    padding: 1.618em 40% 1.618em 3.236em;
    background-size: 39% auto;
    background-position: 100% 60%;
  }
}
@media (max-width: 50rem) {
  .smallscreen {
    display: block;
  }
  .right {
    padding: 1.618em 3.236em;
    background-image: none;
  }
  .left {
    padding: 1.618em 3.236em;
    background-image: none;
  }
}
@media (max-width: 31.25rem) {
  .right {
    padding: 1.618em 1.618em;
  }
  .left {
    padding: 1.618em 1.618em;
  }
}
@media (max-width: 12rem) {
  html {
    min-width: 12rem;
  }
}

Bei den ersten vier Medienabfragen werden die Textschriftgröße und das Auffüllen in den Inhaltscontainern schrittweise auf die verfügbare Bildschirmbreite angepasst.

In der fünften Medienabfrage von max-width: 50rem enthalten wir Code, der die .smallscreen-Klasse sichtbar macht, unsere 50% -ige Seitenauffüllung aus den Inhaltscontainern entfernt und die Hintergrundbilder verbirgt. Wenn diese Medienabfrage eintritt, werden die großen festen Hintergrundbilder nicht mehr angezeigt. Stattdessen werden reguläre Bilder oben in jedem Inhaltscontainer angezeigt.

Wenn Sie nun Ihre Site aktualisieren, sollten Sie sehen, dass sie mit allen Breiten des Ansichtsfensters reibungslos verkleinert wird, bis Sie dies in seiner kleinsten Größe sehen:

Schlusswort

Selbst nach so vielen Jahren der Arbeit mit CSS bin ich immer wieder überrascht, dass immer mehr tolle Dinge damit zu tun sind. Und je einfacher die Technik ist, desto beeindruckender ist sie.

Versuchen Sie dieses kleine Juwel aus, es ist so schnell und einfach, dass Sie wahrscheinlich süchtig werden!