Transtition Scroller

Dieser schöne Textscroller kann wie in dem unten stehenden
Beispiel als Geschichtenerzähler verwendet werden.

In dem Beispiel sind 3 verschiedene Texte hinterlegt,
die durch klicken auf die Zahlen links aufgerufen werden können.

Bei Wechsel der Passagen, werden die Texte langsam
eingeblendet. Diese Funktion ist im Script einstellbar.

Hier gehts zur Demo

HTML-Einbindung
   <style type="text/css"> a {font-family:verdana,arial,helvetica,sans-serif; font-size:11px; color:#666666; text-decoration:none;} a:hover {text-decoration:underline; color:#cccccc;} body {background-color:#ffffff; color:#999999; font-size:11px; font-family:verdana,arial,helvetica,sans-serif; line-height:15px;} #divScroller1 {position:absolute; overflow:hidden; z-index:9; left:100px; top:90px; width:400px; height:300px; clip:rect(0px, 400px, 300px, 0px); visbility:visible; border-width:0px 0px 0px 1px; border-color:#666666; border-style:dashed;} .dynPage {position:absolute; z-index:10; left:0px; top:0px; width:385px; visibility:hidden; padding-left:15px; font-family:arial,helvetica,sans-serif; font-size:10px; line-height:14px; color:black} #arrows {position:absolute; z-index:11; left:74px; top:355px; width:20px;} #links {position:absolute; z-index:11; left:77px; top:301px; width:20px;} </style> <script language="JavaScript" type="text/javascript"> /********************************************************************************** PageSlideFade * Copyright (C) 2001 <a href="/dhtmlcentral/michael_van_ouwerkerk.asp">Michael van Ouwerkerk</a> * This script was released at DHTMLCentral.com * Visit for more great scripts! * This may be used and changed freely as long as this msg is intact! * We will also appreciate any links you could give us. * * Made by <a href="/dhtmlcentral/michael_van_ouwerkerk.asp">Michael van Ouwerkerk</a> *********************************************************************************/ function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=this.agent.indexOf("Opera 5")>-1 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; this.ie4=(document.all && !this.dom && !this.opera5)?1:0; this.ie=this.ie4||this.ie5||this.ie6 this.mac=this.agent.indexOf("Mac")>-1 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) return this } var bw=new lib_bwcheck() /*** konfigurierbare Variablen... ***/ var numScrollPages = 3 /*Anzahl der Seiten (Layers). Passen Sie die Div- Bereiche im Bodybereich entsprechend an. Der erste Layer ist dynPage0, der zweite dynPage1, und so weiter.*/ var transitionOut = 1; //Der 'out' Effekt... 0= kein Effekt, 1= fade var transitionIn = 2; //Der 'in' Effekt... 0= kein Efekt, 1= fade, 2= slide var slideAcceleration = 0.2; //Wenn der Slide Effekt verwendet wird, setzen Sie irgendwas zwischen 0 und 1 ein. var transitionOnload = 1 /*Wenn der 'in' Effekt nur verwendet werden soll, wenn ein Link geklickt wird, setzen Sie hier 0 ein*/ // NOTE: Wenn Sie die Position des divScroller1 von absolute nach relative ändern, können Sie den Scroller in eine Tabelle einsetzen. // Das geht allerdings nicht in Netscape 4, hier müssen Sie die absolute Positionierung verwenden. // Die Effekte (Fade, Slide) funktionieren übrigens nicht bei NS4 und IE4, oder Explorers auf Mac! /*** Ab hier muss nichts mehr verändert werden (deshalb auch keine Übersetzung mehr ;-) ***/ // A unit of measure that will be added when setting the position of a layer. var px = bw.ns4||window.opera?"":"px"; if(document.layers){ //NS4 resize fix... scrX= innerWidth; scrY= innerHeight; onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} } } //object constructor... function scrollerobj(obj,nest){ nest = (!nest)?"":'document.'+nest+'.' this.elm = bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj) this.css = bw.ns4?this.elm:this.elm.style this.doc = bw.ns4?this.elm.document:document this.obj = obj+'scrollerobj'; eval(this.obj+'=this') this.x = (bw.ns4||bw.opera5)?this.css.left:this.elm.offsetLeft this.y = (bw.ns4||bw.opera5)?this.css.top:this.elm.offsetTop this.w = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetWidth:bw.ns4?this.elm.clip.width:bw.opera5?this.css.pixelWidth:0 this.h = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetHeight:bw.ns4?this.elm.clip.height:bw.opera5?this.css.pixelHeight:0 } //object methods... scrollerobj.prototype.moveTo = function(x,y){ if(x!=null){this.x=x; this.css.left=x+px} if(y!=null){this.y=y; this.css.top=y+px} } scrollerobj.prototype.moveBy = function(x,y){this.moveTo(this.x+x,this.y+y)} scrollerobj.prototype.hideIt = function(){this.css.visibility='hidden'} scrollerobj.prototype.showIt = function(){this.css.visibility='visible'} /**************************************************************** scroll functions... ****************************************************************/ var scrollTimer = null; function scroll(step){ clearTimeout(scrollTimer); if ( !busy && (step<0&&activePage.y+activePage.h>scroller1.h || step>0&&activePage.y<0) ){ activePage.moveBy(0,step); scrollTimer = setTimeout('scroll('+step+')',40); } } function stopScroll(){ clearTimeout(scrollTimer); } /**************************************************************** activating the correct layers... ****************************************************************/ var activePage = null; var busy = 0; function activate(num){ if (activePage!=pages[num] && !busy){ busy = 1; if (transitionOut==0 || !bw.opacity){ activePage.hideIt(); activateContinue(num); } else if (transitionOut==1) activePage.blend('hidden', 'activateContinue('+num+')'); } } function activateContinue(num){ busy = 1; activePage = pages[num]; activePage.moveTo(0,0); if (transitionIn==0 || !bw.opacity){ activePage.showIt(); busy=0; } else if (transitionIn==1) activePage.blend('visible', 'busy=0'); else if (transitionIn==2) activePage.slide(0, slideAcceleration, 40, 'busy=0'); } /**************************************************************** Slide methods... ****************************************************************/ scrollerobj.prototype.slide = function(target, acceleration, time, fn){ this.slideFn= fn?fn:null; this.moveTo(0,scroller1.h); if (bw.ie4&&!bw.mac) this.css.filter = 'alpha(opacity=100)'; if (bw.ns6) this.css.MozOpacity = 1; this.showIt(); this.doSlide(target, acceleration, time); } scrollerobj.prototype.doSlide = function(target, acceleration, time){ this.step = Math.round(this.y*acceleration); if (this.step<1) this.step = 1; if (this.step>this.y) this.step = this.y; this.moveBy(0, -this.step); if (this.y>0) this.slideTim = setTimeout(this.obj+'.doSlide('+target+','+acceleration+','+time+')', time); else { eval(this.slideFn); this.slideFn = null; } } /**************************************************************** Opacity methods... ****************************************************************/ scrollerobj.prototype.blend= function(vis, fn){ if (bw.ie5||bw.ie6 && !bw.mac) { if (vis=='visible') this.css.filter= 'blendTrans(duration=0.9)'; else this.css.filter= 'blendTrans(duration=0.6)'; this.elm.onfilterchange = function(){ eval(fn); }; this.elm.filters.blendTrans.apply(); this.css.visibility= vis; this.elm.filters.blendTrans.play(); } else if (bw.ns6 || bw.ie&&!bw.mac){ this.css.visibility= 'visible'; vis=='visible' ? this.fadeTo(100, 7, 40, fn) : this.fadeTo(0, 9, 40, fn); } else { this.css.visibility= vis; eval(fn); } }; scrollerobj.prototype.op= 100; scrollerobj.prototype.opacityTim= null; scrollerobj.prototype.setOpacity= function(num){ this.css.filter= 'alpha(opacity='+num+')'; this.css.MozOpacity= num/100; this.op= num; } scrollerobj.prototype.fadeTo= function(target, step, time, fn){ clearTimeout(this.opacityTim); this.opacityFn= fn?fn:null; this.op = target==100 ? 0 : 100; this.fade(target, step, time); } scrollerobj.prototype.fade= function(target, step, time){ if (Math.abs(target-this.op)>step){ target>this.op? this.setOpacity(this.op+step):this.setOpacity(this.op-step); this.opacityTim= setTimeout(this.obj+'.fade('+target+','+step+','+time+')', time); } else { this.setOpacity(target); eval(this.opacityFn); this.opacityFn= null; } } /************************************************************** Init function... **************************************************************/ var pageslidefadeLoaded = 0; function initPageSlideFade(){ scroller1 = new scrollerobj('divScroller1'); pages = new Array(); for (var i=0; i<numScrollPages; i++){ pages[i] = new scrollerobj('dynPage'+i, 'divScroller1'); pages[i].moveTo(0,0); } bw.opacity = ( bw.ie && !bw.ie4 && navigator.userAgent.indexOf('Windows')>-1 ) || bw.ns6 if (bw.ie5||bw.ie6 && !bw.mac) pages[0].css.filter= 'blendTrans(duration=0.6)'; // Preloads the windows filters. if (transitionOnload) activateContinue(0); else{ activePage = pages[0]; activePage.showIt(); } if (bw.ie) for(var i=0;i<document.links.length;i++) document.links[i].onfocus=document.links[i].blur; pageslidefadeLoaded = 1; } //if the browser is ok, the script is started onload.. if(bw.bw && !pageslidefadeLoaded) onload = initPageSlideFade; </script>  <div id="divScroller1"> <div id="dynPage0" class="dynPage"> The Cask of Amontillado by Edgar Allan Poe ... The thousand injuries of Fortunato I had borne as I best could, but when he ventured upon insult, I vowed revenge. You, who so well know the nature of my soul, will not suppose, however, that I gave utterance to a threat. At length I would be avenged; this was a point definitely settled--but the very definitiveness with which it was resolved, precluded the idea of risk. I must not only punish, but punish with impunity. A wrong is unredressed when retribution overtakes its redresser. It is equally unredressed when the avenger fails to make himself felt as such to him who has done the wrong. It must be understood that neither by word nor deed had I given Fortunato cause to doubt my good will. I continued, as was my wont, to smile in his face, and he did not perceive that my smile now was at the thought of his immolation. He had a weak point--this Fortunato--although in other regards he was a man to be respected and even feared. He prided himself on his connoisseurship in wine. Few Italians have the true virtuoso spirit. For the most part their enthusiasm is adopted to suit the time and opportunity-- to practise imposture upon the British and Austrian millionaires. In painting and gemmary, Fortunato, like his countrymen, was a quack-- but in the matter of old wines he was sincere. In this respect I did not differ from him materially: I was skillful in the Italian vintages myself, and bought largely whenever I could. It was about dusk, one evening during the supreme madness of the carnival season, that I encountered my friend. He accosted me with excessive warmth, for he had been drinking much. The man wore motley. He had on a tight-fitting parti-striped dress, and his head was surmounted by the conical cap and bells. I was so pleased to see him, that I thought I should never have done wringing his hand. I said to him--"My dear Fortunato, you are luckily met. How remarkably well you are looking to-day! But I have received a pipe of what passes for Amontillado, and I have my doubts." "How?" said he. "Amontillado? A pipe? Impossible! And in the middle of the carnival!" "I have my doubts," I replied; "and I was silly enough to pay the full Amontillado price without consulting you in the matter. You were not to be found, and I was fearful of losing a bargain." "Amontillado!" "I have my doubts." "Amontillado!" "And I must satisfy them." "Amontillado!" "As you are engaged, I am on my way to Luchesi. If any one has a critical turn, it is he. He will tell me--" "Luchesi cannot tell Amontillado from Sherry." "And yet some fools will have it that his taste is a match for your own." "Come, let us go." "Whither?" "To your vaults." "My friend, no; I will not impose upon your good nature. I perceive you have an engagement. Luchesi--" "I have no engagement;--come." "My friend, no. It is not the engagement, but the severe cold with which I perceive you are afflicted. The vaults are insufferably damp. They are encrusted with nitre." "Let us go, nevertheless. The cold is merely nothing. Amontillado! You have been imposed upon. And as for Luchesi, he cannot distinguish Sherry from Amontillado." Thus speaking, Fortunato possessed himself of my arm. Putting on a mask of black silk, and drawing a roquelaire closely about my person, I suffered him to hurry me to my palazzo. There were no attendants at home; they had absconded to make merry in honour of the time. I had told them that I should not return until the morning, and had given them explicit orders not to stir from the house. These orders were sufficient, I well knew, to insure their immediate disappearance, one and all, as soon as my back was turned. I took from their sconces two flambeaux, and giving one to Fortunato, bowed him through several suites of rooms to the archway that led into the vaults. I passed down a long and winding staircase, requesting him to be cautious as he followed. We came at length to the foot of the descent, and stood together on the damp ground of the catacombs of the Montresors. The gait of my friend was unsteady, and the bells upon his cap jingled as he strode. "The pipe," said he. "It is farther on," said I; "but observe the white web-work which gleams from these cavern walls." He turned towards me, and looked into my eyes with two filmy orbs that distilled the rheum of intoxication. "Nitre?" he asked, at length. "Nitre," I replied. "How long have you had that cough?" "Ugh! ugh! ugh!--ugh! ugh! ugh!--ugh! ugh! ugh!--ugh! ugh! ugh!--ugh! ugh! ugh!" My poor friend found it impossible to reply for many minutes. "It is nothing," he said, at last. "Come," I said, with decision, "we will go back; your health is precious. You are rich, respected, admired, beloved; you are happy, as once I was. You are a man to be missed. For me it is no matter. We will go back; you will be ill, and I cannot be responsible. Besides, there is Luchesi--" "Enough," he said; "the cough is a mere nothing; it will not kill me. I shall not die of a cough." "True--true," I replied; "and, indeed, I had no intention of alarming you unnecessarily--but you should use all proper caution. A draught of this Medoc will defend us from the damps." Here I knocked off the neck of a bottle which I drew from a long row of its fellows that lay upon the mould. "Drink," I said, presenting him the wine. He raised it to his lips with a leer. He paused and nodded to me familiarly, while his bells jingled. "I drink," he said, "to the buried that repose around us." "And I to your long life." He again took my arm, and we proceeded. "These vaults," he said, "are extensive." "The Montresors," I replied, "were a great and numerous family." "I forget your arms." "A huge human foot d'or, in a field azure; the foot crushes a serpent rampant whose fangs are imbedded in the heel." "And the motto?" " Nemo me impune lacessit." "Good!" he said. </div> <div id="dynPage1" class="dynPage"> The wine sparkled in his eyes and the bells jingled. My own fancy grew warm with the Medoc. We had passed through walls of piled bones, with casks and puncheons intermingling, into the inmost recesses of catacombs. I paused again, and this time I made bold to seize Fortunato by an arm above the elbow. "The nitre!" I said; "see, it increases. It hangs like moss upon the vaults. We are below the river's bed. The drops of moisture trickle among the bones. Come, we will go back ere it is too late. Your cough--" "It is nothing," he said; "let us go on. But first, another draught of the Medoc." I broke and reached him a flagon of De Grave. He emptied it at a breath. His eyes flashed with a fierce light. He laughed and threw the bottle upwards with a gesticulation I did not understand. I looked at him in surprise. He repeated the movement--a grotesque one. "You do not comprehend?" he said. "Not I," I replied. "Then you are not of the brotherhood." "How?" "You are not of the masons." "Yes, yes," I said; "yes, yes." "You? Impossible! A mason?" "A mason," I replied. "A sign," he said, "a sign." "It is this," I answered, producing a trowel from beneath the folds of my roquelaire. "You jest," he exclaimed, recoiling a few paces. "But let us proceed to the Amontillado." "Be it so," I said, replacing the tool beneath the cloak and again offering him my arm. He leaned upon it heavily. We continued our route in search of the Amontillado. We passed through a range of low arches, descended, passed on, and descending again, arrived at a deep crypt, in which the foulness of the air caused our flambeaux rather to glow than flame. At the most remote end of the crypt there appeared another less spacious. Its walls had been lined with human remains, piled to the vault overhead, in the fashion of the great catacombs of Paris. Three sides of this interior crypt were still ornamented in this manner. From the fourth side the bones had been thrown down, and lay promiscuously upon the earth, forming at one point a mound of some size. Within the wall thus exposed by the displacing of the bones, we perceived a still interior recess, in depth about four feet in width three, in height six or seven. It seemed to have been constructed for no especial use within itself, but formed merely the interval between two of the colossal supports of the roof of the catacombs, and was backed by one of their circumscribing walls of solid granite. It was in vain that Fortunato, uplifting his dull torch, endeavoured to pry into the depth of the recess. Its termination the feeble light did not enable us to see. "Proceed," I said; "herein is the Amontillado. As for Luchesi--" "He is an ignoramus," interrupted my friend, as he stepped unsteadily forward, while I followed immediately at his heels. In an instant he had reached the extremity of the niche, and finding his progress arrested by the rock, stood stupidly bewildered. A moment more and I had fettered him to the granite. In its surface were two iron staples, distant from each other about two feet, horizontally. From one of these depended a short chain, from the other a padlock. Throwing the links about his waist, it was but the work of a few seconds to secure it. He was too much astounded to resist. Withdrawing the key I stepped back from the recess. "Pass your hand," I said, "over the wall; you cannot help feeling the nitre. Indeed, it is very damp. Once more let me implore you to return. No? Then I must positively leave you. But I must first render you all the little attentions in my power." "The Amontillado!" ejaculated my friend, not yet recovered from his astonishment. "True," I replied; "the Amontillado." As I said these words I busied myself among the pile of bones of which I have before spoken. Throwing them aside, I soon un- covered a quantity of building stone and mortar. With these materials and with the aid of my trowel, I began vigorously to wall up the entrance of the niche. I had scarcely laid the first tier of the masonry when I discovered that the intoxication of Fortunato had in a great measure worn off. The earliest indication I had of this was a low moaning cry from the depth of the recess. It was not the cry of a drunken man. There was then a long and obstinate silence. I laid the second tier, and the third, and the fourth; and then I heard the furious vibrations of the chain. The noise lasted for several minutes, during which, that I might hearken to it with the more satisfaction, I ceased my labours and sat down upon the bones. When at last the clanking subsided, I resumed the trowel, and finished without interruption the fifth, the sixth, and the seventh tier. The wall was now nearly upon a level with my breast. I again paused, and holding the flambeaux over the mason-work, threw a few feeble rays upon the figure within. A succession of loud and shrill screams, bursting suddenly from the throat of the chained form, seemed to thrust me violently back. For a brief moment I hesitated-- I trembled. Unsheathing my rapier, I began to grope with it about the recess; but the thought of an instant reassured me. I placed my hand upon the solid fabric of the catacombs, and felt satisfied. I reapproached the wall; I replied to the yells of him who clamoured. I re-echoed-- I aided-- I surpassed them in volume and in strength. I did this, and the clamourer grew still. It was now midnight, and my task was drawing to a close. I had completed the eighth, the ninth, and the tenth tier. I had finished a portion of the last and the eleventh; there remained but a single stone to be fitted and plastered in. I struggled with its weight; I placed it partially in its destined position. But now there came from out the niche a low laugh that erected the hairs upon my head. It was succeeded by a sad voice, which I had difficulty in recognizing as that of the noble Fortunato. The voice said-- "Ha! ha! ha!--he! he! he!--a very good joke indeed--an excellent jest. We shall have many a rich laugh about it at the palazzo--he! he! he!--over our wine--he! he! he!" "The Amontillado!" I said. "He! he! he!--he! he! he!--yes, the Amontillado. But is it not getting late? Will not they be awaiting us at the palazzo, the Lady Fortunato and the rest? Let us be gone." "Yes," I said, "let us be gone." " For the love of God, Montresor!" "Yes," I said, "for the love of God!" But to these words I hearkened in vain for a reply. I grew impatient. I called aloud-- "Fortunato!" No answer. I called again-- "Fortunato--" No answer still. I thrust a torch through the remaining aperture and let it fall within. There came forth in reply only a jingling of the bells. My heart grew sick on account of the dampness of the catacombs. I hastened to make an end of my labour. I forced the last stone into its position; I plastered it up. Against the new masonry I re-erected the old rampart of bones. For the half of a century no mortal has disturbed them. In pace requiescat! </div> <div id="dynPage2" class="dynPage"> Content, content content content content content content <a href="#" onclick="transitionIn=transitionIn==2?1:2; return false;" onfocus="if(this.blur)this.blur()">switch transitions</a> </div> </div>   <div id="arrows"> <a href="#" onmouseover="scroll(6);" onclick="scroll(6); return false;" onmousedown="scroll(25)" onmouseout="stopScroll();"> <img src="pfeil_o.gif" width="20" height="20" alt="" border="0"></a> <a href="#" onmouseover="scroll(-6);" onclick="scroll(-6); return false;" onmousedown="scroll(-25)" onmouseout="stopScroll();"> <img src="pfeil_u.gif" width="20" height="20" alt="" border="0"></a> </div> <div id="links"> <a href="#" onclick="activate(0); return false;" onfocus="if(this.blur)this.blur()">I</a> <a href="#" onclick="activate(1); return false;" onfocus="if(this.blur)this.blur()">II</a> <a href="#" onclick="activate(2); return false;" onfocus="if(this.blur)this.blur()">III</a> </div>

Hier kannst Du Dir das Javascript einfach per eMail zusenden lassen.

Mail:

Name:

Abo
Wenn Du den Newsletter beziehen möchtest, klicke bitte in das Feld "Abo"