Schneeflocken schneien im Randshop

Alle Fragen und Probleme zur aktuellen Randshop Version 2.3 können hier gepostet werden.

Moderatoren: Magnus, mmaass, ablass

Schneeflocken schneien im Randshop

Beitragvon Marno » Sa 2. Jan 2016, 14:44

Wer es für seine BEsucher etwas winterlicher auf seiner Shopseite haben möchte, hier eine einfache Lösung.
Anzuschauen bei mir: https//:www.smokestop-berlin.de 2,3 Sekunden warten, dann rieselt leise der Schnee :D

Den folgenden Code hier komplett kopieren und in eine Textdatei rein.
Diese dann umbenennen als "snowflakes.js".
Achtet darauf, das die Dateieindeung auch auf *.js endet.
Bei Windowssystemen, wo in den Dateiansichtoptionen das Häckchen gesetzt ist" Dateiendung bei bekannten Typen ausblenden"
Ändert sich die Endung nicht, sondern WIndows macht dann snowflakes.js.txt draus.
Also aufpassen!

Code: Alles auswählen

var snowflakes = {

   ///////////////////////////// configuration ////////////////////////////
   
   // amout of flakes
   _amount: 50,
   // random colors
   _color: ['#AAAACC', '#DDDDFF', '#CCCCDD', '#F3F3F3', '#F0FFFF'],
   // random fonts
   _type: ['Arial Black', 'Arial Narrow', 'Times', 'Comic Sans MS'],
   // char used for flake
   _flakeChar: '*',
   // speed of flakes
   _speed: .2,
   // minimum flake font size
   _minSize: 6,
   // maximum flake font size
   _maxSize: 22,
   // horizontal drift
   _drift: 15,
   // zIndex of flakes
   _zIndex: 20000,

   
   
   ///////////////////////////// private vars /////////////////////////////
   
   _flakes: [],
   _bodyWidth: 0,
   _bodyHeight: 0,
   _range: null,
   _count: 0,
   _timeout: 20,
   _lastInterval: 0,
   _eventHandlerResize: window.onresize,
   _eventHandlerLoad: window.onload,

   

   ////////////////////////////// functions ///////////////////////////////

   // start snow
   start: function()
   {
      if (this._eventHandlerLoad != null) this._eventHandlerLoad();
      
      // calculate range
      this._range = this._maxSize - this._minSize;

      // init window size
      this._windowSize();

      // add new flakes
      while (this._amount > this._flakes.length)
         this._createFlake(this._flakes.length);

      // start to move snow
      this._lastInterval = this._time();
      window.setInterval(function() { snowflakes._move(); }, this._timeout);
   },
   
   
   // get current time
   _time: function()
   {
      return +new Date();
   },
   

   // return a random number bewtween 0 and range
   _random: function(range)
   {
      return Math.floor(Math.random() * range);
   },
   
   
   // creates a new snowflake
   _createFlake: function(i)
   {
      // select body tag
      var insertBody = document.getElementsByTagName('body')[0];

      // create span child for flake
      var f = document.createElement('div');
      f.id                 = 'flake' + i;
      f.style.position     = 'absolute';
      f.style.left         = '0px';
      f.style.top          = '-' + this._maxSize + 'px';
      f.style.color        = this._color[this._random(this._color.length - 1)];
      f.style.family       = this._type[this._random(this._type.length - 1)];
      f.style.fontSize     = (this._random(this._range) + this._minSize) + 'px';
      f.style.zIndex       = this._zIndex;
      f.innerHTML          = this._flakeChar;
      insertBody.appendChild(f);

      // create array element
      this._flakes[i] = {
         x: this._random(this._bodyWidth - this._drift - this._maxSize - 3) + this._drift + 1,
         y: -this._maxSize - this._random(this._bodyHeight),
         size: this._random(this._range) + this._minSize,
         count: this._random(10000)
      };
   },
   

   // restart an existing snow flake
   _restartFlake: function(i)
   {
      this._flakes[i] = {
         x: this._random(this._bodyWidth - this._drift - this._maxSize - 3) + this._drift + 1,
         y: -this._maxSize,
         size: this._random(this._range) + this._minSize,
         count: this._random(10000)
      };
   },

   
   // move existing flakes
   _move: function()
   {
      // calculate movement factor
      var dif = this._time() - this._lastInterval;
      this._lastInterval = this._time();
      var f = dif * this._speed;
      
      this._count += f / 80;
      
      for (var i = 0; i < this._flakes.length; i++)
      {
         var flake = this._flakes[i];
         flake.y += f * this._speed * this._maxSize / flake.size;
         
         // restart existing flake
         if (flake.y + flake.size >= this._bodyHeight)
         {
            this._restartFlake(i);
            continue;
         }
         
         var flakeDiv = document.getElementById('flake' + i);
         flakeDiv.style.left = Math.floor(flake.x + Math.sin(flake.count + this._count) * this._drift) + 'px';
         flakeDiv.style.top  = Math.floor(flake.y) + 'px';
      }
   },
   

   // calculate new positions for all flakes
   _windowSize: function()
   {
      // save old width
      var oldWidth = this._bodyWidth;

      // get new width and height
      this._bodyWidth = this._getWindowWidth() - this._maxSize;
      this._bodyHeight = this._getWindowHeight() - this._maxSize;
      
      // calculate correction ratio
      var ratio = this._bodyWidth / oldWidth;
         
      // for all flakes
      for (var i = 0; i < this._flakes.length; i++)
      {
         var flake = this._flakes[i];

         // do width correction
         flake.x *= ratio;
         
         // restart existing flake
         if ((flake.y + flake.size) >= this._bodyHeight)
            this._restartFlake(i);
      }
   },

   
   // get window width
   _getWindowWidth: function()
   {
      var w = Math.max(self.innerWidth || 0, window.innerWidth || 0);
      
      if (document.documentElement)
         w = Math.max(w, document.documentElement.clientWidth || 0);
      if (document.body)
      {
         w = Math.max(w, document.body.clientWidth || 0);
         w = Math.max(w, document.body.scrollWidth || 0);
         w = Math.max(w, document.body.offsetWidth || 0);
      }
      
      return w;
   },

   
   // get window height
   _getWindowHeight: function()
   {
      var h = Math.max(self.innerHeight || 0, window.innerHeight || 0);
      
      if (document.documentElement)
         h = Math.max(h, document.documentElement.clientHeight || 0);
      if (document.body)
      {
         h = Math.max(h, document.body.clientHeight || 0);
         h = Math.max(h, document.body.scrollHeight || 0);
         h = Math.max(h, document.body.offsetHeight || 0);
      }
      
      return h;
   },
   

   // handle resize event
   resize: function()
   {
      if (this._eventHandlerResize != null)
         this._eventHandlerResize();
      this._windowSize();
   }

};


