• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Blur-Effekt beim scrolling

C

cheffeHD

New member
Hi Leute,
habe eine Frage. Und zwar habe ich ein kleines Problem mit dem Blur Effekt beim scrollen.
Und zwar habe ich bei meinen Code den Blur Effekt immer nur solange wie das Bild lang ist. Kann vl. jemand den Code so ändern dass sich die länge des Bildes(Bei mir 1920*1080) vervierfacht ?
Danke im vorraus ! :)
Hier der JSCode :

HTML: 
 $(document).ready(function() {
    $(window).scroll(function(e) {
        var s = $(window).scrollTop(),
            d = $(document).height(),
            c = $(window).height(),
            opacityVal = (s / 150);

        $('.blurred-image').css('opacity', opacityVal);
    });
	});
 
Zuletzt bearbeitet von einem Moderator:
Code: 
var wHeight = $(window).height();
var wWidth = $(window).width();
$('.blurred-image').css({
    opacity: opacityVal,
    width: wWidth,
    height: wHeight
});
 
NB: Was hat das eigentlich mit "blur" zu tun? Das Bild wird doch nur durchscheinend (bzw. mit dem Code von mini auch noch verzerrt)...
 
Naja, ich habs so gelöst dass das eine Bild schon geblurt ist. Dann habe ich 2 Bilder die übereinander liegen und wie du sagst, wird eines dann durchscheinend bei scrollen. Wie könnte man das denn lösen, wenn man nur 1 Bild hat und dieses wirklich mit JS blurt ?
 
Aber die nutzen doch auch das canvas:
Formalities/Issues
- Canvas Support Required (server side fallback in the future?)
- Script works best when the source's background-position is set to "top left"
→ Offset parameter can be used if background is positioned d
Zum Vergrößern anklicken....
 
Mit <canvas> ist das leider zu langsam, um da on the fly die Stärke zu ändern. Aber es gibt in CSS3 https://docs.webplatform.org/wiki/css/properties/filter

Code: 
<!DOCTYPE html>

<html xmlns:svg="http://www.w3.org/2000/svg">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#blur {
	position: fixed;
	margin: 0 auto;
}
body {
	height: 20000px;
}
svg {
	width: 0;
	height: 0;
}
</style>
</head>
<body>
    <svg>
        <filter id="blurFilter">
        	<feGaussianBlur id="blurFilterStd" stdDeviation="0" />
        </filter>
    </svg>
<img id="blur" src="http://www.wallpaper-area.to/wallpaper/13/323/3D_002.jpg">
<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js"></script>
<script>(function(){
	kkjs.event.add(window, "scroll", function(){
		var std = Math.round(Math.min(25, window.scrollY / 200));
		kkjs.$("blurFilterStd").setAttribute("stdDeviation", std);
		kkjs.css.set(
			kkjs.$("blur"), 
			{
				"-moz-filter": "blur(" + std + "px)",
				"-webkit-filter": "blur(" + std + "px)",
				"-o-filter": "blur(" + std + "px)",
				"-ms-filter": "blur(" + std + "px)",
				"filter": "url(#blurFilter)"
			}
		);
		
	});
}());</script>
</body>
</html>
- funktioniert in FF, Chrome und Opera. IE geht nicht und Safari kann ich gerade nicht testen - sollte aber gehen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben