Foggy effekt

Hallo,

ich habe schon etwas rumprobiert und bin aber immer noch nicht ganz schlau aus dem code geworden.

Ich habe hier: https://nbartlomiej.github.io/foggy/ folgendes gefunden:

Sensible defaults
 $('.your-selector').foggy();  
Customization
 $('.your-selector').foggy({  
   blurRadius: 2,          // In pixels.
   opacity: 0.8,           // Falls back to a filter for IE.
   cssFilterSupport: true  // Use "-webkit-filter" where available. 
 }); 
Disabling
 $('.your-selector').foggy(false);  

Allerdings kapiere ich nicht ganz, wie ich das jetzt auf meine website überhaupt ANWENDEN kann? Also ich habe im moment ein transparentes Rechteck über meinen text gelegt mit einer bestimmten ID.
Wie kann ich jetzt diesen Code auf meinen Text oder auf dieses Rechteck anwenden, sodass es foggy wird?

Danke schonmal

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 325963

Url: https://administrator.de/forum/foggy-effekt-325963.html

Ausgedruckt am: 10.04.2025 um 11:04 Uhr

10 Kommentare

Neuester Kommentar

Hallo,

naja, du lädst die library auf deinen Webspace und ersetzt .your-selector mit der ID deines Rechtecks oder Textes (je nachdem auf welches Objekt du es anwenden möchtest).

Gruß

Moin,

das ganze ist eine jQuery-Erweiterung und damit behandelst du deine Elemente wie mit jQuery sonst auch, nur dass du eben jetzt noch eine mögliche Funktion mehr hast. Nämlich `foggy()`.

Hier muss ich meinen Vorredner @michi1983 korrigieren, ".your-selector" ist die Klasse deines DOM Elements, nicht die ID, die ID wäre "#your-selector", aber ansonsten hat er recht. Einfach die library auf deinen Webspace laden oder eben aus einem CDN laden und das ganze eben nach jQuery und schon kann es losgehen.

Für die Anwendung von jQuery siehe w3schools jQuery und ähnliches.

Gruß
Chris

Ich sagte auch er soll .your-selector mit seiner ID ersetzen weil der TO von ID gesprochen hat.
Dem jquery ist ja egal ob ich es auf eine Klasse oder ID anwende

Gruß

Danke für die lösungsvorschläge!

michi1983, du meinst: "lädst die library auf deinen Webspace" - ich habe leider nur einen externen webserver und kann nichts direkt auf denselben Pfad hochladen, wo sich meine HTML befindet.
Geht das dann trotzdem irgendwie?

Und was genau meinst du mit "library" überhaupt? Ist dieser code hier ausreichend?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  

Ich habe hier etwas rumprobiert und diesen Code zusammengebastelt:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
<script>
Sensible defaults
 $("p").foggy();  
Customization
 $("p").foggy({  
   blurRadius: 2,          // In pixels.
   opacity: 0.8,           // Falls back to a filter for IE.
   cssFilterSupport: true  // Use "-webkit-filter" where available.  
 }); 
Disabling
 $("p").foggy(false);  
</script>
<script>
$(document).ready(function(){
    $("p").click(function(){  
        $(this).foggy();
    });
});
</script>

</head>
<body>

<p>If you click on me, I will become foggy.</p>
<p>Click me to become foggy!</p>
<p>Click me too!</p>

</body>
</html>

allerdings passiert nichts mit dem text, wenn ich ihn anklicke und er wird nicht foggy... Was mache ich falsch?

Moin,

du brauchst neben dem reinen jquery natürlich die `.foggy` erweiterung. Das wird dir auf der webseite auf der du es gefunden hast, aber auch erklärt.

Deswegen musst du nach dem Laden von jQuery noch `https://raw.github.com/nbartlomiej/foggy/foggy-1.1.1/jquery.foggy.min.js` nachladen. Dadurch wird das jQuery Objekt um die Funktionen, die fpr den Effekt notwendig sind, erweitert.

Gruß
Chris

Also so?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
<script src="https://raw.githubusercontent.com/nbartlomiej/foggy/foggy-1.1.1/jquery.foggy.min.js"></script>  
<script>
Sensible defaults
 $("p").foggy();  
Customization
 $("p").foggy({  
   blurRadius: 2,          // In pixels.
   opacity: 0.8,           // Falls back to a filter for IE.
   cssFilterSupport: true  // Use "-webkit-filter" where available.  
 }); 
Disabling
 $("p").foggy(false);  
</script>
<script>
$(document).ready(function(){
    $("p").click(function(){  
        $(this).foggy();
    });
});
</script>

</head>
<body>

<p>If you click on me, I will become foggy.</p>
<p>Click me to become foggy!</p>
<p>Click me too!</p>

</body>
</html>

Es funktioniert aber immer noch nicht

Zitat von @Peter32:
Es funktioniert aber immer noch nicht

Bei mir funktionierts ohne Probleme.

Lass mal das Sensible defaults sowie das Disabling weg wie in meinem Link.

