kariert: scrollender Balken

SELF-Forum

scrollender Balken

kariert Homepage des Autors
– Informationen zu den Bewertungsregeln

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ß

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. scrollender Balken

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@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)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. scrollender Balken

      kariert
      – Informationen zu den Bewertungsregeln

      @@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 ;-)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. scrollender Balken

        kariert
        – Informationen zu den Bewertungsregeln

        @@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 ;-)

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. scrollender Balken

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@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)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. scrollender Balken

          kariert
          – Informationen zu den Bewertungsregeln

          @@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 !!!!
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. scrollender Balken

            Matthias Apsel Homepage des Autors
            +4 Informationen zu den Bewertungsregeln

            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.

            Beitrag melden
            +4
            Informationen zu den Bewertungsregeln