Interaktiven Blurred Hintergrund

[FrazeColder]

Moin zusammen,

ich habe eine Seite welche ich mit WordPress erstellt habe. Dort würde ich gerne einen interaktiven Blurred Hintergrund erstellen. So wie hier:
https://www.canva.com/

Nun habe ich dafür zwei Möglichkeiten, da ich einen Slider mit Slider Revulution (WP Plugin) auf der Startseite einbinden.

1. Entweder ich schaffe es in den Slider das ganze mit dem Blurred Effekt zu implementieren.

2. Oder ich setzte einen Blurred Hintergrund und lege meinen Slider dann einfach darüber.

Allerdings wäre mir es lieber, wenn ich irgendwie die erste Möglichkeiten implementieren kann. Da ich dann noch verschiedene Effekte einbauen kann und Buttons.

Ich möchte zusätzlich noch das Bild in verschiedene Einzel Bilder unterteilen, auf welche man dann draufdrücken kann.
Das wäre die nächste Hürde...

Allerdings habe ich weder bei der einen Möglichkeit, noch bei der anderen eine Ahnung, wie ich das umsetzten kann...
Und vor allem das mit den verschiedenen Links in den Unterbilder.

Hat jemand von euch eine Idee, wie ich das ganze umsetzen kann?
Ist das überhaupt möglich, wie kann ich den Hintergrund so interaktiv Blurren?

Mit freundlichen Grüße und Vielen Dank!

 

[Madman1209]

Hi,

wenn du es mit Slider Revolution machen möchtest hilft dir nur dich einzuarbeiten und Tutorials durchzumachen. Grundsätzlich ist das sicherlich möglich mit dem Blur Effekt. Wie genau? Muss man sich anlesen.

VG,
Mad

 

[FrazeColder]

Alles klar, Danke. Eventuell hat jemand anderes hier noch eine Idee

Ergänzung (12. Januar 2017)

Nach was muss ich den Suchen, wenn ich mir da Tutorials anschauen möchte?
Finde leider nichts unter "Interactive blurred background"

Ergänzung (12. Januar 2017)

Ich habe zwei sehr interessante Seiten gefunden, die mir zeigen, wie das funktioniert.
Leider kann ich damit nichts anfangen... Hat jemand davon Ahnung?

How to implement und HTML, CSS & JS Code

 

[Madman1209]

Hi,

naja, beim CodePen Beispiel ist im Endeffekt HTML zu vernachlässigen, alles andere steht relativ eindeutig da. Was du brauchst ist das CSS und das JavaScript. Hast du Programmiererfahrung?

VG,
Mad

 

[FrazeColder]

Ja, aber leider nur in Java und ich lerne mir gerade ein bisschen PHP an.
Wenn mir jemand sagen würde, was ich da genau machen müsste, könnte ich es evtl. hinbekommen

Das schwierige, wo ich wirklich null Plan habe wie ich es machen soll ist, dass ganze noch in einen Slider von SliderRev zu bekommen...

 

[r15ch13]

In CSS bekommt der Body das Bild mit Blur als Hintergrund. Der Img-Tag im HTML hat das normale Bild als Quelle und wird per CSS wieder ausgeblendet (display: none).
Der Javascript Teil macht den Rest.

Um das einzubinden musst du dich wirklich mal ein wenig mehr mit HTML/CSS und PHP beschaeftigen.

 

[FrazeColder]

Und wie kann ich im Javascript jetzt sagen, welches Bild ich nehmen möchte?
Weil die "var"s verstehe ich nicht so ganz... Wo setzte ich das Bild?

 

[FrazeColder]

Ich habe es nun geschafft, das Script und die CSS Datei in meine Seite einzubinden

Nun habe ich einen neue Seite gemacht und in WordPress im HTML Bereich das hier hingeschrieben:

<img class="alignnone size-medium" src="http://www.allmacwallpaper.com/get/Retina-MacBook-Pro-15-inch-wallpapers/Divergent-Movie-2880x1800/8288-8.jpg" width="100%" height="100%" />
<script src="blur.js"></script>

Mein Problem dabei ist allerdings nun, dadurch, dass in der CSS Datei folgendes steht:

html,
body {
  font-size: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background: url(//bild url (rausgemacht));
}

img {
  display: none;
}

, dass natürlich nun kein Text mehr auf meiner Seite zu sehen ist. Wie kann ich das nun so einstellen, dass das nur das Bild anspricht?

MfG und Vielen Dank!