Vignette am Bild oder Block mit Sound
- Tommy Herrmann
- Site Admin
- Beiträge: 6210
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Vignette am Bild oder Block mit Sound
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.
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.
- Tommy Herrmann
- Site Admin
- Beiträge: 6210
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Vignette am Bild oder Block mit Sound
... 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:
Aufruf mit onmouseover (auch am Handy), z.B. an diesem <div> vom "image-wrapper":
<div class="image-wrapper vignette myview mycursor" onmouseover="mouseoversound.playclip()">
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()">
- Tommy Herrmann
- Site Admin
- Beiträge: 6210
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Vignette am Bild oder Block mit Sound
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
https://www.mobirise-tutorials.com/Tuto ... Sound.html
Re: Vignette am Bild oder Block mit Sound
Ich finde den Sound am PC immer so grässlich....
und werde das sofort mal einbauen
und werde das sofort mal einbauen
- Tommy Herrmann
- Site Admin
- Beiträge: 6210
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Vignette am Bild oder Block mit Sound
... 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.
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.
- Tommy Herrmann
- Site Admin
- Beiträge: 6210
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Vignette am Bild oder Block mit Sound
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"
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast