Website einwerfen
|
| Verfasser |
Nachricht |
|
Beiträge: 792
Bewertung: 18
Registriert seit: Mar 2013
Status:
offline
|
Website einwerfen
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
Nagel hier [ X ] ansetzen und SponsorBoard ändert die Farbe.
|
|
| 25.11.2015 16:15 |
|
|
Beiträge: 43
Bewertung: 0
Registriert seit: Apr 2013
Status:
offline
|
RE: Website einwerfen
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.
|
|
| 25.11.2015 17:04 |
|
|
Beiträge: 792
Bewertung: 18
Registriert seit: Mar 2013
Status:
offline
|
RE: Website einwerfen
Hay,
leider verstehe ich das nicht so richtig
Ich füge dieses Script in den header ein :
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Und diesen Code vor dem /body :
<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 
Nagel hier [ X ] ansetzen und SponsorBoard ändert die Farbe.
Dieser Beitrag wurde zuletzt bearbeitet: 25.11.2015 19:08 von HardwareNow.
|
|
| 25.11.2015 19:05 |
|
|
Beiträge: 43
Bewertung: 0
Registriert seit: Apr 2013
Status:
offline
|
RE: Website einwerfen
Ja soweit richtig, dann musst du noch die Css Datei ([Link: Registrierung erforderlich]) im Header einfügen.
<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.
<body id="test" class="slideUp">
So müsste dein Body Tag dann aussehen.
Dieser Beitrag wurde zuletzt bearbeitet: 25.11.2015 22:10 von TheDeception5.
|
|
| 25.11.2015 22:10 |
|
|
Beiträge: 792
Bewertung: 18
Registriert seit: Mar 2013
Status:
offline
|
RE: Website einwerfen
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 :
.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%);
}
}
Nagel hier [ X ] ansetzen und SponsorBoard ändert die Farbe.
Dieser Beitrag wurde zuletzt bearbeitet: 26.11.2015 11:55 von HardwareNow.
|
|
| 26.11.2015 11:48 |
|
|
Beiträge: 2.230
Bewertung: 12
Registriert seit: Dec 2009
Status:
offline
|
|
| 26.11.2015 12:16 |
|
|
Beiträge: 792
Bewertung: 18
Registriert seit: Mar 2013
Status:
offline
|
RE: Website einwerfen
Vielen Dank an : TheDeception5
Auch an Kaso
Habe es durch die Hilfe von TheDeception5 lösen können
Nagel hier [ X ] ansetzen und SponsorBoard ändert die Farbe.
|
|
| 26.11.2015 19:23 |
|
|