// register window resize event
window.onresize = function() { snowflakes.resize(); }
window.onload = function() { snowflakes.start(); }


Damit die Flocken überall rieseln im Shop, nimmt ihr nun eine Infobox, die überall im Shop zu sehen ist.
Dort kopiert ihr nun folgenden HTML Code rein. Achtet beim reinkopieren, das auch HTML Editier Modus an ist und nicht nur TXT.
Dazu oben lionks auf Quellcoe klicken, dann seit ihr im HTML Modus

Folgenden Code reinkopieren und speichern:

Code: Alles auswählen
<script type="text/javascript" src="snowflakes.js"></script>


"Ich habe die Codezeile in meinen Zahklungsmöglichkeitenbox" drin, die immer angezeigt wird, egal wo der Kunde sich aufhält.

Möchte man nur auf der Startseite den Code, dann eine Box wählen, die nur auf der Startseite angezeigt wird oder den code einfach in ein HTMl Element unterbringen, das nur auf der Startseite angezeigt wird.

Nun noch speichern, raus aus dem Adminmenü. F5 drücken und sich freuen :D
Marno
 
Beiträge: 188
Registriert: Di 21. Aug 2012, 12:47
Wohnort: Berlin

Re: Schneeflocken schneien im Randshop

Beitragvon Marno » Sa 2. Jan 2016, 14:48

Ach so, vergesen. Gibt ja kein Editmodus für seine Beiträge hier:

Die "snowflakes.js" muss natürlich via FTP in das Shoprootverzeichniss geladen werden.
Sie kann natürlich auch überall wo anders hochgelaen werden, dann muss man aber in dem "<script type="text/javascript" src="snowflakes.js"></script>"
der entsprechende Pfad angepasst werden.
Marno
 
Beiträge: 188
Registriert: Di 21. Aug 2012, 12:47
Wohnort: Berlin


Zurück zu Allgemeines / Installation / Hilfe

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 13 Gäste