Animierte Website erstellen mit Elementor und GSAP

Auf dieser Seite findest du alle Bestandteile, die du benötigst, um die Website aus dem oben gezeigten Tutorial nachzubauen.

Unsere Anleitung allein reicht dir nicht aus? Schreib uns doch einfach und wir kümmern uns um dein Anliegen!

Bilder

Alle Bilder die im Tutorial verwendet wurden, kannst du hier herunterladen.

Die in diesem ZIP-Ordner enthaltenen Bilder sind ausschließlich für den persönlichen Gebrauch bestimmt. Beachte daher, dass du für die kommerzielle Verwendung der Bilder in diesem ZIP-Ordner die erforderlichen Lizenzen und Rechte benötigst.

Typografie

Überschrift 1

Roboto Condensed | Schriftgröße: 177,42 px | Zeilenhöhe: 177,42 px | Schriftschnitt: 700

Überschrift 2

Roboto Condensed | Schriftgröße: 109,66 px | Zeilenhöhe: 109,66 px | Schriftschnitt: 700

Überschrift 3

Roboto Condensed | Schriftgröße: 67,77 px | Zeilenhöhe: 67,77 px | Schriftschnitt: 700

Überschrift 4

Roboto Condensed | Schriftgröße: 41,89 px | Zeilenhöhe: 41,89 px | Schriftschnitt: 700

Überschrift 5

Roboto Condensed | Schriftgröße: 25,89 px | Zeilenhöhe: 25,89 px | Schriftschnitt: 700

Body riesig

Roboto Condensed | Schriftgröße: 41,89 px | Zeilenhöhe: 75,4 px | Schriftschnitt: 500

Body groß

Roboto Condensed | Schriftgröße: 25,89 px | Zeilenhöhe: 46,5 px | Schriftschnitt: 500

Body normal

Raleway | Schriftgröße: 21 px | Zeilenhöhe: 31,5 px | Schriftschnitt: 400

Body klein

Raleway | Schriftgröße: 16 px | Zeilenhöhe: 24 px | Schriftschnitt: 400

style.css

Kopiere einfach den kompletten CSS-Code und ersetzte den Code in deiner style.css damit. Diese findest du im Ordner deines Child-Themes. Denke auch daran, dass es nötig sein kann, die verwendeten Variablen anzupassen.

/*
==================================================================
Theme Information
==================================================================
*/

/* Theme Name: Hello Elementor Child
   Theme URI: https://github.com/elementor/hello-theme-child/
   Description: Das ist ein Child-Theme für Hello Elementor
   Author: blumango
   Author URI: https://blumango.agency/
   Template: hello-elementor
   Version: 2.0.0
   Text Domain: hello-elementor-child
   License: GNU General Public License v3 or later.
   License URI: https://www.gnu.org/licenses/gpl-3.0.html
   Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/*
==================================================================
Allgemein 
==================================================================
*/

/* Typografie */

.outline {
    text-shadow: 
        -2px -2px 0 var(--e-global-color-accent), /* Schatten oben links */
        2px -2px 0 var(--e-global-color-accent),  /* Schatten oben rechts */
        -2px 2px 0 var(--e-global-color-accent),  /* Schatten unten links */
        2px 2px 0 var(--e-global-color-accent);   /* Schatten unten rechts */
}

.outline-dark {
    text-shadow: 
        -2px -2px 0 var(--e-global-color-text), /* Schatten oben links */
        2px -2px 0 var(--e-global-color-text),  /* Schatten oben rechts */
        -2px 2px 0 var(--e-global-color-text),  /* Schatten unten links */
        2px 2px 0 var(--e-global-color-text);   /* Schatten unten rechts */
    color: var(--e-global-color-accent);
}

/* Einstellungen */

body {
    overflow-x: hidden !important;
}


/*
==================================================================
Animationen
==================================================================
*/

/* Text reveal */

.line {
    position: relative;
}

.line-mask {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--e-global-color-text);
    opacity: 0.9;
    width: 100%;
    height: 100%;
    z-index: 2; 
}

/* Kreis-effekt */

.block {
    width: 100vw;
    height: 200vh;
    overflow-x: hidden !important;
}

.dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 142vmax;
    height: 142vmax;
    border-radius: 50%;
    background-color: var(--e-global-color-accent);
    transform: translate(-50%, -50%) scale(0);
}

