|
|||
Probleme bei scrollTop() funktion
Hallo, ich habe 2 Bilder die erscheinen sollen wenn man herunterscrollt.
Nun habe ich das problem das wenn ich das erste mal auf die seite komme die bereits erscheinen. und dann wenn ich bisschen herunterscrolle verschwinden die bis zu dem punkt wie unten im code eingegeben. Wie kann ich die so machen das sie nur 1 mal laden wenn ich runterscrolle und dannach immer bleiben??? Dazu sollten die nicht gleich am anfang sichtbar sein. Danke für die hilfe. Code:
$(document).ready(function(){ $(document).scroll(function() { var top = $(document).scrollTop(); console.log(top); if (top > 380) $('.screen1').show(); if (top < 250) $('.screen1').hide(); if (top > 380) $('.screen2').show(); if (top < 250) $('.screen2').hide(); }); }); |
Sponsored Links |
|
|||
html
HTML-Code:
<div class="left-div-img animated screen1 bounceInLeft"> <img src="images/Stuermsfs/diagram1.png" width="733" height="550"> </div> <div class="right-div-img animated screen2 bounceInRight"> <img src="images/Stuermsfs/diagram2.png" width="733" height="550"> </div> CSS Code:
.animated{ -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -ms-animation-fill-mode:both; -o-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:2s; -moz-animation-duration:2s; -ms-animation-duration:2s; -o-animation-duration:2s; animation-duration:2s; } .animated.hinge{ -webkit-animation-duration:2s; -moz-animation-duration:2s; -ms-animation-duration:2s; -o-animation-duration:2s; animation-duration:2s; } .animated.flip { -webkit-backface-visibility: visible !important; -webkit-animation-name: flip; -moz-backface-visibility: visible !important; -moz-animation-name: flip; -o-backface-visibility: visible !important; -o-animation-name: flip; backface-visibility: visible !important; animation-name: flip; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { opacity: 1; -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(30px); } 80% { -o-transform: translateX(-10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; visibility: visible !important; } .screen1 { position: absolute; z-index: 20; visibility: hidden; opacity: 1 !important; margin: 0 auto; right: 55%;/*55*/ } .screen2 { position: absolute; z-index: 20; visibility: hidden; opacity: 1 !important; left: 55%;/*25*/ } .left-div-img { width: 500px; } .right-div-img { width: 500px; } .left-div-img img { max-width: 100%; height: auto; } .right-div-img img{ max-width: 100%; height: auto; } |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
[PROTOTYPE] Funktion erst beenden, wenn Ajax Aufruf abgeschlossen ist | naitsab | Javascript & Ajax | 3 | 09.04.2009 16:41 |
Code einer bestehenden Funktion hinzufügen | cybertron | Javascript & Ajax | 13 | 01.01.2009 16:53 |
mysql Verbindung in Form einer Funktion | woofz | Serveradministration und serverseitige Scripte | 13 | 17.07.2008 11:58 |
Funktion gibt Array nicht zurück | Schneemann | Serveradministration und serverseitige Scripte | 8 | 05.05.2008 02:14 |
[PHP] Funktion zum Optimieren von CSS | Floele | Serveradministration und serverseitige Scripte | 2 | 13.08.2005 11:31 |