Contao-Camp 2024
Ergebnis 1 bis 1 von 1

Thema: the confetti animation - richtig anzeigen via css [SOLVED]

  1. #1
    Contao-Nutzer Avatar von schneegecko
    Registriert seit
    23.02.2011.
    Beiträge
    6

    HTML the confetti animation - richtig anzeigen via css [SOLVED]

    Hallo Contao Commuity,

    ich benötige einen Denkanstoß oder Lösungsvorschläge bzgl. der Implementierung des Konfettieffektes in den Hintergrund der Seite.

    Der Konfettieffekt soll sich über dem Hintergrundbild und unter den Inhaltselementen befinden. Ich vermute ich habe hier ein css-Brett vor dem Kopf. Irgendwie bekommt das <canvas> Element nicht die entsprechende Höhe der Seite ausgelesen in der diese aktuell angezeigt wird. Die Breite funktioniert allerdings. Der Effekt an sich funktioniert, daher gehe ich davon aus, dass das the-confetti-animation.js korrekt eingebunden und verarbeitet wird.

    the confetti animation:

    https://codepen.io/iprodev/pen/azpWBr


    St.Bock Testseite (Contao 4.4.44 LTS) mit Rocksolid Theme TAO

    http://v4test.st-bock.de/

    Ausgabeseite
    ausgabeseite.png
    HTML-Code:
    <!-- confetti animation begin -->
    <div id="codeschnipsel">
    <div class="inside">
    <canvas height="25" id="confetti" width="1899">
    </canvas>
    </div>
    </div>
    <!-- confetti animation end -->
    -> wieso verpackt mir Contao meinen simplen <canvas> tag in die beiden <div> codeschnipsel & inside? Liegt hier die Ursache des Problems?

    Module: confetti-animation-canvas
    HTML-Code:
    <canvas height="1" id="confetti" width="1"></canvas>

    Theme: Full-Width (Without Breadcrumbs)

    eigene layoutbereiche.jpg


    Aufruf des Frontend-Modules confetti-animation-canvas im Full-Width (Without Breadcrumbs) Tao Theme an der manuellen Position eigene codeschnipsel

    Template: fe_page.html5
    PHP-Code:
    <?php $this->extend('fe_page'?>
    <?php $this
    ->block('body'?>
        <!--[if lt IE 8]>
            <p>You are using an outdated browser. <a href="http://whatbrowser.org/">Upgrade your browser today</a>.</p>
        <![endif]-->
    <!-- confetti animation begin -->
    <?php $this->section('codeschnipsel'); ?>
    <!-- confetti animation end -->
        <?php echo $this->sections('top'?>
        <div class="page">
            <?php if ($this->header): ?>
                <header class="page-header">
                    <?php echo $this->header ?>
                </header>
            <?php endif ?>

            <?php echo $this->sections('before'?>

            <div class="content-wrapper">

                <section role="main" class="main-content">

                    <?php echo $this->main ?>

                    <?php echo $this->sections('main'?>

                </section>

                <?php if($this->left && $this->right): ?>
                    <aside class="sidebar">
                        <?php echo $this->left ?>
                    </aside>
                    <aside class="sidebar -right">
                        <?php echo $this->right ?>
                    </aside>
                <?php elseif($this->left || $this->right): ?>
                    <aside class="sidebar">
                        <?php echo $this->left ?>
                        <?php echo $this->right ?>
                    </aside>
                <?php endif ?>

            </div>

            <?php echo $this->sections('after'?>

            <?php if ($this->footer): ?>
                <footer class="page-footer">
                    <?php echo $this->footer ?>
                </footer>
            <?php endif ?>
        </div>
        <?php echo $this->sections('bottom'?>

    <?php $this->endblock('body'?>
    In der css-Datei habe ich nix festgelegt, alle positons, die ich probiert habe, funktionieren nicht und führen dazu, dass das <canvas> die Höhe 0 annimmt in der Ausgabe.
    custom.css
    Code:
    /* ------- confetti-animation formatierung ------- */
    #confetti{
    /* position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1; */
    Wie bekomme ich das hin?

    update: einen Schritt weiter: mit
    Code:
    echo $this->sections['codeschnipsel']
    wird kein DIV drumherum gelegt.

    SOLVED:
    tja lag tatsächlich an den extra divs, die contao von selbst drumherum gebastelt hatte...
    Code:
    #confetti{
     position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
    so itst richtig positioniert nun
    Geändert von schneegecko (06.11.2019 um 22:13 Uhr) Grund: SOLVED

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •