Mobirise Tutorials

Sound & Animation

Mouseover und Klick

Model

Porträt

Animation am Bild

Animation & Sound mit Hover & Klick über dem Bild. Man kann auch noch weitere Variablen mit mehr Sounds zum Skript hinzufügen.

  • Gehe mit der Maus über das Bild für eine Animation

  • Das Bild vergrößert sich und Du hörst einen Sound

  • Klicke auf das Bild für einen zusätzlichen Sound

Animation am Bild

Hier meine CSS um das Bild zu vergrößern und einen Schlagschatten (box-shadow) hinzuzufügen. Die class="myimage" gehört dann in das <img> Tag für das Bild, also z.B. so:

<img class="myimage" src="file:///C:/Users/User/Tutorials-2/assets/images/girl.jpg" alt="Girl">

dabei steht in die Anweisung "transition" die Zeit der Animation von 0,5 Sekunden und in der Anweisung "transform" die Größe.

.myimage {
  transition: all 0.5s linear;
}
.myimage:hover {
  box-shadow: 25px 25px 25px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
  cursor: pointer;
}


Sound bei mouseover und onclick

Zum Einbau vom Sound habe ich ein JavaScript von javascriptkit.com verwendet und hier eingebaut.

Das JavaScript unten gehört in den Bereich "Inside <head> code" der Seiteneinstellungen.

Ich habe hier zwei Sound-Dateien verwendet, eine Datei "pop.mp3" für Mausüber und eine Datei "interface.mp3" für Klick. Ihr könnt natürlich jeweils eine der Variablen (ganz unten im Script) auch löschen, wenn ihr nur einen Sound haben wollt. Die Sound-Dateien müsst ihr natürlich händisch in das Verzeichnis der lokalen Publizierung und an den Server kopieren. Ich habe hier die ein Verzeichnis "sound" angelegt und die Dateien in dieses Verzeichnis kopiert, dann also mit dieser relativen Pfadangabe:

./sound/pop.mp3

<!-- Script für Sound -->
<script>

  // Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
  // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code

  //** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
  //** Call: uniquevar.playclip() to play sound

  var html5_audiotypes={ //define list of audio file extensions and their audio types. Add to it if your specified audio file isn't on this list:
    "mp3": "audio/mpeg",
    "mp4": "audio/mp4",
    "ogg": "audio/ogg",
    "wav": "audio/wav"
  }

  function createsoundbite(sound){
    var html5audio=document.createElement('audio')
    if (html5audio.canPlayType){ //check support for HTML5 audio
      for (var i=0; i<arguments.length; i++){
        var sourceel=document.createElement('source')
        sourceel.setAttribute('src', arguments[i])
        if (arguments[i].match(/\.(\w+)$/i))
          sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
          html5audio.appendChild(sourceel)
        }
        html5audio.load()
        html5audio.playclip=function(){
        html5audio.pause()
        html5audio.currentTime=0
        html5audio.play()
      }
      return html5audio
    }
    else{
      return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
    }
  }

  // Initialize your sound clips, you may use 1 fallback file each:

  var mouseoversound=createsoundbite("./sound/pop.mp3")
  var clicksound=createsoundbite("./sound/interface.mp3")


</script>


Hier könnt ihr mit der rechten Maustaste diese beiden Sound-Dateien von Pixabay downloaden. Im Kontext-Menü "speichern unter" wählen:

interface.mp3  und pop.mp3 

Auf der Seite von Pixabay findet ihr sehr viele, kostenlose Sound-Dateien:

Sound Effekte 


Für den Aufruf vom JavaScript oben, schreibt man dann entweder beide oder einen Aufruf an das Element:

Für Mausüber:
onmouseover="mouseoversound.playclip()"

Für Klick:
onclick="clicksound.playclip()"

<div class="image-wrapper" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">
  <img class="myimage" src="file:///C:/Users/User/Tutorials-2/assets/images/girl.jpg" alt="Girl">
</div>


Natürlich kann man jeden möglichen Sound oder auch Musik nicht nur an Bildern anbringen sondern überall, wie zum Beispiel an Textlinks oder Buttons oder auch an einer Navigation.

Viel Erfolg beim Nachbau.

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Funktionale Cookies akzeptieren