.kreis-titel {
    color: var(--e-global-color-primary);
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: var(--e-global-typography-primary-font-size);
    font-weight: var(--e-global-typography-primary-font-weight);
    text-transform: var(--e-global-typography-primary-text-transform);
    line-height: var(--e-global-typography-primary-line-height);
    text-align: center;
    white-space: nowrap;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .kreis-titel {
        font-size: 109.66px;
        line-height: 109.66px;
    }
}

.kreis-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    display: flex;
    flex-direction: column;
    z-index: 2;
}

/* Gradienten */

body {
    background-color: var(--e-global-color-text) !important;
    background-image: radial-gradient(at 91% 100%, hsla(157, 92%, 10%, 1) 0px, transparent 50%),
                      radial-gradient(at 8% 100%, hsla(157, 92%, 10%, 1) 0px, transparent 50%) !important;
    animation: gradient 13s ease infinite;
    background-size: 200% 200% !important;
}

@keyframes gradient {
    0% {
        background-position: 0% 20%;
    }
    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 50% 70%;
    }
    100% {
        background-position: 0% 20%;
    }
}

.hero {
    background-color: var(--e-global-color-text) !important;
    background-image: radial-gradient(at 90% 30%, hsla(157, 92%, 10%, 1) 0px, transparent 30%),
                      radial-gradient(at 10% 40%, hsla(157, 92%, 10%, 1) 0px, transparent 30%) !important;
    animation: gradient_hero 13s ease infinite;
    background-size: 150% 150% !important;
}

@keyframes gradient_hero {
    0%, 100% {
        background-size: 150% 150%;
        background-position: 50% 50%;
        filter: hue-rotate(0deg) saturate(80%);
    }
    20% {
        background-size: 130% 130%;
        background-position: 60% 40%;
        filter: hue-rotate(5deg) saturate(100%);
    }
    40% {
        background-size: 120% 120%;
        background-position: 40% 60%;
        filter: hue-rotate(0deg) saturate(90%);
    }
    60% {
        background-size: 140% 140%;
        background-position: 20% 95%;
        filter: hue-rotate(5deg);
        transform: scale(1.1);
    }
    80% {
        background-size: 110% 110%;
        background-position: 80% 20%;
        filter: hue-rotate(10deg) saturate(70%);
        transform: scale(1);
    }
}

/* Sticky Effekt */

.sticky-heading {
    position: sticky;
    top: 30%;
}

.blur {
    backdrop-filter: blur(10px);
}


/* Marquee */

.swiper-wrapper {
    transition-timing-function: linear !important; 
}


/* Cursor-Button */

.cursor {
    position: fixed;
    pointer-events: none;
    opacity: 0;
}

.cursor-small {
    top: 0px;
    left: 0px;
    z-index: 999;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: var(--e-global-color-accent);
}

.cursor-big {
    top: 0px;
    left: 0px;
    height: 120px;
    width: 120px;
    align-items: center;
    background

custom.js

Kopiere einfach den kompletten JavaScript-Code und füge ihn in deine custom.js ein. Diese Datei musst du im Ordner deines Child-Themes neu anlegen.

// Scroll Text Reveal

let text;

function runSplit() {
  let currentElement = jQuery(".split-lines");
  text = new SplitType(currentElement, { types: "lines, words" });
  jQuery(".line").append("");
  runReveal();
}

runSplit();

window.addEventListener("resize", function () {
  text.revert();
  runSplit();
  runCircle();
});

function runReveal() {
  jQuery(".line").each(function (index) {
    let triggerElement = jQuery(this);
    let targetElement = jQuery(this).find(".line-mask");

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        start: "top center",
        end: "bottom center",
        scrub: 1,
      },
    });

    tl.to(targetElement, {
      width: "0%",
      duration: 1,
      ease: "slow(0.7,0.7,false)",
    });
  });
}

// Circle Animation

function runCircle() {
  gsap.set(".dot", { xPercent: -50, yPercent: -75 });
  gsap.set(".kreis-text", { xPercent: -50, y: "-75vh" });

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".block",
      start: "top top",
      scrub: true,
      pin: true,
    },
  });

  tl.to(".dot", {
    scale: 1,
    ease: "expoScale",
  })
    .to(".kreis-text", {
      scale: 1,
      ease: "slow(0.7,0.7,false)",
    })
    .set(".kreis-background", { backgroundColor: "transparent" });
}