Komisch, weder im Tryit Editor mit diesem code funktioniert es:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
<script>
 $("p").foggy(false);  
</script>
<script>
$(document).ready(function(){
    $("p").click(function(){  
        $(this).foggy();
    });
});
</script>

</head>
<body>

<p>If you click on me, I will become foggy.</p>
<p>Click me to become foggy!</p>
<p>Click me too!</p>

</body>
</html>

noch in meinem dreamweaver in der live-ansicht noch als gespeicherte index.html

Bin ich zu blöd oder was mache ich falsch??

Wahrscheinlich wird im tryit Editor das jquery framework nicht geladen.
Bei JS Fiddle klappts ja ohne Probleme.

Gruß

Okay...
und das script vom jquery.foggy.min.js muss ich in mein Head-Teil einbauen mit script tag oder?
also so oder?

<head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>   
<script>
// Foggy, v1.1.1
//
// Description: jQuery plugin for blurring page elements
// Homepage:    http://nbartlomiej.github.com/foggy
// Author:      nbartlomiej@gmail.com

(function( $ ){

  $.fn.foggy = function( options ) {
    var defaultOptions = {
      opacity:      0.8,
      blurRadius:   2,
      quality:      16,
      cssFilterSupport: true
    };

    var noBlurOptions = {
      opacity: 1,
      blurRadius: 0
    };

    var settings;
    if (options == false) {
       settings = $.extend( defaultOptions, noBlurOptions );
    } else {
       settings = $.extend( defaultOptions, options);
    }


    var BlurPass = function(content, position, offset, opacity){
      this.content = content;
      this.position = position;
      this.offset = offset;
      this.opacity = opacity;
    };

    BlurPass.prototype.render = function(target){
      $('<div/>', {  
        html: this.content, 'class': 'foggy-pass-'+this.position  
      }).css({
        position: this.position,
        opacity: this.opacity,
        top: this.offset,
        left: this.offset[1]
      }).appendTo(target);
    };

    var Circle = function(radius){
      this.radius = radius;
    };

    Circle.prototype.includes = function(x,y){
      if (Math.pow(x,2) + Math.pow(y,2) <= Math.pow(this.radius, 2)){
        return true;
      } else {
        return false;
      }
    };

    Circle.prototype.points = function(){
      var results = ;
      for (var x = -this.radius; x<=this.radius; x++){
        for (var y = -this.radius; y<=this.radius; y++){
          if (this.includes(x,y)){
            results.push([x,y]);
          }
        }
      }
      return results;
    };

    var ManualFog = function(element, settings){
      this.element = element;
      this.settings = settings;
    };

    ManualFog.prototype.calculateOffsets = function(radius, quality){
      var all_offsets = $.grep(
        new Circle(radius).points(),
        function(element){ return (element != 0) || (element[1] != 0) }
      );
      var offsets;
      if (all_offsets.length <= quality){
        offsets = all_offsets;
      } else {
        var overhead = all_offsets.length - quality;
        var targets = ;
        for (var i = 0; i < overhead; i++){
          targets.push(Math.round(i * (all_offsets.length / overhead)));
        }
        offsets = $.grep( all_offsets, function(element, index){
          if ($.inArray(index, targets) >= 0){
            return false;
          } else {
            return true;
          }
        });
      }
      return offsets;
    };

    ManualFog.prototype.getContent = function(){
      var candidate = $(this.element).find('.foggy-pass-relative');  
      if (candidate){
        return $(candidate).html();
      } else {
        return $(this.element).html();
      }
    };

    ManualFog.prototype.render = function(){
      var content = this.getContent();
      $(this.element).empty();
      var wrapper = $('<div/>').css({ position: 'relative' });  
      var offsets = this.calculateOffsets(
        this.settings.blurRadius*2, this.settings.quality
      );
      var opacity = (this.settings.opacity * 1.2) / (offsets.length + 1);
      new BlurPass(content, 'relative', [0,0], opacity).render(wrapper);  
      $(offsets).each(function(index, offset){
        new BlurPass(content, 'absolute', offset, opacity).render(wrapper);  
      });
      wrapper.appendTo(this.element);
    };

    var FilterFog = function(element, settings){
      this.element = element;
      this.settings = settings;
    }

    FilterFog.prototype.render = function(){
      var opacityPercent = (''+settings.opacity).slice(2,4);  
      var filterBlurRadius = this.settings.blurRadius;
      $(this.element).css({
        '-webkit-filter': 'blur('+filterBlurRadius+'px)',  
        opacity: settings.opacity
      });
    }

    return this.each(function(index, element) {
      if (settings.cssFilterSupport && '-webkit-filter' in document.body.style){  
        new FilterFog(element, settings).render();
      } else {
        new ManualFog(element, settings).render();
      }
    });
  };

})( jQuery );

/// eigentliche Anwendung des Effekts ///
 $('p').foggy({  
   blurRadius: 3,          // In pixels.
   opacity: 0.8,           // Falls back to a filter for IE.
   cssFilterSupport: true  // Use "-webkit-filter" where available.  
 }); 
  </script>
</head>