+- Sponsor-Board.de (https://www.sponsor-board.de)
+-- Forum: Community (/forumdisplay.php?fid=56)
+--- Forum: Hilfe (/forumdisplay.php?fid=102)
+---- Forum: Scripting (/forumdisplay.php?fid=108)
+---- Thema: Website einwerfen (/showthread.php?tid=57844)
Website einwerfen - HardwareNow - 25.11.2015 16:15
Hallo Liebe SB Mitglieder,
Unswar wollte ich fragen wie das genau funktioniert das wenn man z.B. [Link: Registrierung erforderlich] aufruft das die Website kurz beim aufrufen eingeblendet bzw. Eingeworfen wird .
Ich meine diesen Effekt wenn man die Seite aufruft.
Danke in vorraus
RE: Website einwerfen - TheDeception5 - 25.11.2015 17:04
Das geht mit Css und Js Animations "Cheat Sheets" wie z.B. hiermit: [Link: Registrierung erforderlich]
Den Code einfach in deine Website einfügen und natürlich anpassen das der Effekt beim laden der Seite gestartet wird.
RE: Website einwerfen - HardwareNow - 25.11.2015 19:05
Hay,
leider verstehe ich das nicht so richtig
Ich füge dieses Script in den header ein :
Zitat:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Und diesen Code vor dem /body :
Zitat:
<script>
$(window).scroll(function() {
$('#animatedElement').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slideUp");
}
});
});
</script>
$(window).scroll(function() {
$('#animatedElement').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slideUp");
}
});
});
</script>
Oder welchen Code muss ich genau wo einfügen verstehe das was da steht nicht wirklich 
RE: Website einwerfen - TheDeception5 - 25.11.2015 22:10
Ja soweit richtig, dann musst du noch die Css Datei ([Link: Registrierung erforderlich]) im Header einfügen.
PHP-Code:
<script>
$(window).onload(function() {
$('#test').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).onload();
$(this).addClass("slideUp");
});
});
</script>
Diesen Code musst du vor /body einfügen.
Die ID Test in dem Code musst du dem body Tag zuweißen mit id="Test" oder einem anderen namen. Als letztes musst du noch als Klasse vom body die gewünschte Animation setzten.
PHP-Code:
<body id="test" class="slideUp">
So müsste dein Body Tag dann aussehen.
RE: Website einwerfen - HardwareNow - 26.11.2015 11:48
Vielen Dank
Eine letzte Frage die CSS Datei wie füge ich die ein muss ich einfach den text kopieren und immer header einfügen oder wie genau ging das nochmal ?
Danke im vorraus
#müsste ich einfach z.b wenn ich den effekt Slide up haben möchte diesen Code im HEader einfügen :
PHP-Code:
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
@keyframes slideUp {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(-8%);
}
65%{
transform: translateY(4%);
}
80%{
transform: translateY(-4%);
}
95%{
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
}
50%{
-webkit-transform: translateY(-8%);
}
65%{
-webkit-transform: translateY(4%);
}
80%{
-webkit-transform: translateY(-4%);
}
95%{
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
RE: Website einwerfen - KingKaSo - 26.11.2015 12:16
Hallo Nihat,
erstell Dir ein .css Datei und binde die .css Datei in deiner .html Datri ein. Das ist einfacher und ist auch übersichtlicher, als wenn du alles in die .html Datei einfügst.
RE: Website einwerfen - HardwareNow - 26.11.2015 19:23
Vielen Dank an : TheDeception5
Auch an Kaso
Habe es durch die Hilfe von TheDeception5 lösen können