Tutorial - Wie blendet man ein Bild langsam ein

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie blendet man ein Bild langsam ein

14Jun2018

Ein Bild wird langsam eingeblendet


Zuerst einmal etwas grundsätzliches zu der JavaScript (objektorientierte Programmiersprache)-Klassenbibliothek "jQuery"

Die JavaScript (objektorientierte Programmiersprache)-Klassenbibliothek "jQuery" hat sich mittlerweile zu einem Standard im Internet entwickelt. Mit relativ wenig Aufwand lassen sich Funktionalitäten verbessern und anspruchsvolle animierte Effekte realisieren. Als erstes wird die jQuery-Bibliothek in unseren Seiten eingebunden:

<script type="text/javascript" src="jQuery.js"></script>

Jetzt müssen noch die einzelnen Funktionen mit separaten JavaScripts (objektorientierte Programmiersprache) geschrieben werden. Das Programmieren läuft dabei meistens wie folgt ab.

  • Zuerst greifen wir auf eine bestimmte Funktionen von JQuery mit dem "$"-Attribut, zum Beispiel: $(document).ready(function(), zu.
  • Dann wird bei Bedarf beschrieben wie wir auf das Objekt oder Element zugreifen, zum Beispiel mit Betätigen der Maus: $("a[href*=#]").click(function().
  • Zum Schluß wird angegeben welches Element ihr Verhalten ändern soll, zum Beispiel nach oben bewegen: $("html,body").animate({scrollTop: targetOffset}, 1000)

Mit dem folgenden Abschnitt haben wir den umgesetzten Effekt näher beschrieben.


Veraltet!

Mit der folgenden Funktion wollen wir ein Bild langsam aufblenden lassen.

Dafür rufen wir als erstes die Funktion von JQuery mit: $(document).ready(function() auf. Und damit nicht alle Bilder auf unserer Website langsam aufgeblendet werden, müssen wir die Klasse des Monatsbildes mit $(".monatsbild") ansprechen.

Zuerst wird angegeben, dass das Bild nicht angezeigt wird und mit der nächsten Zeile wird der Effekt des Einblendens innerhalb einer Zeit angegeben.

$(document).ready(function() {
    $(".monatsbild img").css("display","none");
    $(".monatsbild img").fadeIn(5000)
} );

Neuere Umsetzung für ein langsames Aufblenden eines Bildes!

Wir haben uns hierbei von der aufwendigen JQuery-Bibliothek verabschiedet und das langsame Einblenden mit einem kleinen JavaScript (objektorientierte Programmiersprache) realisiert.

Das Foto wird zuerst ganz normal in HTML (HyperText Markup Language) mit der id-Klasse: "bild" eingebettet.

<img id="bild" src="/Link/bilder/klamonfra_banner.jpg"
    alt="Unser Banner" width="468" height="60">

Das Bild setzen wir aber nun mit JavaScript (objektorientierte Programmiersprache), und nicht mit CSS (Cascading Style Sheet), auf "nicht sichtbar". Das hat den Vorteil, dass das Bild bei ausgeschaltetem JavaScript (objektorientierte Programmiersprache) sichtbar ist!

document.write (
    "<tyle type='text/css'> #bild {visibility: hidden} </style>"
  );

Nachdem die ganze Webseite geladen ist, rufen wir die Funktion "initBild" auf, in der die Deckkraft des Bildes als erstes auf "0" eingestellt wird.

Mit der Funktion "fadeIn" wird das Bild langsam wieder sichtbar, in dem wir in einer Schleife die Sichtbarkeit/Deckkraft um 10% erhöhen bis wir 100% erreicht haben.

Und mit der Funktion "setOpacity" sorgen wir für eine Umsetzung in den verschiedenen Browsern.

function initBild() {
    bildId = 'bild';
    bil1 = document.getElementById(bildId);
    setOpacity(bil1, 0);
    bil1.style.visibility = "visible";
    fadeIn(bildId,0);
  }

function fadeIn(bildId,opacity) {
    if (document.getElementById) {
      bil2 = document.getElementById(bildId);
      if (opacity <= 100) {
        setOpacity(bil2, opacity);
        opacity += 1;
        window.setTimeout("fadeIn('"+bildId+"',"+opacity+")", 100);
      }
    }
  }

function setOpacity(bil2, opacity {
    opacity = (opacity == 100)?99.999:opacity;
    
    // für IE
    bil2.style.filter = "alpha(opacity:"+opacity+")";
    
    // für ältere Versionen Safari, Konqueror
    bil2.style.KHTMLOpacity = opacity/100;
    
    // für ältere Firefox
    bil2.style.MozOpacity = opacity/100;
    
    // für neuere Browser, CSS3
    bil2.style.opacity = opacity/100;
}

window.onload = function() { initBild() }

Die Zugänglichkeit bei dieser Umsetzung ist in allen Fällen gegeben. Sowohl bei ausgeschaltetem JavaScript (objektorientierte Programmiersprache) als auch bei ausgeschaltetem CSS (Cascading Style Sheet) wird das Bild eingeblendet.

Zum Testen können sie die ["F5"-Taste] betätigen. Danach wird unser Banner wieder langsam eingeblendet.


Unser Banner

Umsetzung für ein langsames Aufblenden eines Bildes ohne JavaScript!

Wir erreichen diesen Effekt natürlich mittlerweile viel eleganter mit HTML (HyperText Markup Language) und dem Fade-Effekt.

Zuerst platziere ich das Bild in einem separaten "div-Container" mit dem Namen "blend" wie folgt im HTML (HyperText Markup Language):

<div id="blend">
    <img src="bilder500/klamonfra_banner.jpg" width="468" height="60"
      alt="Unser Banner">
</div>

Dem Bild im "div-Container" "blend" wird im CSS (Cascading Style Sheet) nur noch der zeitliche Ablauf der Animation mitgeteilt.

#blend img {
    animation: 10s linear;
    animation-name: fade;
}

@keyframes fade {
     0% {opacity:0;}
   100% {opacity:1;}
}
Unser Banner

Das ist natürlich jetzt viel eleganter, schneller projektiert und ohne einem JavaScript (objektorientierte Programmiersprache) realisiert.

Zum Seitenanfang springen Λ