[HTML] Frage zu Effekt von Webseite

Dieses Thema im Forum "Webdesign" wurde erstellt von chima300, 18. Februar 2011 .

Schlagworte:
  1. 18. Februar 2011
    Frage zu Effekt von Webseite

    Hallo zusammen,

    kann mir vielleicht jemand sagen, wie man diesen Effekt bauen kann?

    1920 x 1200 HD wallpapers « HD Wallpapers

    Also einen Art Hover-Effekt.
    Wenn mir da vielleicht jemand helfen könnte, wäre das nett.
     
  2. 18. Februar 2011
    AW: Frage zu Effekt von Webseite

    opacity rauf bzw. runter.

    kann man mit css (seit css3 auch als animation) oder über javascript machen.
    auf google findest du seitenweise beispiele dazu.

    vielleicht interessiert es dein einen oder anderen wie man es mit css3 macht:
    HTML:
    <!DOCTYPE html>
    <html>
     <head>
     <title>CSS3 Transitions</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
     <style type="text/css">
     /* <![CDATA[ */
     p.opacity {
     opacity: .7;
     width: 200px;
     height: 200px;
     background-color: #000;
     
     -moz-transition-property: opacity;
     -moz-transition-duration: 500ms;
     -moz-transition-timing-function: linear;
     }
    
     p.opacity:hover {
     opacity: 1;
     }
     /* ]]> */
     </style>
     </head>
     <body>
     <p class="opacity">test</p>
     </body>
    </html>
    funktioniert nur mit firefox4. für webkits (safari/chrome) geht das mit dem -webkit präfix.
    zum nachlesen: transition - CSS | MDN
     
  3. 18. Februar 2011
    AW: Frage zu Effekt von Webseite

    Ja das interessiert mich sehr.

    Dann muss Ich mal Papa Google fragen.
    Danke für deine schnelle Antwort.

    BW ist raus.

    Gruß
    chima300
     
  4. 18. Februar 2011
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    AW: Frage zu Effekt von Webseite

    z.B. Prototype & Scriptaculous -> Layer über jedem Thumbnail erzeugen und bei Mouseover Abblenden.

    Das ist - finde ich - der einfachste Weg.

    //
    fest30.gif
    {img-src: //www.web-smilie.de/smilies/party_smilies/fest30.gif}
    777. Post =)
     
  5. 18. Februar 2011
    AW: Frage zu Effekt von Webseite

    warum nen layer drüber legen, wenn man das bild selbst auch ein/ausblenden kann? (was viel einfacher und performater geht)

    Code:
    $$("img.thumbnail").each(function(img) {
     img.observe("mousenter", Effect.Appear.bind(img, { from: .7, to: 1, duration: .5 }))
     .observe("mouseleave", Effect.Fade.bind(img, { from: 1, to: .7, duration: .5 }))
     .setOpacity(.7);
    });
     
  6. 18. Februar 2011
    AW: Frage zu Effekt von Webseite

    oder wenn es design technisch anspruchsvoll sein soll, dann schau mal das hier an
    http://www.sohtanaka.com/web-design/examples/hover-over-trick/

    gruß
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.