ilch Forum » Ilch CMS 2.x » Allgemein » Weihnachten

Geschlossen
  1. #1
    User Pic
    Harzflip1 Mitglied
    Registriert seit
    18.03.2017
    Beitrge
    20
    Beitragswertungen
    0 Beitragspunkte
    Hallo,

    kann man die HP weihnachtlicher gestalten?
    Kenne es noch von früher von anderen CMS's wo es verschiedene Sachen gab.
    Zum Beispiel: ,, Schneescript, Wunschliste, Weihnachtskalender und andere Musik usw".

    Gibt es irgendwas davon für Ilch?

    Danke für Infos lcheln


    verwendete ilch Version: 2.x

    betroffene Homepage: www.lethal-response.de
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Nex4T ilch.de Design
    Registriert seit
    28.02.2007
    Beitrge
    2.998
    Beitragswertungen
    150 Beitragspunkte
    Ja gibt es, soweit ich gesehen habe 2 Module

    www.ilch.de/downloads-show-1794.html

    www.ilch.de/downloads-show-248.html

    Sind aber ziemlich alt, ob das noch Sicher ist, ist eine andere Frage lcheln
    while(!asleep()) sheep++;
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Harzflip1 Mitglied
    Registriert seit
    18.03.2017
    Beitrge
    20
    Beitragswertungen
    0 Beitragspunkte
    Danke für die Info aber ich brauch es für Ilch 2 lcheln

    Und bei dem einen scheint es so zu sein das die enthaltenen Bilder (z.b. die Schneeflocke) von einer extrernen Seite geladen werden wo die verlinkung aber nicht mehr passt traurig
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Phoenix1303 Mitglied
    Registriert seit
    04.06.2011
    Beitrge
    119
    Beitragswertungen
    11 Beitragspunkte
    Mahlzeit Harzflip,

    ich kann dir die Nacht mal ein Schneescript raussuchen, was ich jahrelang benutzt habe.
    Eingebunden wird das direkt in die index des Styles und muss somit auch von Hand wieder deaktiviert werden.
    Insgesamt funktioniert das sowohl mit Grafikdateien, welche du auf deinem Server speichern musst, oder über Symbole, wodurch keine Grafiken benötigt werden.

    Wie Nex4T auch schon betonte solltest du aber vorher schauen, ob der Code etc noch sicher ist, da auch das Script schon seit 6-7 Jahren unverändert existiert.

    LG Manu
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Nex4T ilch.de Design
    Registriert seit
    28.02.2007
    Beitrge
    2.998
    Beitragswertungen
    150 Beitragspunkte
    HTML direkt nach dem Body Tag einbinden
    <canvas id='canv'></canvas>



    JS :

    var c = document.getElementById('canv'), 
        $ = c.getContext("2d");
    var w = c.width = window.innerWidth, 
        h = c.height = window.innerHeight;
    
    Snowy();
    function Snowy() {
      var snow, arr = [];
      var num = 600, tsc = 1, sp = 1;
      var sc = 1.3, t = 0, mv = 20, min = 1;
        for (var i = 0; i < num; ++i) {
          snow = new Flake();
          snow.y = Math.random() * (h + 50);
          snow.x = Math.random() * w;
          snow.t = Math.random() * (Math.PI * 2);
          snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
          snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
          snow.sp = snow.sp < min ? min : snow.sp;
          arr.push(snow);
        }
      go();
      function go(){
        window.requestAnimationFrame(go);
          $.clearRect(0, 0, w, h);
          $.fillStyle = 'hsla(242, 95%, 3%, 1)';
          $.fillRect(0, 0, w, h);
          $.fill();
            for (var i = 0; i < arr.length; ++i) {
              f = arr[i];
              f.t += .05;
              f.t = f.t >= Math.PI * 2 ? 0 : f.t;
              f.y += f.sp;
              f.x += Math.sin(f.t * tsc) * (f.sz * .3);
              if (f.y > h + 50) f.y = -10 - Math.random() * mv;
              if (f.x > w + mv) f.x = - mv;
              if (f.x < - mv) f.x = w + mv;
              f.draw();}
     }
     function Flake() {
       this.draw = function() {
          this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
          this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
          this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
          $.moveTo(this.x, this.y);
          $.fillStyle = this.g;
          $.beginPath();
          $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
          $.fill();}
      }
    }
    /*________________________________________*/
    window.addEventListener('resize', function(){
      c.width = w = window.innerWidth;
      c.height = h = window.innerHeight;
    }, false);

    Im JS Code Function Snowy da steht var num = 600, tsc = 1, sp = 1; An der 600 kannst du rumspielen für mehr oder weniger.
    Für Js bitte eine exteren Datei anlegen und Einbinden, muss nicht ist aber Übersichtlicher.


    Zuletzt modifiziert von Nex4T am 30.11.2017 - 13:32:42
    while(!asleep()) sheep++;
    1 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    BleckHall Mitglied
    Registriert seit
    11.11.2014
    Beitrge
    220
    Beitragswertungen
    4 Beitragspunkte
    ZitatZitat geschrieben von Nex4T
    HTML direkt nach dem Body Tag einbinden
    <canvas id='canv'></canvas>



    JS :

    var c = document.getElementById('canv'), 
        $ = c.getContext("2d");
    var w = c.width = window.innerWidth, 
        h = c.height = window.innerHeight;
    
    Snowy();
    function Snowy() {
      var snow, arr = [];
      var num = 600, tsc = 1, sp = 1;
      var sc = 1.3, t = 0, mv = 20, min = 1;
        for (var i = 0; i < num; ++i) {
          snow = new Flake();
          snow.y = Math.random() * (h + 50);
          snow.x = Math.random() * w;
          snow.t = Math.random() * (Math.PI * 2);
          snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
          snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
          snow.sp = snow.sp < min ? min : snow.sp;
          arr.push(snow);
        }
      go();
      function go(){
        window.requestAnimationFrame(go);
          $.clearRect(0, 0, w, h);
          $.fillStyle = 'hsla(242, 95%, 3%, 1)';
          $.fillRect(0, 0, w, h);
          $.fill();
            for (var i = 0; i < arr.length; ++i) {
              f = arr[i];
              f.t += .05;
              f.t = f.t >= Math.PI * 2 ? 0 : f.t;
              f.y += f.sp;
              f.x += Math.sin(f.t * tsc) * (f.sz * .3);
              if (f.y > h + 50) f.y = -10 - Math.random() * mv;
              if (f.x > w + mv) f.x = - mv;
              if (f.x < - mv) f.x = w + mv;
              f.draw();}
     }
     function Flake() {
       this.draw = function() {
          this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
          this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
          this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
          $.moveTo(this.x, this.y);
          $.fillStyle = this.g;
          $.beginPath();
          $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
          $.fill();}
      }
    }
    /*________________________________________*/
    window.addEventListener('resize', function(){
      c.width = w = window.innerWidth;
      c.height = h = window.innerHeight;
    }, false);

    Im JS Code Function Snowy da steht var num = 600, tsc = 1, sp = 1; An der 600 kannst du rumspielen für mehr oder weniger.
    Für Js bitte eine exteren Datei anlegen und Einbinden, muss nicht ist aber Übersichtlicher.


    Zuletzt modifiziert von Nex4T am 30.11.2017 - 13:32:42


    Bei mir funktioniert das iwie nicht (galgenboschtrolle-rhm.de/) meine Page ist verzogen hier die JS-Datei galgenboschtrolle-rhm.de/application/layouts/clan2columns/canv.js und die

    index.php
    <!DOCTYPE html>
    <html lang="de">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <?=$this->getHeader() ?>
    
        <link href="<?=$this->getLayoutUrl('css/app.css?id=2e211915996888919501') ?>" rel="stylesheet">
        <link href="<?=$this->getLayoutUrl('css/custom.css') ?>" rel="stylesheet">
    
        <?=$this->getCustomCSS() ?>
    
        <script src="<?= $this->getLayoutUrl('js/app.js?id=56a27d1935a8a43a59a2') ?>"></script>
            <?php include ROOT_PATH.'/analyticstracking.php'; ?>
    </head>
    <body>
       <canvas id='canv'></canvas>
        <div id="clan2columns" class="custom">
            <div class="container">
                <header class="pageHeader">
                </header>
                <nav class="navbar navbar-default navbar-custom">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#">Navigation</a>
                        </div>
    
                        <div class="collapse navbar-collapse" id="navbar">
                            <ul class="nav navbar-nav">
                                <?php
                                    $menuTemplate = '
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">%s <span class="caret"></span></a>
                                            %c
                                        </li>
                                    ';
                                    echo $this->getMenu(1, $menuTemplate, [
                                        'menus' => [
                                            'ul-class-root' => 'dropdown-menu',
                                            'ul-class-child' => '',
                                            'allow-nesting' => false,
                                        ],
                                        'boxes' => [
                                            'render' => false,
                                        ],
                                    ]);
                                ?>
                            </ul>
                            <ul class="nav navbar-nav navbar-right">
                                <?= $this->getBox('user', 'login', 'login.navbar'); ?>
                            </ul>
                        </div>
                    </div>
                </nav>
                <div class="content">
                    <div class="content-wrapper">
                        <main class="content">
                            <div class="breadcrumb_container">
                                <?= $this->getHmenu(); ?>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <?=$this->getContent() ?>
                                </div>
                            </div>
                        </main>
                        <aside class="sidebar">
                            <div class="panel box">
                            <?=
                                $this->getMenu(2,'<div class="panel-heading"><i class="fa fa-navicon"></i> %s</div> %c', [
                                    'menus' => [
                                        'ul-class-root' => 'list-group ilch_menu_ul',
                                        'ul-class-child' => '',
                                        'li-class-root' => 'list-group-item',
                                    ],
                                    'boxes' => [
                                        'render' => true,
                                    ],
                                ]);
                            ?>
                            </div>
                        </aside>
                    </div>
                </div>
                <footer>
    				<div align="center"><a href="/">Home</a> <font color="black">|</font> <a href="/index.php/contact/index/index">Kontakt</a> <font color="black">|</font> <a href="/index.php/imprint/index/index">Impressum</a> <font color="black">|</font> <a href="/index.php/privacy/index/index">Datenschutz</a></div>                            
                </footer>
            </div>
        </div>
    
        <?= $this->getFooter() ?>
    </body>
    </html>



    Zuletzt modifiziert von BleckHall am 01.12.2017 - 09:08:51
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Nex4T ilch.de Design
    Registriert seit
    28.02.2007
    Beitrge
    2.998
    Beitragswertungen
    150 Beitragspunkte
    wo bindest du die js datei ein?
    while(!asleep()) sheep++;
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    BleckHall Mitglied
    Registriert seit
    11.11.2014
    Beitrge
    220
    Beitragswertungen
    4 Beitragspunkte
    in der index.php vom design
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    Nex4T ilch.de Design
    Registriert seit
    28.02.2007
    Beitrge
    2.998
    Beitragswertungen
    150 Beitragspunkte
    Richtig so sollte es sein, deine index.php zeigt aber keinen Aufruf der canv.js, ich sehe diese auch nicht eingebunden.
    while(!asleep()) sheep++;
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    BleckHall Mitglied
    Registriert seit
    11.11.2014
    Beitrge
    220
    Beitragswertungen
    4 Beitragspunkte
    ZitatZitat geschrieben von Nex4T
    Richtig so sollte es sein, deine index.php zeigt aber keinen Aufruf der canv.js, ich sehe diese auch nicht eingebunden.




    Bei mir wird es angezeigt aber es fällt kein "schnee" und es wir einfach nur eine riesige Freifläche über den header gezogen
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    Nex4T ilch.de Design
    Registriert seit
    28.02.2007
    Beitrge
    2.998
    Beitragswertungen
    150 Beitragspunkte
    Du hast nur den HTML Tag eingebunden aber nicht das script
    while(!asleep()) sheep++;
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    BleckHall Mitglied
    Registriert seit
    11.11.2014
    Beitrge
    220
    Beitragswertungen
    4 Beitragspunkte
    ZitatZitat geschrieben von Nex4T
    Du hast nur den HTML Tag eingebunden aber nicht das script


    <canvas id='canv'>var c = document.getElementById('canv'),
    $ = c.getContext("2d");
    var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight;

    Snowy();
    function Snowy() {
    var snow, arr = [];
    var num = 600, tsc = 1, sp = 1;
    var sc = 1.3, t = 0, mv = 20, min = 1;
    for (var i = 0; i < num; ++i) {
    snow = new Flake();
    snow.y = Math.random() * (h + 50);
    snow.x = Math.random() * w;
    snow.t = Math.random() * (Math.PI * 2);
    snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
    snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
    snow.sp = snow.sp < min ? min : snow.sp;
    arr.push(snow);
    }
    go();
    function go(){
    window.requestAnimationFrame(go);
    $.clearRect(0, 0, w, h);
    $.fillStyle = 'hsla(242, 95%, 3%, 1)';
    $.fillRect(0, 0, w, h);
    $.fill();
    for (var i = 0; i < arr.length; ++i) {
    f = arr[i];
    f.t += .05;
    f.t = f.t >= Math.PI * 2 ? 0 : f.t;
    f.y += f.sp;
    f.x += Math.sin(f.t * tsc) * (f.sz * .3);
    if (f.y > h + 50) f.y = -10 - Math.random() * mv;
    if (f.x > w + mv) f.x = - mv;
    if (f.x < - mv) f.x = w + mv;
    f.draw();}
    }
    function Flake() {
    this.draw = function() {
    this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
    this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
    this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
    $.moveTo(this.x, this.y);
    $.fillStyle = this.g;
    $.beginPath();
    $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
    $.fill();}
    }
    }
    /*________________________________________*/
    window.addEventListener('resize', function(){
    c.width = w = window.innerWidth;
    c.height = h = window.innerHeight;
    }, false);</canvas>

    habe es jetzt so reingeschrieben geht aber immernochnicht genervt
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    Nex4T ilch.de Design
    Registriert seit
    28.02.2007
    Beitrge
    2.998
    Beitragswertungen
    150 Beitragspunkte
    Schau mal du bindest
    <canvas id='canv'></canvas>

    nach dem Body-Tag ein hast du gemacht ist auch richtig so.

    danach erstellst du im js ordner vom Design die canv.js und fügst folgenden Code dort ein :
    var c = document.getElementById('canv'), 
        $ = c.getContext("2d");
    var w = c.width = window.innerWidth, 
        h = c.height = window.innerHeight;
     
    Snowy();
    function Snowy() {
      var snow, arr = [];
      var num = 600, tsc = 1, sp = 1;
      var sc = 1.3, t = 0, mv = 20, min = 1;
        for (var i = 0; i < num; ++i) {
          snow = new Flake();
          snow.y = Math.random() * (h + 50);
          snow.x = Math.random() * w;
          snow.t = Math.random() * (Math.PI * 2);
          snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
          snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
          snow.sp = snow.sp < min ? min : snow.sp;
          arr.push(snow);
        }
      go();
      function go(){
        window.requestAnimationFrame(go);
          $.clearRect(0, 0, w, h);
          $.fillStyle = 'hsla(242, 95%, 3%, 1)';
          $.fillRect(0, 0, w, h);
          $.fill();
            for (var i = 0; i < arr.length; ++i) {
              f = arr[i];
              f.t += .05;
              f.t = f.t >= Math.PI * 2 ? 0 : f.t;
              f.y += f.sp;
              f.x += Math.sin(f.t * tsc) * (f.sz * .3);
              if (f.y > h + 50) f.y = -10 - Math.random() * mv;
              if (f.x > w + mv) f.x = - mv;
              if (f.x < - mv) f.x = w + mv;
              f.draw();}
     }
     function Flake() {
       this.draw = function() {
          this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
          this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
          this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
          $.moveTo(this.x, this.y);
          $.fillStyle = this.g;
          $.beginPath();
          $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
          $.fill();}
      }
    }
    /*________________________________________*/
    window.addEventListener('resize', function(){
      c.width = w = window.innerWidth;
      c.height = h = window.innerHeight;
    }, false);


    anschließend musst du natürlich auch die JS an dein Design anknüpfen sonst wird dieses ja nicht aufgerufen dies machst du in der index.php oben zwischen dem Head-Tag wo andere JS/CSS eingebunden wird :

    <script src="<?= $this->getLayoutUrl('js/canv.js') ?>"></script>


    Anschließend sollte es schneien in der Box.
    while(!asleep()) sheep++;
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    BleckHall Mitglied
    Registriert seit
    11.11.2014
    Beitrge
    220
    Beitragswertungen
    4 Beitragspunkte
    ZitatZitat geschrieben von Nex4T
    Schau mal du bindest
    <canvas id='canv'></canvas>

    nach dem Body-Tag ein hast du gemacht ist auch richtig so.

    danach erstellst du im js ordner vom Design die canv.js und fügst folgenden Code dort ein :
    var c = document.getElementById('canv'), 
        $ = c.getContext("2d");
    var w = c.width = window.innerWidth, 
        h = c.height = window.innerHeight;
     
    Snowy();
    function Snowy() {
      var snow, arr = [];
      var num = 600, tsc = 1, sp = 1;
      var sc = 1.3, t = 0, mv = 20, min = 1;
        for (var i = 0; i < num; ++i) {
          snow = new Flake();
          snow.y = Math.random() * (h + 50);
          snow.x = Math.random() * w;
          snow.t = Math.random() * (Math.PI * 2);
          snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
          snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
          snow.sp = snow.sp < min ? min : snow.sp;
          arr.push(snow);
        }
      go();
      function go(){
        window.requestAnimationFrame(go);
          $.clearRect(0, 0, w, h);
          $.fillStyle = 'hsla(242, 95%, 3%, 1)';
          $.fillRect(0, 0, w, h);
          $.fill();
            for (var i = 0; i < arr.length; ++i) {
              f = arr[i];
              f.t += .05;
              f.t = f.t >= Math.PI * 2 ? 0 : f.t;
              f.y += f.sp;
              f.x += Math.sin(f.t * tsc) * (f.sz * .3);
              if (f.y > h + 50) f.y = -10 - Math.random() * mv;
              if (f.x > w + mv) f.x = - mv;
              if (f.x < - mv) f.x = w + mv;
              f.draw();}
     }
     function Flake() {
       this.draw = function() {
          this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
          this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
          this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
          $.moveTo(this.x, this.y);
          $.fillStyle = this.g;
          $.beginPath();
          $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
          $.fill();}
      }
    }
    /*________________________________________*/
    window.addEventListener('resize', function(){
      c.width = w = window.innerWidth;
      c.height = h = window.innerHeight;
    }, false);


    anschließend musst du natürlich auch die JS an dein Design anknüpfen sonst wird dieses ja nicht aufgerufen dies machst du in der index.php oben zwischen dem Head-Tag wo andere JS/CSS eingebunden wird :

    <script src="<?= $this->getLayoutUrl('js/canv.js') ?>"></script>


    Anschließend sollte es schneien in der Box.


    funktioniert iwie nicht genervt

    Habs jetzt so drin stehen
    <!DOCTYPE html>
    <html lang="de">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <?=$this->getHeader() ?>
    
        <link href="<?=$this->getLayoutUrl('css/app.css?id=2e211915996888919501') ?>" rel="stylesheet">
        <link href="<?=$this->getLayoutUrl('css/custom.css') ?>" rel="stylesheet">
    
        <?=$this->getCustomCSS() ?>
    
        <script src="<?= $this->getLayoutUrl('js/app.js?id=56a27d1935a8a43a59a2') ?>"></script>
    	<script src="<?= $this->getLayoutUrl('js/canv.js') ?>"></script>
            <?php include ROOT_PATH.'/analyticstracking.php'; ?>
    </head>
    <body>
    <canvas id='canv'></canvas>


    var c = document.getElementById('canv'), 
        $ = c.getContext("2d");
    var w = c.width = window.innerWidth, 
        h = c.height = window.innerHeight;
     
    Snowy();
    function Snowy() {
      var snow, arr = [];
      var num = 600, tsc = 1, sp = 1;
      var sc = 1.3, t = 0, mv = 20, min = 1;
        for (var i = 0; i < num; ++i) {
          snow = new Flake();
          snow.y = Math.random() * (h + 50);
          snow.x = Math.random() * w;
          snow.t = Math.random() * (Math.PI * 2);
          snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
          snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
          snow.sp = snow.sp < min ? min : snow.sp;
          arr.push(snow);
        }
      go();
      function go(){
        window.requestAnimationFrame(go);
          $.clearRect(0, 0, w, h);
          $.fillStyle = 'hsla(242, 95%, 3%, 1)';
          $.fillRect(0, 0, w, h);
          $.fill();
            for (var i = 0; i < arr.length; ++i) {
              f = arr[i];
              f.t += .05;
              f.t = f.t >= Math.PI * 2 ? 0 : f.t;
              f.y += f.sp;
              f.x += Math.sin(f.t * tsc) * (f.sz * .3);
              if (f.y > h + 50) f.y = -10 - Math.random() * mv;
              if (f.x > w + mv) f.x = - mv;
              if (f.x < - mv) f.x = w + mv;
              f.draw();}
     }
     function Flake() {
       this.draw = function() {
          this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
          this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
          this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
          $.moveTo(this.x, this.y);
          $.fillStyle = this.g;
          $.beginPath();
          $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
          $.fill();}
      }
    }
    /*________________________________________*/
    window.addEventListener('resize', function(){
      c.width = w = window.innerWidth;
      c.height = h = window.innerHeight;
    }, false);


    ich versteh nicht was ich falsch mache genervt
    0 Mitglieder finden den Beitrag gut.
  15. #15
    User Pic
    Nex4T ilch.de Design
    Registriert seit
    28.02.2007
    Beitrge
    2.998
    Beitragswertungen
    150 Beitragspunkte
    Ah ok mein Fehler bind das Script mal im Footer ein, quasi bevor sich body schließt, also so :

               <footer>
                    <div align="center"><a href="/">Home</a> <font color="black">|</font> <a href="/index.php/contact/index/index">Kontakt</a> <font color="black">|</font> <a href="/index.php/imprint/index/index">Impressum</a> <font color="black">|</font> <a href="/index.php/privacy/index/index">Datenschutz</a></div>                            
                </footer>
            </div>
        </div>
        <script src="<?= $this->getLayoutUrl('js/canv.js') ?>"></script>
        <?= $this->getFooter() ?>
    </body>
    </html>



    Zuletzt modifiziert von Nex4T am 01.12.2017 - 11:13:36
    while(!asleep()) sheep++;
    0 Mitglieder finden den Beitrag gut.
  16. #16
    User Pic
    BleckHall Mitglied
    Registriert seit
    11.11.2014
    Beitrge
    220
    Beitragswertungen
    4 Beitragspunkte
    ZitatZitat geschrieben von Nex4T
    Ah ok mein Fehler bind das Script mal im Footer ein, quasi bevor sich body schließt, also so :

               <footer>
                    <div align="center"><a href="/">Home</a> <font color="black">|</font> <a href="/index.php/contact/index/index">Kontakt</a> <font color="black">|</font> <a href="/index.php/imprint/index/index">Impressum</a> <font color="black">|</font> <a href="/index.php/privacy/index/index">Datenschutz</a></div>                            
                </footer>
            </div>
        </div>
        <script src="<?= $this->getLayoutUrl('js/canv.js') ?>"></script>
        <?= $this->getFooter() ?>
    </body>
    </html>

    Zuletzt modifiziert von Nex4T am 01.12.2017 - 11:13:36


    geht zwar aber sieht echt komisch aus hätte gedacht das nur schneeflocken über die homepagefliegen und nicht so eine box mit blauem hintergrund entsteht genervt

    galgenboschtrolle-rhm.de/
    0 Mitglieder finden den Beitrag gut.
  17. #17
    User Pic
    Nex4T ilch.de Design
    Registriert seit
    28.02.2007
    Beitrge
    2.998
    Beitragswertungen
    150 Beitragspunkte
    Ok mach folgendes ersetz mal den JS Code durch folgenden :
    var c = document.getElementById('canv'), 
        $ = c.getContext("2d");
    var w = c.width = window.innerWidth, 
        h = c.height = window.innerHeight;
    
    Snowy();
    function Snowy() {
      var snow, arr = [];
      var num = 600, tsc = 1, sp = 1;
      var sc = 1.3, t = 0, mv = 20, min = 1;
        for (var i = 0; i < num; ++i) {
          snow = new Flake();
          snow.y = Math.random() * (h + 50);
          snow.x = Math.random() * w;
          snow.t = Math.random() * (Math.PI * 2);
          snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
          snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
          snow.sp = snow.sp < min ? min : snow.sp;
          arr.push(snow);
        }
      go();
      function go(){
        window.requestAnimationFrame(go);
          $.clearRect(0, 0, w, h);
          $.fillRect(0, 0, w, h);
          $.fill();
            for (var i = 0; i < arr.length; ++i) {
              f = arr[i];
              f.t += .05;
              f.t = f.t >= Math.PI * 2 ? 0 : f.t;
              f.y += f.sp;
              f.x += Math.sin(f.t * tsc) * (f.sz * .3);
              if (f.y > h + 50) f.y = -10 - Math.random() * mv;
              if (f.x > w + mv) f.x = - mv;
              if (f.x < - mv) f.x = w + mv;
              f.draw();}
     }
     function Flake() {
       this.draw = function() {
          this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
          this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
          this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
          $.moveTo(this.x, this.y);
          $.fillStyle = this.g;
          $.beginPath();
          $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
          $.fill();}
      }
    }
    /*________________________________________*/
    window.addEventListener('resize', function(){
      c.width = w = window.innerWidth;
      c.height = h = window.innerHeight;
    }, false);


    Dann in deiner Style css fügst du folgende Class hinzu :

    .schneebox{
        position: absolute;
        z-index: 100;
    }


    und zu guter letzt addest du die class dem canavas in deiner index

    <canvas class="schneebox" id='canv'></canvas>


    So sollte es gehen lachen
    while(!asleep()) sheep++;
    0 Mitglieder finden den Beitrag gut.
  18. #18
    User Pic
    BleckHall Mitglied
    Registriert seit
    11.11.2014
    Beitrge
    220
    Beitragswertungen
    4 Beitragspunkte
    ZitatZitat geschrieben von Nex4T
    Ok mach folgendes ersetz mal den JS Code durch folgenden :
    var c = document.getElementById('canv'), 
        $ = c.getContext("2d");
    var w = c.width = window.innerWidth, 
        h = c.height = window.innerHeight;
    
    Snowy();
    function Snowy() {
      var snow, arr = [];
      var num = 600, tsc = 1, sp = 1;
      var sc = 1.3, t = 0, mv = 20, min = 1;
        for (var i = 0; i < num; ++i) {
          snow = new Flake();
          snow.y = Math.random() * (h + 50);
          snow.x = Math.random() * w;
          snow.t = Math.random() * (Math.PI * 2);
          snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
          snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
          snow.sp = snow.sp < min ? min : snow.sp;
          arr.push(snow);
        }
      go();
      function go(){
        window.requestAnimationFrame(go);
          $.clearRect(0, 0, w, h);
          $.fillRect(0, 0, w, h);
          $.fill();
            for (var i = 0; i < arr.length; ++i) {
              f = arr[i];
              f.t += .05;
              f.t = f.t >= Math.PI * 2 ? 0 : f.t;
              f.y += f.sp;
              f.x += Math.sin(f.t * tsc) * (f.sz * .3);
              if (f.y > h + 50) f.y = -10 - Math.random() * mv;
              if (f.x > w + mv) f.x = - mv;
              if (f.x < - mv) f.x = w + mv;
              f.draw();}
     }
     function Flake() {
       this.draw = function() {
          this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
          this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
          this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
          $.moveTo(this.x, this.y);
          $.fillStyle = this.g;
          $.beginPath();
          $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
          $.fill();}
      }
    }
    /*________________________________________*/
    window.addEventListener('resize', function(){
      c.width = w = window.innerWidth;
      c.height = h = window.innerHeight;
    }, false);


    Dann in deiner Style css fügst du folgende Class hinzu :

    .schneebox{
        position: absolute;
        z-index: 100;
    }


    und zu guter letzt addest du die class dem canavas in deiner index

    <canvas class="schneebox" id='canv'></canvas>


    So sollte es gehen lachen


    Danke dir so sollte es sein.... ABER =D

    Iwie hört es bei der hälfte auf genervt
    0 Mitglieder finden den Beitrag gut.
  19. #19
    User Pic
    Nex4T ilch.de Design
    Registriert seit
    28.02.2007
    Beitrge
    2.998
    Beitragswertungen
    150 Beitragspunkte
    Änder mal den CSS Eintrag in :

    .schneebox{
        position: fixed;
        z-index: 100;
    }
    while(!asleep()) sheep++;
    0 Mitglieder finden den Beitrag gut.
  20. #20
    User Pic
    BleckHall Mitglied
    Registriert seit
    11.11.2014
    Beitrge
    220
    Beitragswertungen
    4 Beitragspunkte
    ZitatZitat geschrieben von Nex4T
    Änder mal den CSS Eintrag in :

    .schneebox{
        position: fixed;
        z-index: 100;
    }


    bist en schatz verliebt danke dir funktioniert wunderbar =D
    0 Mitglieder finden den Beitrag gut.
  21. #21
    User Pic
    BleckHall Mitglied
    Registriert seit
    11.11.2014
    Beitrge
    220
    Beitragswertungen
    4 Beitragspunkte
    muss mich nochmal korrigieren habe das problem das zwar das schneien funktioniert aber man kann die menüs etc. nichtmehr öffnen genervt

    hab vorrübergehen den schnee ausgestellt


    Zuletzt modifiziert von BleckHall am 01.12.2017 - 13:37:48
    0 Mitglieder finden den Beitrag gut.
  22. #22
    User Pic
    Harzflip1 Mitglied
    Registriert seit
    18.03.2017
    Beitrge
    20
    Beitragswertungen
    0 Beitragspunkte
    ZitatZitat geschrieben von Nex4T
    HTML direkt nach dem Body Tag einbinden
    <canvas id='canv'></canvas>



    JS :

    var c = document.getElementById('canv'), 
        $ = c.getContext("2d");
    var w = c.width = window.innerWidth, 
        h = c.height = window.innerHeight;
    
    Snowy();
    function Snowy() {
      var snow, arr = [];
      var num = 600, tsc = 1, sp = 1;
      var sc = 1.3, t = 0, mv = 20, min = 1;
        for (var i = 0; i < num; ++i) {
          snow = new Flake();
          snow.y = Math.random() * (h + 50);
          snow.x = Math.random() * w;
          snow.t = Math.random() * (Math.PI * 2);
          snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
          snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
          snow.sp = snow.sp < min ? min : snow.sp;
          arr.push(snow);
        }
      go();
      function go(){
        window.requestAnimationFrame(go);
          $.clearRect(0, 0, w, h);
          $.fillStyle = 'hsla(242, 95%, 3%, 1)';
          $.fillRect(0, 0, w, h);
          $.fill();
            for (var i = 0; i < arr.length; ++i) {
              f = arr[i];
              f.t += .05;
              f.t = f.t >= Math.PI * 2 ? 0 : f.t;
              f.y += f.sp;
              f.x += Math.sin(f.t * tsc) * (f.sz * .3);
              if (f.y > h + 50) f.y = -10 - Math.random() * mv;
              if (f.x > w + mv) f.x = - mv;
              if (f.x < - mv) f.x = w + mv;
              f.draw();}
     }
     function Flake() {
       this.draw = function() {
          this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
          this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
          this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
          $.moveTo(this.x, this.y);
          $.fillStyle = this.g;
          $.beginPath();
          $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
          $.fill();}
      }
    }
    /*________________________________________*/
    window.addEventListener('resize', function(){
      c.width = w = window.innerWidth;
      c.height = h = window.innerHeight;
    }, false);

    Im JS Code Function Snowy da steht var num = 600, tsc = 1, sp = 1; An der 600 kannst du rumspielen für mehr oder weniger.
    Für Js bitte eine exteren Datei anlegen und Einbinden, muss nicht ist aber Übersichtlicher.


    Zuletzt modifiziert von Nex4T am 30.11.2017 - 13:32:42


    Danke für die Info aber ich muss ehrlich sagen das ich zu blöd dafür bin lcheln

    Habe es anderst gelöst.

    [url]
    www.schloebe.de/scripts/schnee-script/[/url]

    Keine Ahnung ob ich links posten darf aber ich mache es jetzt mal ansonsten sagt mir bescheid und ich lösche den Link.

    Dort steht auch recht gut beschrieben warum es nur zur hälfte schneit zunge

    PS. Ich hätte noch ein XMAS-Addon ©2011 by invention was für DZCP war. Kann (Falls man es überhaupt darf) Es für Ilch umschreiben? Bin mir auch nicht mehr sicher ob ich mir das damals gekauft habe oder ob es für free war. Da ist jedenfalls alles drin ( Schnee, Adventskranz, ein Schneebalspiel, wunschbox, wunschliste, horoskop, Kalender usw).


    Zuletzt modifiziert von Harzflip1 am 02.12.2017 - 04:49:16
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurck zu Allgemein

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten