kariert: scrollender Balken

Hallo,

ich habe eine kurze Frage:

Der unten aufgeführte Link beinhaltet auf der Startseite scrollender Balken, d.h. wenn man mit der Maus drauf geht, scrollt der Balken langsam nach unten.
Dahinter steckt eine Div-Box, der Text der dann "Neu" erscheint,steht auch schon da, das heißt die Box wird einfach nach unten eingeblendet. Nun dazu zwei Fragen:

1 - wie bekommt man dieses sanfte Scrollen hin?

2 - die Div-Boxen liegen alle über dem Hintergrund, jedoch wenn ich diese rosa Box von oben "runterfahren" lasse, muss diese ja versteckt sein, heißt, sie muss theoretisch dahinter liegen. Wie wird dies gelöst?

Gruß

  1. @@kariert:

    nuqneH

    1 - wie bekommt man dieses sanfte Scrollen hin?

    Man bekommt das (in modernen Browsern) mit CSS-Transitions hin.

    Die nicht; die verwenden JavaScript, um den Wert von 'top' stufenweise zu ändern.

    2 - die Div-Boxen liegen alle über dem Hintergrund, jedoch wenn ich diese rosa Box von oben "runterfahren" lasse, muss diese ja versteckt sein, heißt, sie muss theoretisch dahinter liegen. Wie wird dies gelöst?

    Mit 'overflow: hidden'.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. @@kariert:

      nuqneH

      1 - wie bekommt man dieses sanfte Scrollen hin?

      Man bekommt das (in modernen Browsern) mit CSS-Transitions hin.

      habe es mit mozilla und chrome probiert...bei den selfhtml beispielen regte sich bei mir allerdings nichts - was sind also "moderne browser" ? ;-)
      (http://de.selfhtml.org/dhtml/modelle/anzeige/madrid.htm)

      Die nicht; die verwenden JavaScript, um den Wert von 'top' stufenweise zu ändern.

      das heißt, ich benötige einen timer, ist dafür "sleep(x)" geeignet?

      2 - die Div-Boxen liegen alle über dem Hintergrund, jedoch wenn ich diese rosa Box von oben "runterfahren" lasse, muss diese ja versteckt sein, heißt, sie muss theoretisch dahinter liegen. Wie wird dies gelöst?

      Mit 'overflow: hidden'.

      Qapla'

      danke ;-)

      1. @@kariert:

        nuqneH

        1 - wie bekommt man dieses sanfte Scrollen hin?

        Man bekommt das (in modernen Browsern) mit CSS-Transitions hin.

        habe es mit mozilla und chrome probiert...bei den selfhtml beispielen regte sich bei mir allerdings nichts - was sind also "moderne browser" ? ;-)
        (http://de.selfhtml.org/dhtml/modelle/anzeige/madrid.htm)

        Die nicht; die verwenden JavaScript, um den Wert von 'top' stufenweise zu ändern.

        ich finde in deren quelltext diesen JS teil nicht, der direkt fürs scrollen verantwortlich ist, könntest du diesen kurz hier reinkopieren?

        danke.

        das heißt, ich benötige einen timer, ist dafür "sleep(x)" geeignet?

        2 - die Div-Boxen liegen alle über dem Hintergrund, jedoch wenn ich diese rosa Box von oben "runterfahren" lasse, muss diese ja versteckt sein, heißt, sie muss theoretisch dahinter liegen. Wie wird dies gelöst?

        Mit 'overflow: hidden'.

        Qapla'

        danke ;-)

      2. @@kariert:

        nuqneH

        habe es mit mozilla und chrome probiert...bei den selfhtml beispielen regte sich bei mir allerdings nichts

        Oh, die Eigenschaften benötigen (noch) die Vendor-Präfixe.

        <!DOCTYPE html>  
        <html xmlns="http://www.w3.org/1999/xhtml">  
        	<head>  
        		<meta charset="UTF-8"/>  
        		<title>test page</title>  
        		<style>  
        [code lang=css].container  
        {  
        	background: silver;  
        	height: 180px;  
        	position: relative;  
        	overflow: hidden;  
        	width: 320px;  
        }  
          
        .title, .description  
        {  
        	background: red;  
        	color: white;  
        	height: 30px;  
        	opacity: 0.5;  
        }  
          
        .title  
        {  
        	margin-top: 150px;  
        	-moz-transition-property: margin-top;  
        	-moz-transition-duration: 0.5s;  
        	-ms-transition-property: margin-top;  
        	-ms-transition-duration: 0.5s;  
        	-o-transition-property: margin-top;  
        	-o-transition-duration: 0.5s;  
        	-webkit-transition-property: margin-top;  
        	-webkit-transition-duration: 0.5s;  
        	transition-property: margin-top;  
        	transition-duration: 0.5s;  
        }  
          
        .container:hover .title  
        {  
        	margin-top: 120px;  
        }
        
        	</style>  
        </head>  
        <body>  
        	<div class="container">  
        		<div class="title">Lorem ipsum</div>  
        		<div class="description">Lorem ipsum dolor sit amet.</div>  
        	</div>  
        </body>  
        

        </html>[/code]

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. @@kariert:

          nuqneH

          habe es mit mozilla und chrome probiert...bei den selfhtml beispielen regte sich bei mir allerdings nichts

          Oh, die Eigenschaften benötigen (noch) die Vendor-Präfixe.

          <!DOCTYPE html>

          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta charset="UTF-8"/>
          <title>test page</title>
          <style>
          [code lang=css].container
          {
          background: silver;
          height: 180px;
          position: relative;
          overflow: hidden;
          width: 320px;
          }

          .title, .description
          {
          background: red;
          color: white;
          height: 30px;
          opacity: 0.5;
          }

          .title
          {
          margin-top: 150px;
          -moz-transition-property: margin-top;
          -moz-transition-duration: 0.5s;
          -ms-transition-property: margin-top;
          -ms-transition-duration: 0.5s;
          -o-transition-property: margin-top;
          -o-transition-duration: 0.5s;
          -webkit-transition-property: margin-top;
          -webkit-transition-duration: 0.5s;
          transition-property: margin-top;
          transition-duration: 0.5s;
          }

          .container:hover .title
          {
          margin-top: 120px;
          }

          
          > 		</style>  
          > 	</head>  
          > 	<body>  
          > 		<div class="container">  
          > 			<div class="title">Lorem ipsum</div>  
          > 			<div class="description">Lorem ipsum dolor sit amet.</div>  
          > 		</div>  
          > 	</body>  
          > </html>[/code]  
          >   
          > Qapla'  
            
          OMG !!!!  
            
          VIELEN DANK !!!!  
            
          
          
          1. Om nah hoo pez nyeetz, kariert!

            OMG !!!!

            VIELEN DANK !!!!

            Schrei nicht so und zitiere bitte künftig sinnvoll. Es ist nicht notwendig das gesamte Posting zu wiederholen.

            Matthias

            --
            1/z ist kein Blatt Papier.