Page Peel Effect

thigle

Mitglied
Hallo,

schön langsam nähere ich mich dem Ende der Frickelei und so wird es endlich mal Zeit für Inhalte. Noch ist es aber nicht soweit. Mich 'plagt' folgendes neues Problem.
Ich habe auf dieser Seite nen 'Page Peel Effect' gemäß dieser Seite eingebaut. Der Code wurde im Grunde 1:1 übernommen, also im Dokument (im 'wrapper')


Code:
<body><div id="wrapper">
<div id="pageflip">
´     <a href="http://thigle.square7.ch/feed/">
		<img src="page_flip.png" alt="Thigle" title="Abonieren via RSS" />
		<span class="msg_block">Abonieren via RSS</span>
	</a>
</div>

dann im Stylesheet


Code:
#pageflip {
	position: relative;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	z-index: 50;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top;
	text-indent: -9999px;
}

Und im HTML wiederum den jQuery Code


Code:
jQuery("#pageflip").hover(function() { 
	jQuery("#pageflip img , .msg_block").stop() .animate({ width: '307px', height: '319px' }, 500); } , function() {
	jQuery("#pageflip img").stop() .animate({ width: '50px', height: '52px'}, 220);
	jQuery(".msg_block").stop() .animate({ width: '50px', height: '50px' }, 200); 
            
            });


Funktioniert auch. Der in Gegensatz zur übrigen Seite doch 'sehr bunte' (aber notwendige) 'Thigle' (evtl. finde ich noch nen schöneren) ist so recht gut platziert und erfüllt auch gleich als Link das RSS-Abo (ein kleiner RSS Button kommt noch über den 'Thigle').

Wie geschrieben, es funktionert, aber unter Opera habe ich einen kleinen Schönheitsfehler, denn klicke ich mich durch die einzelnen Seiten, taucht das schwarze 'pageflip' Bild beim Seitenwechsel immer ganz kurz auf der linken Seite auf und 'flippt' somit im wahrsten Sinne des Wortes. Das ist unschön und so frage ich an, ob man hier irgendwas optimieren könnte? Hat es was mit der absoluten Positionierung im 'wrapper' zu tun?

LG
Mart
 
Zuletzt bearbeitet:
Zurück