31.12.2021, 14:23
|
|||
|
|||
Wie macht man so einen Effekt?
Hallo Leute,
Neulich bin ich auf die Website https://thirdbykenjiro.com/en/home gestoßen und da gefällt mir der Effekt beim Aufruf der Seite, also bevor der eigentliche Inhalt der Seite angezeigt wird, und ich würde gerne wissen, wie man so etwas macht. Wenn ich den Quelltext der Seite nehme und das ganze dann als HTML-Seite abspeichere und die Datei dann aufrufe, dann erscheint nur eine leere Seite. HTML-Code:
<!doctype html> <html lang="en" class="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>We are THIRD | Home</title> <meta name="description" content="In the beginning there was nothing. A canvas of seemingly endless white. Your vision - the masterpiece. Your hands - the tools. What would you make? We are THIRD."> <meta itemprop="name" content="We are THIRD | Home"/> <meta itemprop="description" content="In the beginning there was nothing. A canvas of seemingly endless white. Your vision - the masterpiece. Your hands - the tools. What would you make? We are THIRD."/> <link href="https://thirdbykenjiro.com/assets/css/main.css" rel="stylesheet"> </head> <body > <div class="background"> <div class='background__ruler'></div> <canvas class='background__canvas'></canvas> <canvas class='background__canvas'></canvas> </div> <div class="container"> <section class="page home"> <div class="page__inner"> <header class="header"> <h2 class="header__title"> <a data-navigo href="home"> THIRD <span>by Kenjiro</span> </a> </h2> <div class="header__nav-wrapper"> <nav class="header__nav"> <div class="header__line"> <div class="header__link current"> <a data-navigo href="home"> <span>Home</span> </a> </div> <div class="header__link "> <a data-navigo href="activities"> <span>Members</span> </a> </div> </div> <div class="header__logo"> <a data-navigo href="home"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111.2 128.1" width="55" height="64"> <path fill="#972e00" d="M90.1 124.1l.3.1-.2.2-1.2.4a13.2 13.2 0 00-2.5.9 14.2 14.2 0 01-1.5.5h-.1a33.8 33.8 0 01-3.7 1l-1.2.3-2 .5a6.7 6.7 0 01-1.9.1h-3a5 5 0 01-.7-.2l-.4-.1-4.6-.7a8 8 0 01-1-.2 14.5 14.5 0 00-1.6-.3 16 16 0 01-2-.6l-1.5-.5-.7-.2L58 124a23.3 23.3 0 01-2-1.2 50 50 0 01-2-1.4 8.6 8.6 0 01-.7-.6L52 120a22.7 22.7 0 01-4-3.7c-.8-1.2-1.8-2.3-2.7-3.4a12.1 12.1 0 01-.8-1.1 27.9 27.9 0 01-1.9-3.3l-.5-1a12.9 12.9 0 01-1-2.5l-1-3a2.9 2.9 0 010-.4 42.7 42.7 0 01-.7-7.3 28 28 0 01.7-5.5 33.3 33.3 0 011.4-4.6 30.7 30.7 0 012.9-5.8l2.6-4a20.7 20.7 0 012.3-2.7l2.8-3a26.6 26.6 0 012.2-2l4.5-3.6a31.7 31.7 0 013-2c1.5-1 3.2-1.9 4.9-2.7 2-1 4.1-2 6.2-3.2 1.5-.8 3-1.4 4.6-2.1l2.3-1.3a2.8 2.8 0 00.3-.1l-.5-.3-3.6-1.7c-.8-.5-1.8-.8-2.6-1.2l-2.6-1.3-.3-.2-2.5-1.2-1.8-.9c-.7-.3-1.4-.8-2-1.2l-1-.4-1-.5-1.8-.9-2.7-1.4-1.7-.8a5 5 0 00-.3.5l-1.4 4-.7 1.6-1 2.3-1.8 3.9-1 2-.5 1-1 2-1.4 2.5c-.2.4-.3.8-.6 1.1l-1.1 2-1.9 3.1a19.3 19.3 0 01-1.6 2.4l-3 4a13.8 13.8 0 01-1.8 2.2l-.8.7-1.1 1-2.6 2.1a31.6 31.6 0 01-6 3.3l-1.7.8a12.7 12.7 0 01-2 .5 21.5 21.5 0 01-2.5.2 8 8 0 01-1.6-.2l-3-.5a15.2 15.2 0 01-4.8-1.7c-1-.5-1.8-1.1-2.7-1.7l-1.3-1A9.7 9.7 0 014.5 75l-2.2-3.6a5.5 5.5 0 01-.6-1.5c-.1-.7-.4-1.3-.6-2l-1-4.3a1.8 1.8 0 010-.3v-3.9a17.4 17.4 0 01.8-5.1l1.3-3.5c.3-.9.8-1.7 1.3-2.6a17 17 0 012-3.2 14.8 14.8 0 014.2-3.6 17.4 17.4 0 011.8-1 24.5 24.5 0 014-1.3 19 19 0 015-.2 17.2 17.2 0 015.6 1.2 22.3 22.3 0 014.5 2.4 20.2 20.2 0 012 1.6l2.9 2.8 2.1 2.7.5.6.7-1.4 1-2.1c.4-1.2 1-2.3 1.5-3.5l2-4.4 1.7-4 .6-1.4a.4.4 0 00-.1-.5L44 31.7l-1.4-1.1A14.5 14.5 0 0141 29L39 27l-.8-1-2-2.3-.6-.8-.5-.7V22c-.7-1-1-2-1.7-3s-1-2-1.5-3.1a11.8 11.8 0 01-.5-1.4l-.8-2.3a5 5 0 01-.3-2 4.4 4.4 0 00-.1-.6 17.5 17.5 0 00-.3-2.4 16.5 16.5 0 01-.2-3.2l-.2-2.6v-1c0-.3.2-.4.5-.4a.4.4 0 01.5.4l.1 1 .2 1.5.3 2.2a27.4 27.4 0 00.4 3.3l.4 2.3.4 1.8a3.8 3.8 0 00.4.7 3.9 3.9 0 01.4.8 11.5 11.5 0 001 2.4l1.3 3a12 12 0 001.3 2.2l.9 1.3a2 2 0 00.1.1l1.3 1.5a41.2 41.2 0 003.1 3.3 28.5 28.5 0 003.7 3.2l.5.4a.6.6 0 00.2 0 3.1 3.1 0 00.2-.3l4.2-8.6 2.3-4.2c.5-1 1.1-2 1.8-2.9a45.8 45.8 0 013.9-5 34.8 34.8 0 014.7-4.5 24.9 24.9 0 015.1-3 39.8 39.8 0 013.8-1.6 18.9 18.9 0 012.6-.6l2.8-.4 1.8-.2 3.2-.1 1.7.1 3.6.3a17 17 0 012 .5c.8.2 1.6.5 2.5.6a13.1 13.1 0 012.7.9 14.4 14.4 0 012 1 24.3 24.3 0 014.7 3.5l2.7 2.7a12.4 12.4 0 011.1 1.8 31 31 0 012.3 4.3 18 18 0 011 3.1l.7 2 .6 4.2.1 2.4v4.3a2.1 2.1 0 010 .4l-.8 4.2c-.2 1-.6 2-1 3a22 22 0 01-2.1 4.3l-.9 1.5-.1.2-1.3 1.9a2 2 0 01-.2.3l-1.8 1.7-1.8 1.8a2.2 2.2 0 00-.4.4c-.3.5-.9.8-1.3 1.3l-.2.1-.8.6-.6.6-2.2 1.6a.7.7 0 01-.2.1c-.7 0-1.2.6-1.8.9l-.2.2a2.8 2.8 0 00.8.7l2 1.5 3.9 3.6a38.7 38.7 0 013 3.2 2.5 2.5 0 00.8.7.8.8 0 01.3.3 28 28 0 012.1 3.2c.4.7.9 1.3 1.2 2a42.4 42.4 0 012.6 7.6c.3.8.3 1.6.5 2.4a2 2 0 000 .2c.4 1.4.4 3 .8 4.3a20.8 20.8 0 01.3 2.5 8.5 8.5 0 010 1v1.9a18 18 0 01-.5 4.7 11.4 11.4 0 00-.4 2.2 8.5 8.5 0 01-.3 1.6 38.2 38.2 0 01-1.7 4.7 41 41 0 01-1.9 3.8c-.3.7-.9 1.4-1.3 2a17 17 0 01-2.4 3.3 1.9 1.9 0 00-.2.3 8.6 8.6 0 01-1.6 1.8l-2 2a1.6 1.6 0 01-.8.5 1.3 1.3 0 00-.5.2l-3.1 2.5a26.3 26.3 0 01-2.8 1.9 2 2 0 01-1.2.5l-.4.2zM109.7 91l-.3-3.8a26.9 26.9 0 00-.8-5.1l-1.2-4-1.4-4a6.3 6.3 0 00-.7-1.6l-.8-1.3c-.4-.6-.7-1.3-1.2-1.9l-1.3-1.6-1.1-1.4-.6-.6-2-2.1-2.4-2-1-.6a38.8 38.8 0 00-3.6-2.8.4.4 0 00-.5 0l-1 .5-3.4 2a214.8 214.8 0 01-5.7 3.1 21.5 21.5 0 00-2.1 1 10.7 10.7 0 01-1.8 1l-1.1.5-2.8 1.5a2.5 2.5 0 01-.8.3 2.8 2.8 0 00-1 .5l-1.2.7-1 .5-.7.5-1.8 1-3.6 2.3-2.5 1.6-.7.7a26 26 0 00-3.6 2.8 1.7 1.7 0 01-.4.3 5.8 5.8 0 00-1.6 1.2l-2.4 2.3-1 1-.5.6a16.4 16.4 0 00-2 2.6 8.8 8.8 0 01-1.1 1.5 18.7 18.7 0 00-3 5 21.3 21.3 0 00-1 2.6 11.7 11.7 0 00-.6 3.8v2.4a15.2 15.2 0 001 4.8 6.8 6.8 0 00.6 1l.2.4 1 2a11.5 11.5 0 00.8 1.4l2.3 3 1.5 1.6a13.9 13.9 0 001.8 1.7l1.7 1.5a29.1 29.1 0 002.8 2l4.5 2.4a27.6 27.6 0 006.7 2l3.9.6 1.5.2a13.5 13.5 0 001.7 0c.4 0 1 .2 1.3-.3l1.5-.1h1l3-.4a18 18 0 002-.4 33.9 33.9 0 004.2-1.5 42.7 42.7 0 004.6-2.2 18.8 18.8 0 003.3-2.3l2.3-2 1.3-1.4 1.4-1.4 1.1-1.3a20.6 20.6 0 002.5-3.4l1.4-2.4a29.9 29.9 0 002.7-6.4 33 33 0 001.1-4.6 46.4 46.4 0 00.6-5.5zM56.6 38.3l1.3.6a8.8 8.8 0 011.8 1 .6.6 0 00.4.2c.3 0 .5.1.7.3l.8.4 1.5.8 3.6 1.9 3.6 1.7 4.8 2.2 4 2a14 14 0 012.3 1.2.8.8 0 00.1 0 .6.6 0 00.6 0l2.3-1.1 4.1-2.3.9-.6 1-.6 2.3-1.4 3-2c1.3-.9 2.5-1.8 3.6-2.8a12.4 12.4 0 001-.9l1.5-1.5 1.5-1.5c.5-.5.9-1.2 1.3-1.8.6-.8 1.2-1.5 1.7-2.4a15.3 15.3 0 001.5-4 21.3 21.3 0 00.5-5 17.7 17.7 0 00-.6-3.5 12.6 12.6 0 00-.4-1.5 47.6 47.6 0 00-2-4.5 1.3 1.3 0 00-.2-.2l-2.2-3a16.5 16.5 0 00-3.4-3.4l-1.6-1.1a9 9 0 00-1.2-.8l-3-1.2a8.9 8.9 0 00-1.4-.4 15 15 0 00-1.8-.3 9 9 0 00-2.6 0l-3 .4a7.7 7.7 0 00-2.2.8L81 5a18.3 18.3 0 00-1.8 1 26.2 26.2 0 00-4.9 4L72 12.5 70 14.6l-3 4-.6 1.1-.4.7-1.3 2-1 1.5-1.3 2.3-2.7 5-2.4 5.2-.7 1.9zM19.3 40a14.5 14.5 0 00-6.2.8 13.6 13.6 0 00-3.5 2 18 18 0 00-3.8 3.8A22.2 22.2 0 003 51.3l-.7 1.9a19 19 0 00-1 4.3V60a19.2 19.2 0 00.5 5.4 20.4 20.4 0 001.3 4.3l1 2A15.3 15.3 0 008 76.6a9.2 9.2 0 004.8 2.2 8 8 0 003.4-.1l1.7-.6a11.9 11.9 0 003.4-2 24.2 24.2 0 003.7-3.4l2.4-3a65.9 65.9 0 004.5-6.8l3-5.4c1-1.8 1.8-3.7 2.7-5.5a.8.8 0 00-.1-1L34 47a18.1 18.1 0 00-1.5-1.6 26.6 26.6 0 00-3.9-3 17.8 17.8 0 00-9.4-2.4z"/> </svg> </a> </div> <div class="header__line"> <div class="header__link "> <a data-navigo href="team"> <span>Team</span> </a> </div> <div class="header__link "> <a data-navigo href="contact"> <span>Contact</span> </a> </div> </div> </nav> </div> <button class="header__menu"> <span>Open / Close Menu</span> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 208 6" preserveAspectRatio="none" > <path fill="#cb966a" d="M103 6c2.6 0 6-.3 8.6-.2a6.9 6.9 0 012.3-.4v.4l.7-.1c.3 0-.5 0 0 .2l.3-.3c0 .2 1.8.1.6.4h2.7c.6 0 .3-.3 1-.2.1 0-.2 0-.2.2 2 .3 2.3-.7 4.1-.6h-.1l.9-.1c-.3-.4-.3.2-1 0 0-.3.8-.2.8-.4a3.1 3.1 0 001-.1c.6.2 1.6 0 2 .3a3.3 3.3 0 011.4-.4c.5.2-.1.2.5.3l.1-.2c.6 0 .5 0 .5.2.5 0 .4-.3 1.2-.2l-.4.2a7 7 0 011.5 0h-.5c.4.3.7 0 .9 0 0 0-.6-.2-.4-.4a1 1 0 011.1 0l-.4.2c.8-.1.4-.2 1.2-.1a5.9 5.9 0 012.1 0h-.1l.7-.2c-.5 0-.4-.1-.4-.3.6.3 1-.4 2-.2 0 .1-.3.3-.6.2-.3.3-.4.5-1 .7.4 0 .9-.1.8 0v-.3h.7c0-.2-.5-.3 0-.4s.4.3.5.1c.8 0 .3-.3 1.1-.2a.6.6 0 01-.3 0c.6.1 1.4 0 1.6.3-.1 0-.1.2-.3.2-.7.2.5 0 .3.2 0-.2.8-.1 1.1 0v-.3c1.2-.7-.2.4 1 .3.8-.1-.2 0 .2-.2a5.2 5.2 0 001.5.2c.2 0 .6.2.7.4.4-.1 1.4.1 1.6-.1-.8-.2-.8.2-1.7 0l.3-.3a11.5 11.5 0 011.9 0v-.1a9 9 0 012-.3c0 .3-.4.2-.8.2a6 6 0 001.5 0c0 .2-.6 0-.7.2h1c0-.3.7 0 1.3 0a5 5 0 002.3-.7c.2 0 .3.2.2.3-.3-.2-.3 0-.4 0 .5 0 1 .3.8.4.7-.1-.3-.2.2-.3h1c-.1-.1-.5-.2 0-.3a9 9 0 011.3 0c-.1 0 .1.3-.3.2a1.2 1.2 0 001 0c-.7-.2 1-.2.5-.4l.6.1h-.3c.1.2.5 0 .7 0a4.3 4.3 0 01.9 0 1 1 0 01.8.2c.3 0 0-.2.1-.2h1.1s.2.5 0 .5c.4-.1.2-.4.8-.4-.4.3.7.2.3.5a4.1 4.1 0 001.8.2c.3-.2-.6-.2-.6-.4 1.5 0 1.6-.6 2.7-.5h-.3a2.8 2.8 0 001-.3c-.1.3.8.7 2 .7 0-.2-.7-.3-.5-.5h.8l-.1.1c.6 0 1.2.3 1.4 0l.7.4-.3-.2 1-.2a2 2 0 011.5.1c-.2 0-.5-.3.1-.4 0 .5 1.2.2 1.2.4.3 0 .7.1.8 0v.3c0-.4.9-.4 1.6-.4-.2.5.7 0 1 .4.2-.3 1.3-.1 1.4-.4.5 0 .4.3.6.4l.2-.1a11.8 11.8 0 001.9.3l.5-.4.2.2s.5-.1.3-.2h.2c0-.4.5-.1 1-.3.2 0 .2.2 0 .2.4 0 .2.2.4.3-.2 0 1-.6.3-.8 0 0 .4-.2.6-.1l.2.3.4-.3a4 4 0 011 .1c-.4 0-.8.6.1.6a4 4 0 00-1 .3c.2 0 .3 0 0 .1.8 0 .3-.1 1-.2 0 .3.2.4.8.5l-.5-.2.1-.1c-.2 0-.2 0-.3-.2l1-.2c-.7-.4 1.4-.3.9-.5h.6c-.6.2.5.3.4.5.2-.1-.5-.2-.2-.3a1.9 1.9 0 01.9.2h-.2l.6.1c.1-.1-.5-.2 0-.3l.7.1c-.3.2 0 .4-.6.5.4 0 1.6 0 1.1-.3h.5c-.3-.1-1-.3-.2-.4l.6-.2.3.2a.4.4 0 01.3-.2c.3 0 .3.1.3.3.7 0 .6-.2.7-.3.4 0 .5 0 .3.2a9 9 0 011.8.2c.7-.2-.1 0 .3-.3.6.5 2.3.2 3.4.1-.3-.4.3 0 .5-.4-.3.2 1 .4 0 .5h.7c.4.2-1 .1-.4.4.7 0 1.1-.4 2-.3-.4.3.5 0 .3.2a1.3 1.3 0 01-.6.1h.1c1.5.1.5-.3 1.3-.5s.7.2.7.4a1.9 1.9 0 00.9 0c-.6.1-1-.2-.8-.4.4.3 1.3 0 1.6-.1-1.2-.3-.9 0-2.1-.4-.2.1-.1.4-.9.3.5-.2 0-.2-.1-.2.1.1-.5 0-.8.1s.5-.4-.3-.4v.4c-.4 0 0-.3-.6-.2.3-.3 0-.4.7-.4-1-.4-1.5.2-2.2.3l.1-.1a1.6 1.6 0 01-.7.1c-.5 0 .4-.2.3-.3H200l.5-.3-.9.2c.1 0-.7-.2 0-.3h-1.3l-.1-.2c-.3 0-.3 0 0 0-.5 0-2 .6-1.7 0a20.5 20.5 0 01-2.6.4c1-.3-1-.4 0-.5-.7 0-.8.2-1.2.2s-.3-.3.2-.4h-.6l-.4.2c-.5-.1-.1-.2-.6-.3l-.2.3-.3-.2c.1.1-.2.2-.6.2h-.4c.4-.1-.4 0-.2-.2h-1.1l.1.2c-.9 0 0-.3-.8-.3V2c-1-.3-1.8.2-2.6 0 .5 0 .4-.3.4-.2a13.3 13.3 0 00-2.5.2c-.3-.3-.3-.3-1-.5-.6 0-.7 0-.8.2l-1.5-.1-.8.1v.1c-.9-.4-1.5.2-2.4-.1h.1-.4l.1-.2h-1.7l.3.1a2.8 2.8 0 01-1 0c.7-.2-.6 0-.7-.2h.3c-.5 0-.5 0-.4.2-.7 0-.5-.3-1.1-.1h.4c.1 0-.2.2-.5.2 0 0-.2 0 0-.1h-1.5c-.3 0-.2-.2 0-.3l-1.7.2v-.1h-.4l-.5-.1.2.1a5 5 0 01-1 0l.1-.1c-1 0-1.2-.3-2.2 0l.1-.2c-1 .3-.7-.2-1.6 0v-.1h-.4V1l-.4.3-.3-.2h-.1c-.5-.4-1.1 0-1.7-.4l.2.5c-1.6.5-3.6-.3-5.5 0V1l-.8.2c-.4-.1.2-.2.1-.3-.8.2-.3.3-1.3.4-.5-.1.2-.1.4-.2a13.4 13.4 0 01-3 0 16.6 16.6 0 01-2 0h.3a1.7 1.7 0 00-.7 0l.2-.2-1.6-.1s0 .2-.4.2c-.3-.3-1.3.2-2 0h.5a1.9 1.9 0 00-1 0h.1l-1.7.1c-.2-.3-1.5 0-1.4-.2-.6 0 .5.2-.3.2L140 1h-.5l.4-.3a.9.9 0 00-.8.5c-.5-.1-1 0-1.3-.2h.2c-1.3 0-2-.6-3-.3h.1-.7l.2-.2-1.3.2h-3c-1.1.1-1-.2-1.9 0h-.6l.1-.2c-.5.3-1.6-.3-1.2 0a3 3 0 00-1 .3c-.8 0-.2-.2-.7-.3a7.6 7.6 0 01-1.5.1h-1.1.1c-.8.3-1-.3-1.7.2-.4 0-1 0-1-.2l-3 .2c-.1-.3-.2 0-.8-.1v.2c-1.5 0-3.2-.5-4.9-.4V.3l-.3.2-5.5-.2a5.8 5.8 0 01-2 .3h.2a26.1 26.1 0 01-4 0V.4c-.3.2-.8 0-1 0l.3.1a1.4 1.4 0 01-1.3-.1l-.6.2h-.2l-.3-.2a3.6 3.6 0 00-1.3.3s-.6-.1-.2-.2h-2.3l.4.1c0 .2-.7.3-1 .2.4-.1 0-.2-.2-.4-.3.1.3.2.1.3a3.3 3.3 0 01-1.4.1h.2L89.4.6c-.5 0-.8 0-.7.3-.7 0-.3-.2-.5-.2a2.1 2.1 0 01-1.4-.2c-.3.5-1.8-.1-2 .3l-.5-.3c0 .2-.1.4-.6.4s-.3-.3-.4-.4L83 1C80.5.5 77.3.8 74.6.4a40.6 40.6 0 01-4.2.3h.2L69.2.6l1 .1a5.8 5.8 0 01-.8.1 26.4 26.4 0 00-5.5-.1c-1.2.4-.8-.4-2 0l.2-.2A31.3 31.3 0 0059 1c.2-.4-.8 0-.7-.2V1l-1-.3-.5.2V.7A6.7 6.7 0 0154 .1a45.5 45.5 0 01-7 .2 5 5 0 01-1.6.1L45 .2a4 4 0 01-1.6.2 5 5 0 00-1.6.2c-.6 0-1.2-.2-1-.4 0 .4-1.2 0-1.2 0S9-.7 1.5 1.3c-.2.2-.9.3-.6.5-.6 0-.8-.2-.9 0 .7 0-.2.4.5.7H0c0 .1.6-.2.5 0l.2-.3a1.3 1.3 0 01.7.3c.3-.2.5-.6 1.4-.4h-.3c.7 0 .4.2.6.2l.5.2c-.4-.1-1 .2-.7.1.8.1-.2 0 .4 0 .3 0 .2 0 .2.2h.7c0 .2-.5 0-.2.2l.9-.2c.1.4.9-.2 1.3.2-.6 0 0 .1 0 .2h1.5l-.2.1h.6c.1 0 1.1 0 1 .2 1.1.2.5-.3 1.5-.2.1.2-.8 0-.4.2h1a.6.6 0 01-.5.2c2.6.2 4 1 6.4.8.4.2-.2.2-.4.3 1.7-.3 2.4.4 4 .4V5a54.6 54.6 0 006.9.4h-.3a5.3 5.3 0 011.2-.3s-.3.3.4.3c-.1 0-.4-.1-.3-.2 2 .4 6.3.3 9.6.5 4.5-.1 9.3.2 13.7 0-.6 0-.4-.3.2-.2 1.3.7 2.4-.1 3.8.3 2.5-.2 4.8.4 7.2-.1v.2a2.3 2.3 0 00.9 0h2.4v-.3c.5 0 .2.2.8 0v.1l.6-.2c0 .4 1.5 0 2 .2a20.1 20.1 0 013-.2 9.3 9.3 0 002.2.3h5.8v-.2h.5c.4.4 1.2 0 1.6.2-.3-.3-.4 0-.7 0s0-.4.6-.3h.4c0 .1.4.2.4.4 1.7 0 3-.4 4.7-.3-.2.2 1.2 0 .9.3 1-.1-.2-.3.3-.5h.7s.2.2 0 .2h.7l-.2.1c1.5-.2 2.6.2 3.9 0 0-.1-.5 0-.4-.2 1.2-.2 1.1.3 2.3 0l-.2.2a1.7 1.7 0 011.2-.1c.2.2-.5.1-.8.3.4 0 1.5 0 1.2-.3a2 2 0 011 .2s-.5-.2-.2-.3a22.5 22.5 0 002.8.2v.1c.6-.2.6.3 1.5.2z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 208 6" preserveAspectRatio="none" > <path fill="#cb966a" d="M103 6c2.6 0 6-.3 8.6-.2a6.9 6.9 0 012.3-.4v.4l.7-.1c.3 0-.5 0 0 .2l.3-.3c0 .2 1.8.1.6.4h2.7c.6 0 .3-.3 1-.2.1 0-.2 0-.2.2 2 .3 2.3-.7 4.1-.6h-.1l.9-.1c-.3-.4-.3.2-1 0 0-.3.8-.2.8-.4a3.1 3.1 0 001-.1c.6.2 1.6 0 2 .3a3.3 3.3 0 011.4-.4c.5.2-.1.2.5.3l.1-.2c.6 0 .5 0 .5.2.5 0 .4-.3 1.2-.2l-.4.2a7 7 0 011.5 0h-.5c.4.3.7 0 .9 0 0 0-.6-.2-.4-.4a1 1 0 011.1 0l-.4.2c.8-.1.4-.2 1.2-.1a5.9 5.9 0 012.1 0h-.1l.7-.2c-.5 0-.4-.1-.4-.3.6.3 1-.4 2-.2 0 .1-.3.3-.6.2-.3.3-.4.5-1 .7.4 0 .9-.1.8 0v-.3h.7c0-.2-.5-.3 0-.4s.4.3.5.1c.8 0 .3-.3 1.1-.2a.6.6 0 01-.3 0c.6.1 1.4 0 1.6.3-.1 0-.1.2-.3.2-.7.2.5 0 .3.2 0-.2.8-.1 1.1 0v-.3c1.2-.7-.2.4 1 .3.8-.1-.2 0 .2-.2a5.2 5.2 0 001.5.2c.2 0 .6.2.7.4.4-.1 1.4.1 1.6-.1-.8-.2-.8.2-1.7 0l.3-.3a11.5 11.5 0 011.9 0v-.1a9 9 0 012-.3c0 .3-.4.2-.8.2a6 6 0 001.5 0c0 .2-.6 0-.7.2h1c0-.3.7 0 1.3 0a5 5 0 002.3-.7c.2 0 .3.2.2.3-.3-.2-.3 0-.4 0 .5 0 1 .3.8.4.7-.1-.3-.2.2-.3h1c-.1-.1-.5-.2 0-.3a9 9 0 011.3 0c-.1 0 .1.3-.3.2a1.2 1.2 0 001 0c-.7-.2 1-.2.5-.4l.6.1h-.3c.1.2.5 0 .7 0a4.3 4.3 0 01.9 0 1 1 0 01.8.2c.3 0 0-.2.1-.2h1.1s.2.5 0 .5c.4-.1.2-.4.8-.4-.4.3.7.2.3.5a4.1 4.1 0 001.8.2c.3-.2-.6-.2-.6-.4 1.5 0 1.6-.6 2.7-.5h-.3a2.8 2.8 0 001-.3c-.1.3.8.7 2 .7 0-.2-.7-.3-.5-.5h.8l-.1.1c.6 0 1.2.3 1.4 0l.7.4-.3-.2 1-.2a2 2 0 011.5.1c-.2 0-.5-.3.1-.4 0 .5 1.2.2 1.2.4.3 0 .7.1.8 0v.3c0-.4.9-.4 1.6-.4-.2.5.7 0 1 .4.2-.3 1.3-.1 1.4-.4.5 0 .4.3.6.4l.2-.1a11.8 11.8 0 001.9.3l.5-.4.2.2s.5-.1.3-.2h.2c0-.4.5-.1 1-.3.2 0 .2.2 0 .2.4 0 .2.2.4.3-.2 0 1-.6.3-.8 0 0 .4-.2.6-.1l.2.3.4-.3a4 4 0 011 .1c-.4 0-.8.6.1.6a4 4 0 00-1 .3c.2 0 .3 0 0 .1.8 0 .3-.1 1-.2 0 .3.2.4.8.5l-.5-.2.1-.1c-.2 0-.2 0-.3-.2l1-.2c-.7-.4 1.4-.3.9-.5h.6c-.6.2.5.3.4.5.2-.1-.5-.2-.2-.3a1.9 1.9 0 01.9.2h-.2l.6.1c.1-.1-.5-.2 0-.3l.7.1c-.3.2 0 .4-.6.5.4 0 1.6 0 1.1-.3h.5c-.3-.1-1-.3-.2-.4l.6-.2.3.2a.4.4 0 01.3-.2c.3 0 .3.1.3.3.7 0 .6-.2.7-.3.4 0 .5 0 .3.2a9 9 0 011.8.2c.7-.2-.1 0 .3-.3.6.5 2.3.2 3.4.1-.3-.4.3 0 .5-.4-.3.2 1 .4 0 .5h.7c.4.2-1 .1-.4.4.7 0 1.1-.4 2-.3-.4.3.5 0 .3.2a1.3 1.3 0 01-.6.1h.1c1.5.1.5-.3 1.3-.5s.7.2.7.4a1.9 1.9 0 00.9 0c-.6.1-1-.2-.8-.4.4.3 1.3 0 1.6-.1-1.2-.3-.9 0-2.1-.4-.2.1-.1.4-.9.3.5-.2 0-.2-.1-.2.1.1-.5 0-.8.1s.5-.4-.3-.4v.4c-.4 0 0-.3-.6-.2.3-.3 0-.4.7-.4-1-.4-1.5.2-2.2.3l.1-.1a1.6 1.6 0 01-.7.1c-.5 0 .4-.2.3-.3H200l.5-.3-.9.2c.1 0-.7-.2 0-.3h-1.3l-.1-.2c-.3 0-.3 0 0 0-.5 0-2 .6-1.7 0a20.5 20.5 0 01-2.6.4c1-.3-1-.4 0-.5-.7 0-.8.2-1.2.2s-.3-.3.2-.4h-.6l-.4.2c-.5-.1-.1-.2-.6-.3l-.2.3-.3-.2c.1.1-.2.2-.6.2h-.4c.4-.1-.4 0-.2-.2h-1.1l.1.2c-.9 0 0-.3-.8-.3V2c-1-.3-1.8.2-2.6 0 .5 0 .4-.3.4-.2a13.3 13.3 0 00-2.5.2c-.3-.3-.3-.3-1-.5-.6 0-.7 0-.8.2l-1.5-.1-.8.1v.1c-.9-.4-1.5.2-2.4-.1h.1-.4l.1-.2h-1.7l.3.1a2.8 2.8 0 01-1 0c.7-.2-.6 0-.7-.2h.3c-.5 0-.5 0-.4.2-.7 0-.5-.3-1.1-.1h.4c.1 0-.2.2-.5.2 0 0-.2 0 0-.1h-1.5c-.3 0-.2-.2 0-.3l-1.7.2v-.1h-.4l-.5-.1.2.1a5 5 0 01-1 0l.1-.1c-1 0-1.2-.3-2.2 0l.1-.2c-1 .3-.7-.2-1.6 0v-.1h-.4V1l-.4.3-.3-.2h-.1c-.5-.4-1.1 0-1.7-.4l.2.5c-1.6.5-3.6-.3-5.5 0V1l-.8.2c-.4-.1.2-.2.1-.3-.8.2-.3.3-1.3.4-.5-.1.2-.1.4-.2a13.4 13.4 0 01-3 0 16.6 16.6 0 01-2 0h.3a1.7 1.7 0 00-.7 0l.2-.2-1.6-.1s0 .2-.4.2c-.3-.3-1.3.2-2 0h.5a1.9 1.9 0 00-1 0h.1l-1.7.1c-.2-.3-1.5 0-1.4-.2-.6 0 .5.2-.3.2L140 1h-.5l.4-.3a.9.9 0 00-.8.5c-.5-.1-1 0-1.3-.2h.2c-1.3 0-2-.6-3-.3h.1-.7l.2-.2-1.3.2h-3c-1.1.1-1-.2-1.9 0h-.6l.1-.2c-.5.3-1.6-.3-1.2 0a3 3 0 00-1 .3c-.8 0-.2-.2-.7-.3a7.6 7.6 0 01-1.5.1h-1.1.1c-.8.3-1-.3-1.7.2-.4 0-1 0-1-.2l-3 .2c-.1-.3-.2 0-.8-.1v.2c-1.5 0-3.2-.5-4.9-.4V.3l-.3.2-5.5-.2a5.8 5.8 0 01-2 .3h.2a26.1 26.1 0 01-4 0V.4c-.3.2-.8 0-1 0l.3.1a1.4 1.4 0 01-1.3-.1l-.6.2h-.2l-.3-.2a3.6 3.6 0 00-1.3.3s-.6-.1-.2-.2h-2.3l.4.1c0 .2-.7.3-1 .2.4-.1 0-.2-.2-.4-.3.1.3.2.1.3a3.3 3.3 0 01-1.4.1h.2L89.4.6c-.5 0-.8 0-.7.3-.7 0-.3-.2-.5-.2a2.1 2.1 0 01-1.4-.2c-.3.5-1.8-.1-2 .3l-.5-.3c0 .2-.1.4-.6.4s-.3-.3-.4-.4L83 1C80.5.5 77.3.8 74.6.4a40.6 40.6 0 01-4.2.3h.2L69.2.6l1 .1a5.8 5.8 0 01-.8.1 26.4 26.4 0 00-5.5-.1c-1.2.4-.8-.4-2 0l.2-.2A31.3 31.3 0 0059 1c.2-.4-.8 0-.7-.2V1l-1-.3-.5.2V.7A6.7 6.7 0 0154 .1a45.5 45.5 0 01-7 .2 5 5 0 01-1.6.1L45 .2a4 4 0 01-1.6.2 5 5 0 00-1.6.2c-.6 0-1.2-.2-1-.4 0 .4-1.2 0-1.2 0S9-.7 1.5 1.3c-.2.2-.9.3-.6.5-.6 0-.8-.2-.9 0 .7 0-.2.4.5.7H0c0 .1.6-.2.5 0l.2-.3a1.3 1.3 0 01.7.3c.3-.2.5-.6 1.4-.4h-.3c.7 0 .4.2.6.2l.5.2c-.4-.1-1 .2-.7.1.8.1-.2 0 .4 0 .3 0 .2 0 .2.2h.7c0 .2-.5 0-.2.2l.9-.2c.1.4.9-.2 1.3.2-.6 0 0 .1 0 .2h1.5l-.2.1h.6c.1 0 1.1 0 1 .2 1.1.2.5-.3 1.5-.2.1.2-.8 0-.4.2h1a.6.6 0 01-.5.2c2.6.2 4 1 6.4.8.4.2-.2.2-.4.3 1.7-.3 2.4.4 4 .4V5a54.6 54.6 0 006.9.4h-.3a5.3 5.3 0 011.2-.3s-.3.3.4.3c-.1 0-.4-.1-.3-.2 2 .4 6.3.3 9.6.5 4.5-.1 9.3.2 13.7 0-.6 0-.4-.3.2-.2 1.3.7 2.4-.1 3.8.3 2.5-.2 4.8.4 7.2-.1v.2a2.3 2.3 0 00.9 0h2.4v-.3c.5 0 .2.2.8 0v.1l.6-.2c0 .4 1.5 0 2 .2a20.1 20.1 0 013-.2 9.3 9.3 0 002.2.3h5.8v-.2h.5c.4.4 1.2 0 1.6.2-.3-.3-.4 0-.7 0s0-.4.6-.3h.4c0 .1.4.2.4.4 1.7 0 3-.4 4.7-.3-.2.2 1.2 0 .9.3 1-.1-.2-.3.3-.5h.7s.2.2 0 .2h.7l-.2.1c1.5-.2 2.6.2 3.9 0 0-.1-.5 0-.4-.2 1.2-.2 1.1.3 2.3 0l-.2.2a1.7 1.7 0 011.2-.1c.2.2-.5.1-.8.3.4 0 1.5 0 1.2-.3a2 2 0 011 .2s-.5-.2-.2-.3a22.5 22.5 0 002.8.2v.1c.6-.2.6.3 1.5.2z"/> </svg> </button> <div class="header__langs "> <div class="header__lang"> <a data-navigo href="https://xhtmlforum.de/../en/home" class="header__lang-link current" onclick="window.updateLang('en')"> <span>en</span> </a> </div> </div> </header> <div class="menu"> <nav class="menu__nav"> <div class="menu__link current"> <a data-navigo href="home"> <span>Home</span> </a> </div> <div class="menu__link "> <a data-navigo href="activities"> <span>Members</span> </a> </div> <div class="menu__link "> <a data-navigo href="team"> <span>Team</span> </a> </div> <div class="menu__link "> <a data-navigo href="contact"> <span>Contact</span> </a> </div> </nav> <div class="menu__langs"> <div class="menu__lang"> <a data-navigo href="https://xhtmlforum.de/../en/home" class="menu__lang-link current" onclick="window.updateLang('en')"> <span>en</span> </a> </div> </div> </div> <div class="page__content"> <div class="home__intro"> <div class="epigraph " data-path="0"> <h2 class="epigraph__text parralax-block text-block" data-parralax="-60"> <p>WE ARE<br /> THIRD.<br /> WELCOME<br /> <em>HOME.</em></p> </h2> </div> <div class="scroll "> <div class="scroll__inner"> <div class="scroll__text"> Scroll </div> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 83" width="6" height="83"> <path fill="#972e00" d="M0 41.1c0 1 .4 2.4.3 3.4a1.3 1.3 0 01.3 1H.3v.2c0 .2 0-.2-.1 0l.2.1c-.1 0 0 .7-.4.3v1c0 .3.4.2.3.5l-.2-.1c-.3.8.7.9.5 1.6l.2.3c.3 0-.2-.1 0-.3.3 0 .1.3.4.2a.5.5 0 000 .5c-.1.2 0 .6-.3.8a1 1 0 01.5.5c-.3.2-.3 0-.3.2h.1c0 .3 0 .2-.1.2 0 .3.2.2.1.5L1 52a1.1 1.1 0 010 .6v-.2c-.3.1.1.2.1.3 0 0 .1-.2.3-.1s.2.3 0 .4l-.2-.2c.2.4.3.2.2.5h-.1a1 1 0 010 .9l.2.2c.1-.2.2-.1.3-.1-.3.2.4.3.2.7-.1 0-.2 0-.1-.2-.3-.1-.6-.1-.7-.4v.3h.3v.3c.2 0 .3-.2.4 0s-.3.2-.2.2c.1.3.3.1.2.5a.1.1 0 010-.2c0 .3 0 .6-.3.7 0 0-.2 0-.1-.2-.3-.2 0 .3-.3.2.2 0 .2.3.1.4h.2c.7.5-.4 0-.3.4.2.3 0 0 .2.1a.9.9 0 00-.1.6.7.7 0 01-.5.3c.1.1 0 .5.2.6.2-.3-.3-.3 0-.7l.2.1v.8h.2a1.6 1.6 0 01.2.8c-.2 0-.2-.2-.2-.3a1 1 0 000 .6c-.2 0 0-.3-.2-.3v.4c.3 0 0 .3 0 .5a1.4 1.4 0 00.7 1h-.2c.1-.1 0-.1 0-.1 0 .1-.3.4-.4.3 0 .3.1-.1.2 0v.5c.2-.1.2-.2.3 0a1.5 1.5 0 010 .5l-.2-.1v.3c.2-.2.2.4.5.2l-.2.3v-.1c-.2 0 0 .2.1.3a.9.9 0 01-.1.3c0 .1 0 .2-.2.3H2v.5h-.6c.1.2.4 0 .4.3-.3-.1-.2.3-.5.1a.7.7 0 00-.1.8c.2 0 0-.3.3-.3 0 .6.7.7.6 1.1v-.1a.7.7 0 00.2.4c-.2 0-.7.3-.6.8.1 0 .2-.3.4-.2v.3c0 .2-.4.4 0 .5l-.5.3.2-.1.2.4c.2.2.1.4-.1.6.1 0 .4-.2.4 0-.4 0-.2.5-.4.5v.3h-.3c.4 0 .4.4.4.6-.5 0 0 .3-.4.5.4 0 .2.5.5.5 0 .2-.3.2-.4.2v.1a2.3 2.3 0 00-.2.8l.3.2h-.2c.1.1.2.3.3.2.3 0 0 .2.2.5H2l-.2.1s.5.4.7.1a.2.2 0 01.2.3h-.3l.3.2a.8.8 0 01-.2.4c0-.1-.6-.3-.6 0a1 1 0 00-.2-.3h-.2c.1.3.2 0 .2.4-.2 0-.3 0-.4.3l.2-.2h.2s.4.3.2.3c.4-.3.3.5.6.3v.3c-.2-.2-.3.2-.5.2 0 0 .2-.2.3-.1a.5.5 0 01-.3.3v.2s.1-.2.2 0v.3c-.3-.1-.5 0-.5-.2 0 .1 0 .6.3.4v.2c0-.1.3-.5.3-.1l.2.2-.1.2-.1.2c0 .3.1.2.2.3 0 .1 0 .2-.2.1a1.5 1.5 0 01-.1.7c0 .3 0 0 .2.1-.5.2-.2 1-.1 1.4.4-.2 0 0 .4.2-.1-.1-.3.4-.4 0v.2c-.2.2-.2-.4-.5-.1 0 .3.5.4.3.8-.3-.1.1.2-.2.1a.3.3 0 01-.1-.2c0 .6.3.2.5.5s-.2.3-.3.3a.3.3 0 000 .4c-.2-.3.2-.4.3-.3-.3.1 0 .5.1.6.4-.5 0-.4.4-.8 0-.1-.4-.1-.3-.4.2.2.2 0 .3 0-.2 0 0-.2-.2-.3s.4.1.5-.2h-.4c0-.1.3 0 .2-.2.2.1.3 0 .4.3.3-.4-.2-.6-.4-1l.1.1a.3.3 0 010-.2c0-.2 0 .1.2 0V80v-.2c.1 0 .3 0 .4.2l-.3-.4c.1 0 .2-.3.3 0V79h.3c0-.2-.1-.2-.2 0 0-.2-.4-.8 0-.7a3.6 3.6 0 01-.2-1c.2.3.3-.5.4-.1.1-.2-.2-.3-.2-.5s.4 0 .5.1l-.1-.2-.2-.2c.2-.2.3 0 .3-.2H4L4 76l-.2-.2v-.2c.2.2 0-.2.3 0v-.5h-.2c-.2-.3.2 0 .2-.3H4c.3-.4-.2-.7 0-1 0 .2.2.1.2.1a2.3 2.3 0 00-.3-1c.3 0 .4-.1.5-.4 0-.2 0-.2-.2-.3l.1-.6v-.3H4c.5-.4-.2-.6.2-1h-.1.2v-.7l-.1.1a.5.5 0 010-.4c.3.3 0-.3.2-.3v.1c0-.2 0-.2-.2-.1 0-.3.4-.2.2-.5v.2c-.1 0-.3 0-.3-.2 0 0 .1-.1.2 0V68c0-.1.1 0 .2 0-.2-.5 0-.2-.1-.7v-.1l.2-.3-.2.1a.8.8 0 010-.4h.2c0-.4.2-.4 0-.8-.2-.3.4-.2 0-.6H5l-.1-.2H5l-.3-.1.2-.1h-.1c.4-.3 0-.5.4-.8l-.5.1c-.5-.6.3-1.4 0-2.2H5l-.2-.3c.2-.2.2.1.3 0-.1-.3-.3 0-.4-.5.1-.2.2.1.2.2A2.2 2.2 0 015 60a2.7 2.7 0 010-.8v.1a.3.3 0 000-.3l.3.1c0-.2-.2-.6 0-.6 0 0-.2 0-.2-.2.3 0-.1-.5 0-.8l.1.2a.4.4 0 00-.2-.4h.2l-.2-.6c.3-.1 0-.6.2-.6 0-.2-.2.2-.2 0 .1-.2 0-.3.2-.3v-.2l.2.1c0-.2-.3-.3-.4-.3 0-.2 0-.4.2-.5 0-.4.5-.7.2-1.1v-.3h.2l-.2-.4V52c0-.4.2-.4 0-.8V51h.2c-.2-.2.3-.6.1-.5a1 1 0 00-.4-.3c0-.4.2-.1.3-.3a1.3 1.3 0 01-.1-.6v-.5c-.2-.2.3-.3-.2-.6 0-.1 0-.4.2-.4a11.4 11.4 0 01-.2-1.2c.3 0 0 0 .1-.3h-.1c0-.6.4-1.3.3-2h.2l-.2-.1a20.9 20.9 0 00.2-2.2 1 1 0 01-.3-.7 4.2 4.2 0 010-1.6h.2c-.2-.1 0-.3 0-.4l-.1.1c-.2-.2-.1-.3.1-.5l-.2-.2v-.1l.2-.2a1 1 0 00-.3-.5s.1-.2.2 0v-1l-.1.2a.3.3 0 01-.2-.4c.1.2.2 0 .4 0-.1-.2-.2 0-.3 0a.6.6 0 010-.6c0-.1.2-.2.1-.4s0-.4-.3-.3c0-.3.2-.1.3-.2a.4.4 0 010-.6c-.4-.1.2-.7-.2-.8l.3-.2c-.1 0-.4 0-.4-.2s.3-.1.4-.2l-.4-.1c.4-1 .1-2.3.5-3.4a6.7 6.7 0 01-.2-1.6v-.5l-.1.4a1 1 0 01-.1-.3 4.3 4.3 0 00.1-2.2c-.4-.5.5-.3 0-.8h.2a6 6 0 00-.5-1.2c.4 0 0-.3.2-.3h-.1l.2-.4-.2-.2h.2a1.5 1.5 0 01.6-1 7.4 7.4 0 01-.1-2.9 1 1 0 01-.2-.6l.2-.2a.8.8 0 01-.2-.7.9.9 0 00-.1-.6c0-.2.1-.5.3-.4-.4 0 0-.5 0-.5s1-12.1-1-15.1C4.4.5 4.3.2 4.1.3c0-.2.3-.3 0-.3 0 .3-.4-.1-.6.2V0c-.2 0 .1.3-.1.2h.3c0 .2 0 .3-.2.3.1.2.6.3.4.6 0 .2-.2 0-.3.1l-.2.3c.1-.2-.1-.5-.1-.3-.1.3 0-.1.1.1 0 .2-.1.1-.2.1v.3c-.2 0 0-.2-.2 0l.2.2c-.4.1.2.4-.2.6-.1-.3-.1 0-.3 0V3s-.1-.2 0-.1v.2s0 .5-.2.5c-.2.4.3.1.1.5-.1 0 0-.3-.2-.1v.4l-.2-.2c-.2 1-1 1.6-.8 2.5-.2.2-.1 0-.3-.1.3.7-.4 1-.4 1.5H1A9 9 0 00.6 11l.1-.1a1.1 1.1 0 01.3.5c-.1 0-.4-.1-.3.2 0-.1 0-.2.2-.2-.4.8-.3 2.5-.5 3.8 0 1.8-.2 3.8-.1 5.5 0-.2.3-.1.3 0-.7.6 0 1-.4 1.6.2 1-.4 2 .2 2.9H.2a.4.4 0 000 .3v1h.2v.3l.1.3c-.3 0 0 .5-.2.7A3.3 3.3 0 01.5 29a1.7 1.7 0 00-.3 1 17.6 17.6 0 010 2.2h.3v.2H.4c-.3.2 0 .5-.1.7.2-.1 0-.2 0-.3s.3 0 .2.2l.1.2-.4.2c0 .7.3 1.1.2 1.8-.2 0 0 .5-.3.4.2.4.3 0 .6.1v.3H.4V36.2c.1.6-.3 1 0 1.5 0 0 0-.2.1-.1.3.5-.2.4 0 1l-.2-.2c.2.2.3.4.2.5-.3 0-.2-.2-.3-.3 0 .2 0 .6.2.5a.4.4 0 01-.1.4s0-.2.2 0a3.7 3.7 0 00-.1 1H.2c.2.3-.3.2-.2.6z"/> </svg> </div> </div> <div class="home__intro-subtitle-wrapper fade-block"> <h4 class="home__intro-subtitle">3<br/> <br/>代<br/> <br/>続<br/> <br/>け<br/> <br/>ば<br/> <br/>末<br/> <br/>代<br/> <br/>続<br/> <br/>く</h4> </div> <div class="home__intro-description fade-block"><p>In 2017, <span class="image-roll"><span class="image-roll__text"><span class="image-roll__hover"></span>Akira Ushioda</span><span class="image-roll__img-wrapper"><img src="https://thirdbykenjiro.com/media/pages/home/63e78fc65f-1615991053/akira-690x-q85.jpg" class="image-roll__img" /></span></span><br /> and <span class="image-roll"><span class="image-roll__text"><span class="image-roll__hover"></span>Matthew Norman</span><span class="image-roll__img-wrapper"><img src="https://thirdbykenjiro.com/media/pages/home/e577f5bfce-1615991053/matt-690x-q85.jpg" class="image-roll__img" /></span></span><br /> founded <em>Kenjiro Private Office</em>.<br /> A boutique family office<br /> designed to make <em>wealth</em><br /> personal again. Away from<br /> the sterile, predatory world<br /> of institutional finance.</p></div> </div> <div class="home__path"> <div class="home__path-description wipe-block"><p><cite>As a third generation kid, people won’t stop reminding you that the odds are stacked against you. But the real killer is inertia. A misguided trust in the passive power of wealth and the systems supposed to manage it in your name.</cite><br /> <em>Akira Ushioda</em></p></div> <div class="home__path-image img-block parralax-block" > <img src="https://thirdbykenjiro.com/media/pages/home/e96079b68c-1615991053/supportivenature-1320x978.62068965517-q85.jpg" alt="FOLLOW YOUR PATH" class="" width="880" height="652" /> </div> <div class="home__path-description wipe-block"><p><cite>Our community is blooming. Through a set of on boarding activities, we arm the next generations with the knowledge and rigour they need to set up a private office of their own.</cite><br /> <em>Matthew Norman</em></p></div> </div> <div class="home__community"> <div class="epigraph " data-path="0"> <h2 class="epigraph__text parralax-block text-block" data-parralax="-60"> <p>Trust,<br /> community<br /> and<br /> <em>collaboration.</em></p> </h2> </div> <div class="home__community-block wipe-block"> <div class="home__community-description"><p>THIRD gathers a<br /> community of <em>people</em><br /> that are ready<br /> to build. <em>Together.</em><br /> Work side-by-side.<br /> Share <em>knowledge</em><br /> and craft a new future<br /> for their <em>fortunes</em>.</p></div> <div class="home__community-contact"><p>For more information about what THIRD can do, <a href="https://preprod.thirdbykenjiro.com/en/contact">get in touch</a></p></div> </div> <a href="team" data-navigo class="home__community-button lottie-roll fade-block" data-lottie="circle"> Discover what we do </a> </div> <div class="home__community-image img-block" > <img src="https://thirdbykenjiro.com/media/pages/home/7132391aba-1615991053/pathtogrowth-2220x1645.8620689655-q85.jpg" alt="" class="" width="1480" height="1097" /> </div> </div> <aside class="related"> <h4 class="related__title fade-block">Third Words.</h4> <ul class="related__list"> <li class="related__item fade-block lottie-roll"> <a target='_blank' class="related__item-external related__item-link" href="https://www.ft.com/content/9a441592-d928-11e9-9c26-419d783e10e8" data-lottie='arrow'> <h5 class="related__item-label">View</h4> <div class="related__item-inner"> <h4 class="related__item-title">The shift in transaction sourcing</h4> </div> </a> </li> <li class="related__item fade-block lottie-roll"> <a data-navigo class="related__item-internal related__item-link" href="activities/project-bubble-tea" data-lottie='arrow'> <div class="related__item-inner"> <h5 class="related__item-label">What we do</h4> <h4 class="related__item-title">Project Bubble Tea</h4> <time class="related__item-date">17 Mar 21</time> </div> </a> </li> <li class="related__item fade-block lottie-roll"> <a data-navigo class="related__item-internal related__item-link" href="activities/the-gaming-story" data-lottie='arrow'> <div class="related__item-inner"> <h5 class="related__item-label">View</h4> <h4 class="related__item-title">The Gaming Story</h4> <time class="related__item-date">17 Mar 21</time> </div> </a> </li> </ul> </aside> <footer class="footer"> <div class="footer__top"> <nav class="footer__sitemap"> <h3 class="footer__title fade-block"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111.2 128.1" width="55" height="64"> <path fill="#972e00" d="M90.1 124.1l.3.1-.2.2-1.2.4a13.2 13.2 0 00-2.5.9 14.2 14.2 0 01-1.5.5h-.1a33.8 33.8 0 01-3.7 1l-1.2.3-2 .5a6.7 6.7 0 01-1.9.1h-3a5 5 0 01-.7-.2l-.4-.1-4.6-.7a8 8 0 01-1-.2 14.5 14.5 0 00-1.6-.3 16 16 0 01-2-.6l-1.5-.5-.7-.2L58 124a23.3 23.3 0 01-2-1.2 50 50 0 01-2-1.4 8.6 8.6 0 01-.7-.6L52 120a22.7 22.7 0 01-4-3.7c-.8-1.2-1.8-2.3-2.7-3.4a12.1 12.1 0 01-.8-1.1 27.9 27.9 0 01-1.9-3.3l-.5-1a12.9 12.9 0 01-1-2.5l-1-3a2.9 2.9 0 010-.4 42.7 42.7 0 01-.7-7.3 28 28 0 01.7-5.5 33.3 33.3 0 011.4-4.6 30.7 30.7 0 012.9-5.8l2.6-4a20.7 20.7 0 012.3-2.7l2.8-3a26.6 26.6 0 012.2-2l4.5-3.6a31.7 31.7 0 013-2c1.5-1 3.2-1.9 4.9-2.7 2-1 4.1-2 6.2-3.2 1.5-.8 3-1.4 4.6-2.1l2.3-1.3a2.8 2.8 0 00.3-.1l-.5-.3-3.6-1.7c-.8-.5-1.8-.8-2.6-1.2l-2.6-1.3-.3-.2-2.5-1.2-1.8-.9c-.7-.3-1.4-.8-2-1.2l-1-.4-1-.5-1.8-.9-2.7-1.4-1.7-.8a5 5 0 00-.3.5l-1.4 4-.7 1.6-1 2.3-1.8 3.9-1 2-.5 1-1 2-1.4 2.5c-.2.4-.3.8-.6 1.1l-1.1 2-1.9 3.1a19.3 19.3 0 01-1.6 2.4l-3 4a13.8 13.8 0 01-1.8 2.2l-.8.7-1.1 1-2.6 2.1a31.6 31.6 0 01-6 3.3l-1.7.8a12.7 12.7 0 01-2 .5 21.5 21.5 0 01-2.5.2 8 8 0 01-1.6-.2l-3-.5a15.2 15.2 0 01-4.8-1.7c-1-.5-1.8-1.1-2.7-1.7l-1.3-1A9.7 9.7 0 014.5 75l-2.2-3.6a5.5 5.5 0 01-.6-1.5c-.1-.7-.4-1.3-.6-2l-1-4.3a1.8 1.8 0 010-.3v-3.9a17.4 17.4 0 01.8-5.1l1.3-3.5c.3-.9.8-1.7 1.3-2.6a17 17 0 012-3.2 14.8 14.8 0 014.2-3.6 17.4 17.4 0 011.8-1 24.5 24.5 0 014-1.3 19 19 0 015-.2 17.2 17.2 0 015.6 1.2 22.3 22.3 0 014.5 2.4 20.2 20.2 0 012 1.6l2.9 2.8 2.1 2.7.5.6.7-1.4 1-2.1c.4-1.2 1-2.3 1.5-3.5l2-4.4 1.7-4 .6-1.4a.4.4 0 00-.1-.5L44 31.7l-1.4-1.1A14.5 14.5 0 0141 29L39 27l-.8-1-2-2.3-.6-.8-.5-.7V22c-.7-1-1-2-1.7-3s-1-2-1.5-3.1a11.8 11.8 0 01-.5-1.4l-.8-2.3a5 5 0 01-.3-2 4.4 4.4 0 00-.1-.6 17.5 17.5 0 00-.3-2.4 16.5 16.5 0 01-.2-3.2l-.2-2.6v-1c0-.3.2-.4.5-.4a.4.4 0 01.5.4l.1 1 .2 1.5.3 2.2a27.4 27.4 0 00.4 3.3l.4 2.3.4 1.8a3.8 3.8 0 00.4.7 3.9 3.9 0 01.4.8 11.5 11.5 0 001 2.4l1.3 3a12 12 0 001.3 2.2l.9 1.3a2 2 0 00.1.1l1.3 1.5a41.2 41.2 0 003.1 3.3 28.5 28.5 0 003.7 3.2l.5.4a.6.6 0 00.2 0 3.1 3.1 0 00.2-.3l4.2-8.6 2.3-4.2c.5-1 1.1-2 1.8-2.9a45.8 45.8 0 013.9-5 34.8 34.8 0 014.7-4.5 24.9 24.9 0 015.1-3 39.8 39.8 0 013.8-1.6 18.9 18.9 0 012.6-.6l2.8-.4 1.8-.2 3.2-.1 1.7.1 3.6.3a17 17 0 012 .5c.8.2 1.6.5 2.5.6a13.1 13.1 0 012.7.9 14.4 14.4 0 012 1 24.3 24.3 0 014.7 3.5l2.7 2.7a12.4 12.4 0 011.1 1.8 31 31 0 012.3 4.3 18 18 0 011 3.1l.7 2 .6 4.2.1 2.4v4.3a2.1 2.1 0 010 .4l-.8 4.2c-.2 1-.6 2-1 3a22 22 0 01-2.1 4.3l-.9 1.5-.1.2-1.3 1.9a2 2 0 01-.2.3l-1.8 1.7-1.8 1.8a2.2 2.2 0 00-.4.4c-.3.5-.9.8-1.3 1.3l-.2.1-.8.6-.6.6-2.2 1.6a.7.7 0 01-.2.1c-.7 0-1.2.6-1.8.9l-.2.2a2.8 2.8 0 00.8.7l2 1.5 3.9 3.6a38.7 38.7 0 013 3.2 2.5 2.5 0 00.8.7.8.8 0 01.3.3 28 28 0 012.1 3.2c.4.7.9 1.3 1.2 2a42.4 42.4 0 012.6 7.6c.3.8.3 1.6.5 2.4a2 2 0 000 .2c.4 1.4.4 3 .8 4.3a20.8 20.8 0 01.3 2.5 8.5 8.5 0 010 1v1.9a18 18 0 01-.5 4.7 11.4 11.4 0 00-.4 2.2 8.5 8.5 0 01-.3 1.6 38.2 38.2 0 01-1.7 4.7 41 41 0 01-1.9 3.8c-.3.7-.9 1.4-1.3 2a17 17 0 01-2.4 3.3 1.9 1.9 0 00-.2.3 8.6 8.6 0 01-1.6 1.8l-2 2a1.6 1.6 0 01-.8.5 1.3 1.3 0 00-.5.2l-3.1 2.5a26.3 26.3 0 01-2.8 1.9 2 2 0 01-1.2.5l-.4.2zM109.7 91l-.3-3.8a26.9 26.9 0 00-.8-5.1l-1.2-4-1.4-4a6.3 6.3 0 00-.7-1.6l-.8-1.3c-.4-.6-.7-1.3-1.2-1.9l-1.3-1.6-1.1-1.4-.6-.6-2-2.1-2.4-2-1-.6a38.8 38.8 0 00-3.6-2.8.4.4 0 00-.5 0l-1 .5-3.4 2a214.8 214.8 0 01-5.7 3.1 21.5 21.5 0 00-2.1 1 10.7 10.7 0 01-1.8 1l-1.1.5-2.8 1.5a2.5 2.5 0 01-.8.3 2.8 2.8 0 00-1 .5l-1.2.7-1 .5-.7.5-1.8 1-3.6 2.3-2.5 1.6-.7.7a26 26 0 00-3.6 2.8 1.7 1.7 0 01-.4.3 5.8 5.8 0 00-1.6 1.2l-2.4 2.3-1 1-.5.6a16.4 16.4 0 00-2 2.6 8.8 8.8 0 01-1.1 1.5 18.7 18.7 0 00-3 5 21.3 21.3 0 00-1 2.6 11.7 11.7 0 00-.6 3.8v2.4a15.2 15.2 0 001 4.8 6.8 6.8 0 00.6 1l.2.4 1 2a11.5 11.5 0 00.8 1.4l2.3 3 1.5 1.6a13.9 13.9 0 001.8 1.7l1.7 1.5a29.1 29.1 0 002.8 2l4.5 2.4a27.6 27.6 0 006.7 2l3.9.6 1.5.2a13.5 13.5 0 001.7 0c.4 0 1 .2 1.3-.3l1.5-.1h1l3-.4a18 18 0 002-.4 33.9 33.9 0 004.2-1.5 42.7 42.7 0 004.6-2.2 18.8 18.8 0 003.3-2.3l2.3-2 1.3-1.4 1.4-1.4 1.1-1.3a20.6 20.6 0 002.5-3.4l1.4-2.4a29.9 29.9 0 002.7-6.4 33 33 0 001.1-4.6 46.4 46.4 0 00.6-5.5zM56.6 38.3l1.3.6a8.8 8.8 0 011.8 1 .6.6 0 00.4.2c.3 0 .5.1.7.3l.8.4 1.5.8 3.6 1.9 3.6 1.7 4.8 2.2 4 2a14 14 0 012.3 1.2.8.8 0 00.1 0 .6.6 0 00.6 0l2.3-1.1 4.1-2.3.9-.6 1-.6 2.3-1.4 3-2c1.3-.9 2.5-1.8 3.6-2.8a12.4 12.4 0 001-.9l1.5-1.5 1.5-1.5c.5-.5.9-1.2 1.3-1.8.6-.8 1.2-1.5 1.7-2.4a15.3 15.3 0 001.5-4 21.3 21.3 0 00.5-5 17.7 17.7 0 00-.6-3.5 12.6 12.6 0 00-.4-1.5 47.6 47.6 0 00-2-4.5 1.3 1.3 0 00-.2-.2l-2.2-3a16.5 16.5 0 00-3.4-3.4l-1.6-1.1a9 9 0 00-1.2-.8l-3-1.2a8.9 8.9 0 00-1.4-.4 15 15 0 00-1.8-.3 9 9 0 00-2.6 0l-3 .4a7.7 7.7 0 00-2.2.8L81 5a18.3 18.3 0 00-1.8 1 26.2 26.2 0 00-4.9 4L72 12.5 70 14.6l-3 4-.6 1.1-.4.7-1.3 2-1 1.5-1.3 2.3-2.7 5-2.4 5.2-.7 1.9zM19.3 40a14.5 14.5 0 00-6.2.8 13.6 13.6 0 00-3.5 2 18 18 0 00-3.8 3.8A22.2 22.2 0 003 51.3l-.7 1.9a19 19 0 00-1 4.3V60a19.2 19.2 0 00.5 5.4 20.4 20.4 0 001.3 4.3l1 2A15.3 15.3 0 008 76.6a9.2 9.2 0 004.8 2.2 8 8 0 003.4-.1l1.7-.6a11.9 11.9 0 003.4-2 24.2 24.2 0 003.7-3.4l2.4-3a65.9 65.9 0 004.5-6.8l3-5.4c1-1.8 1.8-3.7 2.7-5.5a.8.8 0 00-.1-1L34 47a18.1 18.1 0 00-1.5-1.6 26.6 26.6 0 00-3.9-3 17.8 17.8 0 00-9.4-2.4z"/> </svg> THIRD BY KENJIRO. </h3> <ul class="footer__links fade-block"> <li class="footer__link"> <a data-navigo href="home"> <span>Home</span> </a> </li> <li class="footer__link"> <a data-navigo href="activities"> <span>Members</span> </a> </li> <li class="footer__link"> <a data-navigo href="team"> <span>Team</span> </a> </li> <li class="footer__link"> <a data-navigo href="contact"> <span>Contact</span> </a> </li> </ul> <ul class="footer__links fade-block"> <li class="footer__link"> <a target="_blank" href="https://thirdbykenjiro.com/media/site/8167393484-1615992437/cookie-policy-third.pdf"> <span>Cookie Policy</span> </a> </li> <li class="footer__link"> <a data-navigo href="akira-ushioda"> <span>Akira Website ↗</span> </a> </li> </ul> </nav> <div class="footer__contact fade-block"> <div class="footer__address"> <p>Kenjiro private office 20<br /> Great Chapel St. Soho, London<br /> W1F 8 FW, United Kingdom</p> </div> <a class="footer__email" href="mailto:contact@thirdbykenjiro.com"> contact@thirdbykenjiro.com </a> </div> </div> <div class="footer__bottom"> <div class="footer__copyright"> © 2021 THIRD All rights reserved </div> <button class="footer__back-to-top"> <span class="footer__back-to-top-desktop"> Back to top </span> <span class="footer__back-to-top-mobile"> TOP </span> </button> </div> </footer> </div> </section> </div> <script src="https://thirdbykenjiro.com/assets/js/main.js"></script> </body> </html> Würde mich sehr freuen, wenn mir jemand helfen würde. Ich wünsche euch allen einen guten Rutsch in ein schönes Jahr 2022 
|
| Sponsored Links |
|
03.01.2022, 12:14
|
|||
|
|||
Mit Javascript und Canvas Animationen wurde das umgesetzt.
Wenn du die Seite aufrufst und in den Browser Development Tools das File "scene.js" öffnest siehst du die Logik dazu. In dem Fall der Seite wird dazu three.js verwendet https://threejs.org Eine JS Library zur erstellung von (nicht nur 3d) Inhalten. Falls du nicht weißt, wie du dir das anschaust: In den Dev Tools auf "Sources" Tab gehen, dort dann Strg + P drücken und den Dateinamen eingeben. Im scene.js wird zuerst die Kamera erstellt (createCamera Methode) Dann werden die Items (die "Brush-Strokes") erstellt. in der Funktion "animateBackground" wird dann die Animation ausgeführt. Nicht unbedingt trivial.
|
| Sponsored Links |
|
03.01.2022, 13:00
|
|||
|
|||
|
Zitat:
Vielen Dank für deine Hilfe und deine Erklärung. Werde mir das ganze mal zu Gemüte führen. Wünsche dir ein gutes und gesundes Jahr 2022!
|
 |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Grafische Buttons zur Navigation nutzen | dercoe | CSS | 27 | 22.03.2012 14:08 |
| Meinung zu eigenentwickeltem, neuem Opensource CMS-System | wkud | (X)HTML | 14 | 22.02.2007 16:33 |
| IE zeigt Scollbar mit overflow:auto nicht an | cat@home | CSS | 1 | 12.02.2007 16:26 |
| [XHTML 1.1] - Wie bindet man fehlerfrei Links und Bilder ein | Sorcio | (X)HTML | 5 | 18.08.2005 20:15 |
| standard? xhtml : target - wie kann man das loesen? | karmatec | Fragen, Konstruktive Kritik, Lob / Bekanntmachungen | 3 | 28.01.2005 16:37 |
Linear-Darstellung
