1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Frage CSS Animation soll nicht auf den Startpunkt zurück springen

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von Heinz3000, 6 September 2017.

  1. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    602
    Punkte für Erfolge:
    43
    Zuletzt bearbeitet: 8 September 2017
    Heinz3000 gefällt das.
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Heinz3000

    Heinz3000 Neues Mitglied

    Registriert seit:
    6 September 2017
    Beiträge:
    15
    Punkte für Erfolge:
    1
    Super, Danke!

    Ich hatte ein Cache Problem.
    Resultat poste ich nach Fertigstellung.

    MfG Heinz
     
  3. Heinz3000

    Heinz3000 Neues Mitglied

    Registriert seit:
    6 September 2017
    Beiträge:
    15
    Punkte für Erfolge:
    1
    Hallo
    Ich hätte noch eine Frage.
    Wie kann ich am besten diesen Footer-Effekt
    http://scrollme.nckprsn.com/
    in das obere Projekt einfügen?

    Ich habe immer Probleme damit.
    Oder gibt es überhaupt eine bessere Lösung für diesen Footer-Effekt?
    Vielen Dank im Voraus
     
  4. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    602
    Punkte für Erfolge:
    43
    Woran scheitert es denn? Wenn man sich den Quelltext dieser Seite ansieht, scheint es doch ziemlich einfach zu sein:
    Code (text):
    1.     <footer class="footer scrollme">
    2.  
    3.         <div
    4.             class="footer_block animateme"
    5.             data-when="enter"
    6.             data-from="1"
    7.             data-to="0"
    8.             data-rotatex="90"
    9.         >
    10.  
    11.             <div class="wrapper">
    12.  
    13.                 <h3>Also on this page:</h3>
    14.  
    15.                 <ul>
    16.                     <li><a href="http://www.pixilate.com/font/bellota/">Bellota</a> for the headings.</li>
    17.                     <li><a href="http://www.droidfonts.com/droidfonts/">Droid Serif &amp; Droid Mono</a> for the rest of the type.</li>
    18.                     <li><a href="http://fittextjs.com/">FitText.js</a> to make the big heading big.</li>
    19.                 </ul>
    20.  
    21.                 <p>Made by <a href="http://nckprsn.com">Nick Pearson</a></p>
    22.  
    23.             </div><!-- wrapper -->
    24.  
    25.         </div>
    26.  
    27.     </footer>
    Dort solltest Du nur den Inhalt von .wrapper durch deinen eigenen ersetzen müssen.
     
    Heinz3000 gefällt das.
  5. Heinz3000

    Heinz3000 Neues Mitglied

    Registriert seit:
    6 September 2017
    Beiträge:
    15
    Punkte für Erfolge:
    1
    Ich denke, ich bekomme es nicht zum laufen wegen
    Code (text):
    1. .scroll {
    2.   overflow-y: auto;
    3. }
    Kannst du es BITTE in jsfiddle.net testen?
     
  6. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    602
    Punkte für Erfolge:
    43
    Verstehe. Scrollme baut offenbar darauf auf, dass das gesamte Fenster gescrolled wird. Dann müsste man es wahrscheinlich so machen:
    https://pastebin.com/8iidG27R
    Fiddle habe ich nicht zum Laufen bekommen, weil ich kein CDN für Scrollme gefunden habe.
    Noch nicht ganz perfekt aber das Prinzip funktioniert.
     
    Heinz3000 gefällt das.
  7. Heinz3000

    Heinz3000 Neues Mitglied

    Registriert seit:
    6 September 2017
    Beiträge:
    15
    Punkte für Erfolge:
    1
    Vielen Dank für deine Hilfe,
    aber die Seite/Effekt funktioniert leider nicht.
     
  8. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    602
    Punkte für Erfolge:
    43
    Hast Du auch die die JS-Datei von Scrollme heruntergeladen? Wie Du hier siehst:
    Code (text):
    1. <script src="js/jquery.scrollme.js"></script>
    wird sie aus dem Verzeichnis js eingezogen. Natürlich kannst Du das auch ändern.
     
  9. Heinz3000

    Heinz3000 Neues Mitglied

    Registriert seit:
    6 September 2017
    Beiträge:
    15
    Punkte für Erfolge:
    1
    Ich habe deine Hilfe leider nicht zum laufen bekommen,
    aber trotzdem vielen Dank.
    Ich habe es anders gelöst, Resultat poste ich nach Fertigstellung.
    MfG Heinz