Weihnachten

Gehe zu Seite:

Geschlossen

Do. 30.11.2017 10:00 Uhr #1

Harzflip1 Mitglied

Registriert seit
18.03.2017

Beiträge
20

Beitragswertungen

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

verwendete ilch Version: 2.x

betroffene Homepage: externer Link
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 30.11.2017 10:02 Uhr #2

Nex4T Moderator

Registriert seit
28.02.2007

Beiträge
3.414

Beitragswertungen

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

while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 30.11.2017 11:19 Uhr #3

Harzflip1 Mitglied

Registriert seit
18.03.2017

Beiträge
20

Beitragswertungen

Danke für die Info aber ich brauch es für Ilch 2

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
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 30.11.2017 13:26 Uhr #4

Phoenix1303 Mitglied

Registriert seit
04.06.2011

Beiträge
137

Beitragswertungen

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.
- zitieren

Do. 30.11.2017 13:30 Uhr #5

Nex4T Moderator

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++;
www.movely.biz
www.webplant.eu

1 Mitglieder finden den Beitrag gut.

zitieren

Fr. 01.12.2017 09:04 Uhr #6

BleckHall Mitglied

Zitat 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);

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

gaming-evolution.eu/

0 Mitglieder finden den Beitrag gut.

zitieren

Fr. 01.12.2017 09:24 Uhr #7

Nex4T Moderator

Registriert seit
28.02.2007

Beiträge
3.414

Beitragswertungen

wo bindest du die js datei ein?

while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu
0 Mitglieder finden den Beitrag gut.
- zitieren
Fr. 01.12.2017 09:56 Uhr #8

BleckHall Mitglied

Registriert seit
11.11.2014

Beiträge
244

Beitragswertungen

in der index.php vom design

gaming-evolution.eu/
0 Mitglieder finden den Beitrag gut.
- zitieren
Fr. 01.12.2017 10:05 Uhr #9

Nex4T Moderator

Registriert seit
28.02.2007

Beiträge
3.414

Beitragswertungen

Richtig so sollte es sein, deine index.php zeigt aber keinen Aufruf der canv.js, ich sehe diese auch nicht eingebunden.

while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu
0 Mitglieder finden den Beitrag gut.
- zitieren
Fr. 01.12.2017 10:12 Uhr #10

BleckHall Mitglied

Registriert seit
11.11.2014

Beiträge
244

Beitragswertungen

Zitat 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

gaming-evolution.eu/
0 Mitglieder finden den Beitrag gut.
- zitieren
Fr. 01.12.2017 10:25 Uhr #11

Nex4T Moderator

Registriert seit
28.02.2007

Beiträge
3.414

Beitragswertungen

Du hast nur den HTML Tag eingebunden aber nicht das script

while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu
0 Mitglieder finden den Beitrag gut.
- zitieren
Fr. 01.12.2017 10:35 Uhr #12

BleckHall Mitglied

Registriert seit
11.11.2014

Beiträge
244

Beitragswertungen

Zitat 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

gaming-evolution.eu/
0 Mitglieder finden den Beitrag gut.
- zitieren

Fr. 01.12.2017 10:39 Uhr #13

Nex4T Moderator

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++;
www.movely.biz
www.webplant.eu

0 Mitglieder finden den Beitrag gut.

zitieren

Fr. 01.12.2017 10:44 Uhr #14

BleckHall Mitglied

Zitat 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);

<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

gaming-evolution.eu/

0 Mitglieder finden den Beitrag gut.

zitieren

Fr. 01.12.2017 11:08 Uhr #15

Nex4T Moderator

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++;
www.movely.biz
www.webplant.eu

0 Mitglieder finden den Beitrag gut.

zitieren

Fr. 01.12.2017 11:36 Uhr #16

BleckHall Mitglied

Zitat 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/

gaming-evolution.eu/

0 Mitglieder finden den Beitrag gut.

zitieren

Fr. 01.12.2017 11:44 Uhr #17

Nex4T Moderator

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++;
www.movely.biz
www.webplant.eu

0 Mitglieder finden den Beitrag gut.

zitieren

Fr. 01.12.2017 12:16 Uhr #18

BleckHall Mitglied

Zitat 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

gaming-evolution.eu/

0 Mitglieder finden den Beitrag gut.

zitieren

Fr. 01.12.2017 12:49 Uhr #19

Nex4T Moderator

Registriert seit
28.02.2007

Beiträge
3.414

Beitragswertungen
Änder mal den CSS Eintrag in :
```
.schneebox{
    position: fixed;
    z-index: 100;
}
```
while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu
0 Mitglieder finden den Beitrag gut.
- zitieren
Fr. 01.12.2017 13:24 Uhr #20

BleckHall Mitglied

Registriert seit
11.11.2014

Beiträge
244

Beitragswertungen
Zitat geschrieben von Nex4T
Änder mal den CSS Eintrag in :

.schneebox{ position: fixed; z-index: 100; }
bist en schatz danke dir funktioniert wunderbar =D
gaming-evolution.eu/
0 Mitglieder finden den Beitrag gut.
- zitieren
Fr. 01.12.2017 13:34 Uhr #21

BleckHall Mitglied

Registriert seit
11.11.2014

Beiträge
244

Beitragswertungen

muss mich nochmal korrigieren habe das problem das zwar das schneien funktioniert aber man kann die menüs etc. nichtmehr öffnen

hab vorrübergehen den schnee ausgestellt

Zuletzt modifiziert von BleckHall am 01.12.2017 - 13:37:48

gaming-evolution.eu/
0 Mitglieder finden den Beitrag gut.
- zitieren

Sa. 02.12.2017 03:37 Uhr #22

Harzflip1 Mitglied

Zitat 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);

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

Habe es anderst gelöst.

[url]
externer Link[/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.

zitieren

Geschlossen

	Zurück zu Allgemein

Beitrag zur Merkliste hinzufügen

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