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.


Bild mit Vignette.jpg

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 :D

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 :D

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" :)