Frage zu angewandtem Effekt.... @ tutorials.de: Tutorials, Forum & Hilfe

tobm_knows_best · 16.12.11 10:50

Hallo zusammen,

ich würde gerne auf meiner eigenen HP solch einen Effekt (siehe die Bilder auf der Seitenmitte beim *rollover*...) auf http://www.sarahbraun.net auf entsprechende Bilder anwenden. Kann mir jemand sagen wie genau ich so etwas realisieren kann?

jQuery - oder Flash?....

wäre super wenn mir diesbezüglich jemand ein paar Informationen geben könnte!

Vielen Dank schon einmal im Voraus

***CPoly*** · 16.12.11 11:38

http://jsfiddle.net/CmAjQ/

tobm_knows_best · 16.12.11 11:55

äh....gut - und wie genau darf ich das jetzt *handhaben*?
Ich vermute ich werde den HTML-Code und den CSS-Code dementsprechend in die Datein einfügen müssen.... wie verfahre ich dann mit Javascript etc... ?!

Bin auf dem Gebiet nämlich ein absoluter **** :/...

Mich würde auch interessieren ob das der einzige Effekt ist, den man damit (die gepostete Seite von dir betreffend) erstellen kann, oder welche Variationen noch machbar sind... ?!

Hoffe das war nicht zuviel auf einmal :/

Merci :P

***CPoly*** · 16.12.11 12:09

Zitat von tobm_knows_best

Bin auf dem Gebiet nämlich ein absoluter **** :/...

Das ist natürlich eine wichtige Info.

Zitat von tobm_knows_best

Mich würde auch interessieren ob das der einzige Effekt ist, den man damit (die gepostete Seite von dir betreffend) erstellen kann, oder welche Variationen noch machbar sind... ?!

Was stellst du dir denn für einen Effekt vor? Das war nur jetzt nur der ungefähre Nachbau des von dir verlinkten Effekts.

Ich habe das mal in eine HTML Datei gepackt, dann siehst du auch, wo das JavaScript hin gehört.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<title>Effekt</title>

	<style type="text/css">
	/* <![CDATA[ */
	.image-wrapper {
		border:1px solid #000;
		position:relative;
		width:285px;
		height:160px;
		overflow:hidden;
	}

	.image-wrapper > img {
		display:block;
	}

	.image-wrapper > .image-details {
		position:absolute;
		left:0px;
		right:0px;
		bottom:0px;
		height:50px;
		line-height:50px;
		background:#000;
		color:#fff;
		opacity:.7;
	}
	/* ]]> */
	</style>
</head>

<body>
	<div class="image-wrapper">
		<img src="http://www.sarahbraun.net/images/index/print.jpg" alt="" />
		<p class="image-details">
			Foobar
		</p>
	</div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(function() {
		$('.image-details').css('bottom', '-45px').parent().hover(function() {
			$(this).find('.image-details').animate({'bottom': '0px'}, 'fast');
		}, function() {
			$(this).find('.image-details').animate({'bottom': '-45px'}, 'fast');
		});
	});
	/* ]]> */
	</script>
</body>

</html>

tobm_knows_best · 16.12.11 13:17

Merci....

...dann werde ich das mal heute nach Arbeit daheim gleich mal ausprobieren...
und natürlich entsprechend Feedback geben...

tobm_knows_best · 17.12.11 01:44

Hmmmm...also im Großen und Ganzen funktioniert´s ja wunderbar, aber irgendwie ist die grau Leiste die dann *hochfährt* leider ein klein wenig zu schmal und schliesst auch nicht richtig mit dem Bildende unten ab... hier: http://jsfiddle.net/CmAjQ/24/ passt´s komischerweise...

Sobald ich aber dann das ganze in den Quelltext mit einbaue, dann ist´s verschoben. Woran könnte das denn liegen...?

Hier mal der Quelltext - vielleicht habe ich ja was übersehen ?!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Effekt</title>

<style type="text/css">
/* <![CDATA[ */
.image-wrapper {
border:3px solid #EEE;
position:relative;
width:305px;
height:150px;
overflow:hidden;
}

.image-wrapper > img {
display:block;
}

.image-wrapper > .image-details {
position:absolute;
left:0px;
right:0px;
bottom:0px;
height:50px;
line-height:50px;
background:#000;
color:#fff;
opacity:.7;
}
/* ]]> */
</style>
</head>

<body>
<div class="image-wrapper">
<img src="http://www.bilderkiste.org/show/original/5132408221985/aktuelles_305x150px.png" alt="" />
<p class="image-details">
» <a href="#">Erfahren Sie mehr</a>
</p>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$('.image-details').css('bottom', '-50px').parent().hover(function() {
$(this).find('.image-details').animate({'bottom': '0px'}, 'fast');
}, function() {
$(this).find('.image-details').animate({'bottom': '-50px'}, 'fast');
});
/* ]]> */
</script>
</body>

</html>

Vielen Dank schonmal im Voraus für die Mühen :/...

***CPoly*** · 17.12.11 09:59

Benutze bitte in Zukunft zum Einbinden von Code die entsprechenden Tags.
Mindestens
[code]Dein Code[/code]
oder in dem Fall
[html]Dein Code[/html].

Ich gucke es mir gleich an.

Edit: Das p-Element hat je nach Browser diverse standard Styles. Unter anderem "margin". jsfiddle benutzt ein reset-css http://jsfiddle.net/css/normalize.css.
Es reicht wenn du explizit margin auf 0 setzt.

Code css:

.image-wrapper > .image-details {
    /*HIER*/
    margin:0;
    /*HIER*/
 
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
    line-height:50px;
    background:#000;
    color:#fff;
    opacity:.7;
}

