Seite 1 von 1
Vignette am Bild oder Block mit Sound
Verfasst: Di 12. Sep 2023, 09:28
von Tommy Herrmann
Wer mal einen sogenannten "
Vignette-Effekt" (Randverzierung) mit CSS erstellen will, für den habe ich hier einige Beispiele bereitgestellt:
https://www.mobirise-tutorials.com/Test ... nette.html
Als "Vignette", bzw. als
Vignettierung / Vignetting, bezeichnet man bei einem Bild ein Overlay, das aus einem inliegenden Rahmen besteht und somit das Objekt einfasst, um den wichtigen Inhalt hervorgehoben darzustellen. Dazu verwendet man meist eine "Randabschattung" zur Betonung der Bildmitte.
Re: Vignette am Bild oder Block mit Sound
Verfasst: Mi 13. Sep 2023, 11:22
von Tommy Herrmann
... ich habe - mehr aus Spielerei - bei Mausüber dem Foto nun noch eine
Animation und einen
Sound eingebaut:
https://www.mobirise-tutorials.com/Test ... e-Vignette
Vielleicht kann das ja jemand mal gebrauchen ...
Dieses JavaScript erzeugt einen HTML5 Audio-Player:
Code: Alles auswählen
<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 associated 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 two sound clips with 1 fallback file each:
var mouseoversound=createsoundbite("./sound/pop.mp3")
//var clicksound=createsoundbite("click.ogg", "click.mp3")
</script>
Aufruf mit
onmouseover (auch am Handy), z.B. an diesem <div> vom "image-wrapper":
<div class="image-wrapper vignette myview mycursor" onmouseover="mouseoversound.playclip()">
Re: Vignette am Bild oder Block mit Sound
Verfasst: Do 14. Sep 2023, 12:26
von Tommy Herrmann
Ich habe jetzt für diese
Sound-Effekte mit "Mausüber" oder "Klick" eine zusätzliche Seite mit einem extra
Tutorial erstellt:
https://www.mobirise-tutorials.com/Tuto ... Sound.html
Re: Vignette am Bild oder Block mit Sound
Verfasst: Fr 15. Sep 2023, 10:27
von stobi_de
Ich finde den Sound am PC immer so grässlich....
und werde das sofort mal einbauen
Re: Vignette am Bild oder Block mit Sound
Verfasst: Fr 15. Sep 2023, 11:21
von Tommy Herrmann
... hatte ich doch den Aufruf vom JavaScript im Tutorial völlig vergessen zu beschreiben
Habe ich gerade noch dazu geschrieben ...
Das müsste natürlich auch ganz genauso mit einem ganz normalen HTML5 Audio-Element und einem kleinen JavaScript zum Abspielen funktionieren, also so ähnlich wie hier auf meiner Audio-Seite:
https://www.mobirise-tutorials.com/MP3-Music.html
Bei "Pixabay" gibt es übrigens weit mehr als 90.000 Sound-Effekte zum kostenlosen Download.
Re: Vignette am Bild oder Block mit Sound
Verfasst: Fr 15. Sep 2023, 20:02
von Tommy Herrmann
Ich könnte mir eine Anwendung bei Dir zum Beispiel bei der aktuellen Seite der Tanzgruppe "Raketen" beim Klick auf das Info-Popup schon vorstellen - zumindest so ein dezentes "plopp"