{"id":129112,"date":"2018-09-17T08:02:51","date_gmt":"2018-09-17T06:02:51","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/parallax\/"},"modified":"2025-02-13T17:54:04","modified_gmt":"2025-02-13T16:54:04","slug":"parallax","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/parallaxe","title":{"rendered":"Parallaxe"},"content":{"rendered":"

Mit angehefteten Positionen k\u00f6nnen Sie in Justinmind ganz einfach schwebende Kopf- und Fu\u00dfzeilen sowie Pop-ups erstellen. Normalerweise bleiben die Elemente an ihrem Platz, w\u00e4hrend Sie simulieren, aber wenn sie angeheftet sind, bewegen sie sich mit dem Scrollen des Bildschirms. Schauen Sie sich die folgenden Beispiele an, um zu erfahren, wie Sie angepinnte Elemente und andere Parallaxen-Effekte verwenden k\u00f6nnen. <\/p>\n

<\/a>Oben und unten anheften (Kopf- und Fu\u00dfzeilen anheften)<\/h2>\n

    \n
  1. Entwerfen Sie eine Kopf- oder Fu\u00dfzeile mit Rechtecken, Text und Bildern. Wenn Sie mit dem Design fertig sind, markieren Sie alle Elemente, klicken Sie mit der rechten Maustaste, gehen Sie auf Gruppieren und w\u00e4hlen Sie ‚Im dynamischen Panel gruppieren‘.
    \n\"W\u00e4hlen
    \nDadurch werden alle Elemente in einem dynamischen Panel platziert, das als Container fungiert. Sie k\u00f6nnen dieses dynamische Panel (und alle darin enthaltenen Elemente) am oberen oder unteren Rand des Bildschirms anheften.  <\/p>\n

    Beachten Sie, dass Sie eine normale Gruppe selbst nicht anheften k\u00f6nnen. Sie m\u00fcssen mehrere Elemente in einem dynamischen Panel platzieren, um sie anheften zu k\u00f6nnen. <\/p>\n

    Wenn Sie nur ein Element als Kopf-\/Fu\u00dfzeile verwenden, m\u00fcssen Sie es nicht in einem dynamischen Panel gruppieren.<\/li>\n

  2. Wenn Sie die Kopf- oder Fu\u00dfzeile ausgew\u00e4hlt haben, wechseln Sie zur Palette Eigenschaften. Klicken Sie auf die Schaltfl\u00e4che ‚Anheften‘ neben den X- und Y-Positionen f\u00fcr die Kopfzeile. \"Klicken<\/li>\n
  3. Es werden nun zwei Dropdowns angezeigt. Klicken Sie auf das Feld neben der Y-Position und w\u00e4hlen Sie ‚Oben anheften‘, um eine angeheftete Kopfzeile zu erstellen, und w\u00e4hlen Sie ‚Unten anheften‘, um eine angeheftete Fu\u00dfzeile zu erstellen. \"W\u00e4hlen<\/li>\n<\/ol>\n
    Hinweis:<\/strong> Vergewissern Sie sich, dass sich Ihre Kopf- und Fu\u00dfzeile in der Ebenen-Palette \u00fcber anderen Elementen befindet, oder markieren Sie sie in der Eigenschaften-Palette als „immer oben“.<\/div>\n

    \"Markieren
    \nTippen Sie auf die Schaltfl\u00e4che ‚Abspielen‘, um Ihr Projekt zu simulieren und zu sehen, wie Ihre Kopf- und Fu\u00dfzeile beim Bl\u00e4ttern auf dem Bildschirm an ihrem Platz bleibt.<\/p>\n

    <\/a>Angeheftetes Zentrum (festes Pop-up)<\/h2>\n

      \n
    1. Erstellen Sie ein Popup mit Rechtecken, Textelementen und einem Eingabetextfeld. W\u00e4hlen Sie alle Elemente im Popup aus, klicken Sie mit der rechten Maustaste, gehen Sie zu Gruppieren und w\u00e4hlen Sie ‚In dynamischem Panel gruppieren‘. <\/li>\n
    2. Gehen Sie zur Palette Eigenschaften und klicken Sie auf die Schaltfl\u00e4che ‚Pin‘, um die Optionen f\u00fcr die Pin-Position zu \u00f6ffnen. W\u00e4hlen Sie in den Dropdown-Listen X und Y die Option „Mitte anheften“. Jetzt sollte das Popup-Fenster beim Scrollen an der horizontalen und vertikalen Mitte des Bildschirms angeheftet werden. <\/li>\n
    3. Wenn das Popup noch immer ausgew\u00e4hlt ist, klicken Sie in der Eigenschaftenpalette auf die Schaltfl\u00e4che ‚Auge‘, wodurch das Popup w\u00e4hrend der Simulation standardm\u00e4\u00dfig ausgeblendet wird.\"Markieren<\/li>\n
    4. Sie k\u00f6nnen nun ein Ereignis erstellen, um das Popup mit einem Einblendeffekt anzuzeigen, wenn die Seite geladen wird. Erstellen Sie ein Ereignis f\u00fcr das<\/strong> Element On Page Load<\/strong> + Show<\/strong> und w\u00e4hlen Sie das Popup, das angezeigt werden soll. F\u00fcgen Sie einen Einblendeffekt hinzu und klicken Sie auf „OK“, um die Erstellung des Ereignisses abzuschlie\u00dfen. \"Das<\/li>\n<\/ol>\n

      Tippen Sie auf die Schaltfl\u00e4che ‚Abspielen‘, um Ihr Projekt zu simulieren und zu sehen, wie Ihr Popup beim Laden des Bildschirms eingeblendet wird und beim Scrollen in der Mitte des Bildschirms verbleibt.<\/p>\n

      <\/a>Parallaxen-Effekte<\/h2>\n

      Parallaxen-Widget-Bibliothek<\/a> verwenden, um Fade-, Slide- und Floating-Parallaxen-Effekte zu erstellen.<\/p>\n

      Nachdem Sie die Bibliothek heruntergeladen haben, importieren Sie sie in Ihre Bibliothekspalette (Link zum Tutorial \u00fcber UI-Bibliotheken).<\/p>\n

      Erstellen Sie zun\u00e4chst ein Webprojekt und vergr\u00f6\u00dfern Sie es auf eine H\u00f6he von etwa 4000 Pixel. Platzieren Sie eine Kopfzeile am oberen Rand des Bildschirms und eine Fu\u00dfzeile am unteren Rand des Bildschirms. <\/p>\n

      Heldenbild einblenden<\/h3>\n
        \n
      1. Ziehen Sie das Element Einblendungsebene aus der Bibliothek der Parallaxen-Elemente nach oben auf die Leinwand. \u00c4ndern Sie die Gr\u00f6\u00dfe, bis es die gesamte Breite des Bildschirms einnimmt und etwa 700 Pixel lang ist. \"Ziehen<\/li>\n
      2. Sehen Sie sich das Element auf dem Canvas genauer an. Sie werden sehen, dass es sich um ein dynamisches Panel handelt, das ein verstecktes Textelement mit der Bezeichnung „Ausgangsposition“ und eine Grafik enth\u00e4lt. Sie k\u00f6nnen die Grafik l\u00f6schen, aber der Text „Ausgangsposition“ muss erhalten bleiben.Der Einblendeffekt funktioniert, indem das dynamische Panel eingeblendet wird, wenn der Bildlauf auf dem Bildschirm l\u00e4nger dauert als die Position des Textes „Ausgangsposition“. Da es am oberen Rand des Bildschirms platziert ist, wird das Ereignis ausgel\u00f6st, sobald Sie mit dem Scrollen beginnen. <\/li>\n
      3. Um dem Beispiel zu entsprechen, f\u00fcgen Sie dem dynamischen Panel in der Eigenschaftenpalette ein Hintergrundbild hinzu.\"F\u00fcgen<\/li>\n<\/ol>\n

        Klicken Sie auf die Schaltfl\u00e4che ‚Abspielen‘, um Ihr Projekt zu simulieren. Sobald Sie mit dem Scrollen beginnen, sollte das Heldenbild erscheinen. <\/p>\n

        Einschiebe-Effekte<\/h3>\n
          \n
        1. Ziehen Sie die Ebene Dia links aus der Parallaxenbibliothek auf den Canvas und platzieren Sie sie \u00fcber dem Heldenbild. Sie werden sehen, dass sie auch den Text „Ausgangsposition“ und einige Grafiken enth\u00e4lt. \u00c4ndern Sie die Gr\u00f6\u00dfe des Panels, bis es die gesamte Breite des Bildschirms einnimmt und etwa 850 Pixel lang ist.
          \n\"W\u00e4hlen
          \nWie das eingeblendete Ebenenelement funktioniert auch der Slide Left-Effekt, indem das dynamische Panel immer dann angezeigt wird, wenn der Bildlauf auf dem Bildschirm gr\u00f6\u00dfer ist als der Text „Ausgangsposition“. <\/p>\n

          Der Text „Ausgangsposition“ wird dort platziert, wo das Heldenbild beginnt. Sie sehen also, dass diese Ebene von links nachr\u00fcckt, wenn Sie \u00fcber das Heldenbild hinaus scrollen.<\/li>\n

        2. L\u00f6schen Sie die Grafiken, aber lassen Sie den Text „Ausgangsposition“ stehen. Halten Sie die Befehlstaste<\/kbd> (Mac) bzw. die Strg-Taste<\/kbd> (Windows) gedr\u00fcckt, um Elemente innerhalb des dynamischen Bereichs zu platzieren. Um dem Beispiel zu entsprechen, f\u00fcgen Sie drei Textelemente und ein Rechteck hinzu und gestalten sie wie gew\u00fcnscht. <\/li>\n
        3. Jetzt f\u00fcgen Sie ein Element hinzu, das von rechts nach innen gleiten wird. Platzieren Sie das Element Slide right aus der Parallax-Bibliothek auf dem Canvas, wo das Heldenbild endet, und passen Sie die Gr\u00f6\u00dfe so an, dass es der Breite des Bildschirms entspricht und 850 Pixel lang ist. Sie k\u00f6nnen die Grafiken darin entfernen und drei Textelemente und ein Rechteck im Panel platzieren. \"F\u00fcgen<\/li>\n<\/ol>\n

          Klicken Sie auf die Schaltfl\u00e4che ‚Abspielen‘, um Ihr Projekt zu simulieren. Sie sehen, dass das Heldenbild erscheint und kurz darauf die linke Folie eingeblendet wird. Scrollen Sie weiter und Sie werden sehen, dass als n\u00e4chstes die rechte Seite erscheint. <\/p>\n

          Elemente beim Scrollen anheften<\/h3>\n
            \n
          1. Platzieren Sie ein Rechteck auf der Leinwand unter dem Element Dia rechts und passen Sie seine Gr\u00f6\u00dfe so an, dass es die gesamte Breite des Bildschirms einnimmt. F\u00fcgen Sie dem Rechteck ein Hintergrundbild hinzu, das dem Beispiel entspricht. <\/li>\n
          2. W\u00e4hrend das Rechteck noch ausgew\u00e4hlt ist, gehen Sie zur Palette Ereignisse und klicken Sie auf ‚Ereignis hinzuf\u00fcgen‘.<\/li>\n
          3. Erstellen Sie ein Ereignis On Scroll<\/strong> + Move<\/strong>. W\u00e4hlen Sie das Rechteck als das zu verschiebende Element. Darunter werden zwei Dropdowns angezeigt, in denen Sie festlegen k\u00f6nnen, wohin das Rechteck verschoben werden soll. Klicken Sie auf das Dropdown-Men\u00fc ‚Y‘ (vertikal) und w\u00e4hlen Sie ‚Nach oben verschieben‘. Klicken Sie auf ‚OK‘, um die Erstellung des Ereignisses zu beenden.\"Befestigen<\/li>\n
          4. Zur\u00fcck in der Palette Ereignisse klicken Sie auf den Textlink ‚Bedingung hinzuf\u00fcgen‘ oberhalb des Ereignisses, das Sie gerade erstellt haben.
            \n\"Klicken
            \nUm die Bedingung zu schaffen: <\/p>\n
              \n
            • a.<\/strong> Gehen Sie auf die Registerkarte Konstanten und ziehen Sie die Konstante Window Scroll Y (Scroll Y)<\/strong> auf die freie Stelle im Ausdruck.\"Ziehen<\/li>\n
            • b.<\/strong> Gehen Sie zur\u00fcck zur Registerkarte Funktionen und bl\u00e4ttern Sie zum Abschnitt Logik. Ziehen Sie die Funktion Greater (><\/strong> ) auf den Ausdruck. <\/li>\n
            • c.<\/strong> In der Expression wird ein neues freies Feld angezeigt. Klicken Sie in dieses Feld und geben Sie die Y-Position (vertikal) des Rechtecks ein. In diesem Beispiel wird das Rechteck bei 1686px auf dem Canvas positioniert. \"Geben<\/li>\n
            • d.<\/strong> Dieses Ereignis und die Bedingung werden das Rechteck am oberen Rand des Bildschirms anheften, wenn Sie auf dem Canvas \u00fcber 1686 Pixel hinaus scrollen.<\/li>\n<\/ul>\n<\/li>\n
            • Klicken Sie auf den Textlink ‚Else‘ unter dem Ereignis, das Sie gerade in der Palette Ereignisse erstellt haben. Erstellen Sie ein Ereignis Bei Scrollen<\/strong> + Verschieben<\/strong>. W\u00e4hlen Sie das Rechteck als das zu verschiebende Element. Belassen Sie die Dropdowns ‚X‘ und ‚Y‘ bei ihren Standardwerten und klicken Sie auf ‚OK‘, um die Erstellung des Ereignisses abzuschlie\u00dfen.
              \n\"Erstellen
              \nDieses Ereignis verschiebt das Rechteck zur\u00fcck an seine urspr\u00fcngliche Position, wenn der Bildlauf des Bildschirms weniger als 1686px betr\u00e4gt.<\/li>\n
            • F\u00fcgen Sie unterhalb des Rechtecks zwei Textelemente hinzu und gestalten Sie sie nach Wunsch. Kopieren Sie sie und f\u00fcgen Sie sie zweimal ein und verteilen Sie sie im Abstand auf dem Canvas. Stellen Sie sicher, dass sie sich in der Ebenenpalette \u00fcber dem Rechteck befinden. \"Platzieren<\/li>\n<\/ol>\n

              Klicken Sie auf die Schaltfl\u00e4che ‚Abspielen‘, um Ihr Projekt zu simulieren. Scrollen Sie durch das Projekt und Sie werden sehen, dass das Rechteck am oberen Rand des Bildschirms bleibt, w\u00e4hrend die Textelemente dar\u00fcber laufen. <\/p>\n","protected":false},"excerpt":{"rendered":"

              Mit angehefteten Positionen k\u00f6nnen Sie in Justinmind ganz einfach schwebende Kopf- und Fu\u00dfzeilen sowie Pop-ups erstellen. Normalerweise bleiben die Elemente an ihrem Platz, w\u00e4hrend Sie simulieren,…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8554,8556],"tags":[],"class_list":["post-129112","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-web-mobile-interaktionen"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129112"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129112"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129112\/revisions"}],"predecessor-version":[{"id":129182,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129112\/revisions\/129182"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}