runCircle();

// Expertise Shrink

function runShrink() {
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".expertise",
      start: "center+=200 top",
      end: "bottom bottom",
      scrub: true,
    },
  });

  tl.to(".sticky-heading", {
    opacity: 0,
    ease: "expoScale",
  });
}

runShrink();

document.addEventListener("DOMContentLoaded", function () {
  const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    direction: "vertical",
    gestureDirection: "vertical",
    smooth: true,
    mouseMultiplier: 1,
    smoothTouch: false,
    touchMultiplier: 2,
    infinite: false,
  });

  // Get scroll value
  lenis.on("scroll", ({ scroll, limit, velocity, direction, progress }) => {
    console.log({ scroll, limit, velocity, direction, progress });
  });

  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }

  requestAnimationFrame(raf);
});

const cursorSmall = document.querySelector(".cursor-small");
const cursorBig = document.querySelector(".cursor-big");

let scale = 1;

function mousemoveHandler(e) {
  const target = e.target;
  const tl = gsap.timeline({
    defaults: {
      x: e.clientX,
      y: e.clientY,
      ease: "power2.out",
    },
  });

  if (target.closest(".cta")) {
    tl.to(".cursor-small", { opacity: 0 }).to(".cursor-big", { opacity: 1 }, "-=0.5");
  } else {
    let scale = target.classList.contains("cta") ? 4 : 1;

    tl.to(".cursor-small", { opacity: 1, scale: scale }).to(".cursor-big", { opacity: 0 }, "-=0.5");
  }
}

function mouseleaveHandler() {
  gsap.to(".cursor-small", { opacity: 0 });
}

document.addEventListener("mousemove", mousemoveHandler);
document.addEventListener("mouseleave", mouseleaveHandler);

functions.php

Kopiere einfach den kompletten PHP-Code und füge ihn in deine functions.php ein.

<?php
/**
 * Theme functions and definitions.
 *
 * For additional information on potential customization options,
 * read the developers' documentation:
 *
 * https://developers.elementor.com/docs/hello-elementor-theme/
 *
 * @package HelloElementorChild
 */

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

define('HELLO_ELEMENTOR_CHILD_VERSION', '2.0.0');

/**
 * Load child theme scripts & styles.
 *
 * @return void
 */
function hello_elementor_child_scripts_styles()
{

    wp_enqueue_style(
        'hello-elementor-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        [
            'hello-elementor-theme-style',
        ],
        HELLO_ELEMENTOR_CHILD_VERSION
    );

    // custom javascript
    wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/script.js', array('jquery'), '1.0', true);

    // Split Type
    wp_enqueue_script('split-type', 'https://unpkg.com/split-type', array(), null, true);

    // GSAP
    wp_enqueue_script('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js', array(), '3.9.0', true);

    // ScrollTrigger
    wp_enqueue_script('scrolltrigger', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js', array('gsap'), '3.9.0', true);

    // Lenis
    wp_enqueue_script('lenis-script', 'https://cdn.jsdelivr.net/gh/studio-freight/lenis@0.2.28/bundled/lenis.js', array(), '0.2.28', true);
}
add_action('wp_enqueue_scripts', 'hello_elementor_child_scripts_styles', 20);

html

Kopiere den kompletten HTML-Markup und füge ihn in ein HTML-Modul innerhalb deiner Kreis-Section hinzu.

<div class="block block--1">
    <div class="kreis-text">
        <h2 class="kreis-titel">
            <span class="outline-dark">Wie wir das</span>
        </h2>
        <h2 class="kreis-titel">Schaffen?</h2>
    </div>
    <div class="dot"></div>
</div>

Kopiere den kompletten HTML-Markup und füge ihn in ein HTML-Modul innerhalb deines Call-to-Action hinzu.

<div class="cursor cursor-small"></div>

<div class="cursor cursor-big">
    <p>
        ANFRAGE STARTEN
    </p>   
</div>

Animierte Website erstellen mit Elementor und GSAP

Bilder

Typografie

style.css

custom.js

functions.php

html

Hol uns an Bord.

Info

links

social

legal