Pagepeel

Pagepeel

Hier platzieren wir oben am rechten Bildschirmrand ein Eselsohr welches verlinkt werden kann.
Weil dieses in der mobilen Ansicht stören würde blenden wir es ab einer bestimmten Bildschirmbreite aus.

So bindet ihr das ein

Zuerst solltet ihr 2 Grafiken auf euern Server laden. Ganz unten auf der Seite findet ihr die 2 verwendeten Grafiken. Diese könnt ihr natürlich zum testen verwenden. Wie ihr die Grafiken auf euern Server bekommt erfahrt ihr HIER.

Script

DieseScript per Widget > Quelltext am Ende der Seite einfügen und anpassen. Ganz unten im Code gebt ihr die URL eurer Grafiken den sowie die Verlinkung an

<script>  
(function($) {
  $.Peelback = function(el, settings) {
    
    var base = this;
    base.$el = $(el);
    base.el = el;
    base.$el.data("Peelback", base);
     
    base.init = function() {
      
      var peelHTML, peelImage, peelMask, smallSize, bigSize, smallMaskSize, bigMaskSize;
      
      base.settings = $.extend({},$.Peelback.defaultSettings, settings);      
                
      if (typeof(base.settings.adImage) !== 'string' || base.settings.adImage === '') {
        if ( base.settings.debug === true) {
          console.log('Ad image missing');
        }
        return;
      }
                
      if (typeof(base.settings.peelImage) !== 'string' || base.settings.peelImage === '') {
        if ( base.settings.debug === true) {
          console.log('Peel effect image missing');              
        }
        return;
      }
                
      if (typeof(base.settings.clickURL) !== 'string' || base.settings.clickURL === '') {
        if ( base.settings.debug === true) {
          console.log('Click URL missing');              
        }
        return;
      }
      
      smallSize = base.settings.smallSize + 'px';
      bigSize = base.settings.bigSize + 'px';
      smallMaskSize = (base.settings.smallSize - 3) + 'px';
      bigMaskSize = Math.floor((base.settings.bigSize * 0.96)) + 'px';
      
      peelHTML = $('<div id="peelback"><a href="' + base.settings.clickURL + '" target="_blank"><img src="' + base.settings.peelImage +'" alt="" border="0" /></a><div></div></div>');
      peelImage = peelHTML.find('img');
      peelMask = peelHTML.find('div');
          
      $(peelImage).css({
        'width': '0',
        'height': '0',
        'z-index': '9999',
        'position': 'absolute',
        'right': '0',
        'top': '0',
        '-ms-interpolation-mode': 'bicubic'
      });
    
      $(peelMask).css({
        'width': '0',
        'height': '0',
        'z-index': '9998',
        'overflow': 'hidden',
        'position': 'absolute',
        'right': '0',
        'top': '0',
        'background': 'url(' + base.settings.adImage + ') no-repeat right top'
      });
      
      base.$el.prepend(peelHTML);
           
      if (base.settings.autoAnimate === false) {
        $(peelImage).css({ 'width' : smallSize, 'height' : smallSize });
        $(peelMask).css({ 'width' : smallMaskSize, 'height' : smallMaskSize });
      } else {
        $(peelImage).delay(500).animate({
          width: smallSize, 
          height: smallSize
        }, 500);
          
        $(peelMask).delay(500).animate({
          width: smallMaskSize, 
          height: smallMaskSize
        }, 500); 
      }      
      
      peelHTML.hover(
        
        function() {      
          $(peelImage).stop().animate({
            width: bigSize, 
            height: bigSize
          }, 500);
          
          $(peelMask).stop().animate({
            width: bigMaskSize, 
            height: bigMaskSize
          }, 500);
            
          if (base.settings.gaTrack === true) {    
            if (typeof(_gaq) != 'undefined') {
              _gaq.push(['_trackEvent', 'Ad_Interaction', 'Peelback', base.settings.gaLabel]);
            } else {
              if (base.settings.debug === true) {
                console.log('Google Analytics _gaq object undefined');
              }
            }  
         }   
        },
        
        function() {
          $(peelImage).stop().animate({
            width: smallSize,
            height: smallSize
          }, 400);
          
          $(peelMask).stop().animate({
            width: smallMaskSize,
            height: smallMaskSize
          }, 400);
        }
      
      );
          
    };
        
    base.init();
  };
    
  $.Peelback.defaultSettings = {
    adImage     : null,
    peelImage   : null,
    clickURL    : null,
    smallSize   : 110,
    bigSize     : 510,
    gaTrack     : false,
    gaLabel     : 'default',
    autoAnimate : true,
    debug       : false
  };
  
  $.fn.peelback = function(settings) {
    return this.each(function() {
      (new $.Peelback(this, settings));
    });
  };
    
})(jQuery);
  </script>  
  <script>
    $(function(){
      $('body').peelback({
        adImage  : 'https://www.zella.de/code/eselsohr/ohr5.jpg',
        peelImage  : 'https://www.zella.de/code/eselsohr/esel.png',
        clickURL : 'https://www.zella.de/',
        gaTrack  : true,
        gaLabel  : '#1 Stegosaurus',
        autoAnimate: true
      });
    });
  </script>

Quellcode markieren & kopieren

CSS-Code

Hier gebt ihr an ab welcher Bildschirmbreite ausgeblendet wird. Diesen Code per Einstellungen > CSS einfügen und anpassen.

Quellcode markieren & kopieren

Diese Grafiken wurden verwendet. Ihr könnt diese gern zum testen benutzen.

script

Startseite Datenschutz Impressum

© Zeta Producer V15 / Mario Groß

Alle hier aufgezeigten Codeschnipsel wurden mit dem Layout "Stripe Responsive" und in diesem Projekt getestet.

Ob diese in Euerem Projekt funktionieren müsst ihr testen.