tobm_knows_best · 17.12.11 13:19

Herrgott nochmal ******

Jetzt friemel ich da wieder rum und mein Browser zeigt´s immer noch nicht wie gewünscht an...egal wie ich´s ändere... Egal welche Werte - nun bewegt sich der schwarze Layer keinen Millimeter mehr

... Aber die Position ist schon mal die richtige

--> Großes DANKE******

Der Layer soll beim Herüberfahren aus den *Nichts* von unten nach oben (ca. 50px hoch) gehen. Und beim Herausfahren der Maus wieder nach unten verschwinden...

Tut mir leid, aber irgendwas hab ich wohl übersehen - bzw. mir fehlen leider die ein oder anderen Basics

Hir nochmal der Code mit Bitte um *Nachsicht* :P

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
    <title>Effekt</title>
 
    <style type="text/css">
    /* <![CDATA[ */
    .image-wrapper {
    border:3px solid #EEE;
    position:relative;
    width:305px;
    height:150px;
    overflow:hidden;
}
 
.image-wrapper > img {
        display:block;
}
 
.image-wrapper > .image-details {
    margin:0;
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
    line-height:50px;
    background:#000;
    color:#fff;
    opacity:.7;
}
    /* ]]> */
    </style>
</head>
 
<body>
    <div class="image-wrapper">
    <img src="http://www.bilderkiste.org/show/original/5132408221985/aktuelles_305x150px.png" alt="" />
    <p class="image-details">
        » <a href="#">Erfahren Sie mehr</a>
    </p>
</div>
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript">
    /* <![CDATA[ */
    $(function() {
        $('.image-details').css('bottom', '50px').parent().hover(function() {
                $(this).find('.image-details').animate({'bottom': '-50px'}, 'fast');
}, function() {
    $(this).find('.image-details').animate({'bottom': '50px'}, 'fast');
});
    /* ]]> */
    </script>
</body>
 
</html>

***CPoly*** · 17.12.11 13:35

In deinem JavaScript Code waren Syntaxfehler. Da fehlte eine Zeile.

Code javascript:

$(function() {
    $('.image-details').css('bottom', '50px').parent().hover(function() {
        $(this).find('.image-details').animate({'bottom': '-50px'}, 'fast');
    }, function() {
        $(this).find('.image-details').animate({'bottom': '50px'}, 'fast');
    });
});

Und du scheinst die Werte verändert zu haben. So müsste es passen, wie du es dir vorstellst.

Code javascript:

$(function() {
    $('.image-details').css('bottom', '-50px').parent().hover(function() {
        $(this).find('.image-details').animate({'bottom': '50px'}, 'fast');
    }, function() {
        $(this).find('.image-details').animate({'bottom': '-50px'}, 'fast');
    });
});

tobm_knows_best · 17.12.11 13:55

Zitat von CPoly

Und du scheinst die Werte verändert zu haben. So müsste es passen, wie du es dir vorstellst.

Code javascript:

$(function() {
    $('.image-details').css('bottom', '-50px').parent().hover(function() {
        $(this).find('.image-details').animate({'bottom': '50px'}, 'fast');
    }, function() {
        $(this).find('.image-details').animate({'bottom': '-50px'}, 'fast');
    });
});

Ja - die hab ich bewusst so geändert

Vielleicht haben wir auch ein wenig aneinander vorbeigeredet... :/

Hir mein Code nochmal - dann siehst du wie ich´s mir vorgestellt habe - DENN JETZT PASST´S****** JUHUUUU******

HTML-Code:

$(function() {
    $('.image-details').css('bottom', '-50px').parent().hover(function() {
        $(this).find('.image-details').animate({'bottom': '0px'}, 'fast');
    }, function() {
        $(this).find('.image-details').animate({'bottom': '-50px'}, 'fast');
    });
});

So und nun noch eine letzte Frage - ich will nicht gleich dreist rüberkommen...

Aber wie bekomme ich hinter dem Bild nun noch einen schwarzen *Schein nach aussen* hin? Ich weiss das es irgendwie machbar ist... und verdammt nochmal woher weisst du das eigentlich alles... ?!

MFG - und vielen vielen Dank nocheinmal...******
Tobm

***CPoly*** · 17.12.11 14:42

Jetzt hast du exakt den Code, den ich in meinem ersten Post hatte

. Nur hatte ich -45 anstatt -50, damit man sieht, dass da unten was ist.

Zitat von tobm_knows_best

Aber wie bekomme ich hinter dem Bild nun noch einen schwarzen *Schein nach aussen* hin? Ich weiss das es irgendwie machbar ist... und verdammt nochmal woher weisst du das eigentlich alles... ?!

Code css:

.image-wrapper {
    box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -moz-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
    -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
}

Zitat von tobm_knows_best

und verdammt nochmal woher weisst du das eigentlich alles... ?!

Das ist mein Job das alles zu wissen.

tobm_knows_best · 17.12.11 15:15

Wow - PERFEKT... ist mir denn irgendeine Lektüre zu empfehlen? Ich komm *leider* aus dem Printsektor - von dem her ist mein Wissen entsprechend begrenzt

Vielen Dank nocheinmal für die Hilfe

***CPoly*** · 17.12.11 15:29

Zitat von tobm_knows_best

ist mir denn irgendeine Lektüre zu empfehlen?

Da hab ich leider nichts zu empfehlen. Es wird immer wieder http://de.selfhtml.org/ genannt, aber ich habe mein Wissen aus unzähligen Quellen.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Frage zu einem Effekt

Frage zu einem Effekt.

Frage zu After Effekt

dümmste frage ever: dot effekt?!

Effekt Frage bei AlamDv2

E-Mail:

Abonnieren Abbestellen