Vignette am Bild oder Block mit Sound

CSS und andere hilfreiche Anweisungen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6210
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Vignette am Bild oder Block mit Sound

Ungelesener Beitrag 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
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6210
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Vignette am Bild oder Block mit Sound

Ungelesener Beitrag 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()">
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6210
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Vignette am Bild oder Block mit Sound

Ungelesener Beitrag 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
stobi_de
Moderator
Moderator
Beiträge: 887
Registriert: Di 11. Okt 2022, 06:30

Re: Vignette am Bild oder Block mit Sound

Ungelesener Beitrag von stobi_de »

Ich finde den Sound am PC immer so grässlich....
und werde das sofort mal einbauen :D
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6210
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Vignette am Bild oder Block mit Sound

Ungelesener Beitrag 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.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6210
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Vignette am Bild oder Block mit Sound

Ungelesener Beitrag 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" :)
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast