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

Probleme mit codepen.io

Dieses Thema im Forum "Off-Topic Plauderecke" wurde erstellt von kristalljunge, 13 Mai 2017.

  1. kristalljunge

    kristalljunge Mitglied

    Registriert seit:
    24 Mai 2014
    Beiträge:
    46
    Punkte für Erfolge:
    6
    Hi Leute,

    ich hab seitdem ich codepen.io für mich entdeckt hab immer wieder das "Problem", dass ich HTML, CSS und JS wie dort vorgegeben (meiner Meinung nach) richtig in meine HTML-Datei schreibe, der Effekt aber nicht erzeugt wird. Zur Verdeutlichung hier zwei Codepens, die ich wohl nicht richtig nutze:

    - http://codepen.io/team/nclud/pen/MwaGGE
    - http://codepen.io/noahblon/pen/wKvvxX

    Bei dem ersten Code habe ich zum Test CSS und JS in die HTML geschrieben, siehe hier. Und trotzdem funktioniert es nicht. Wieso? Natürlich habe ich irgendwo einen dummen Fehler, weil ich Neuling bin. Aber wär mega cool, wenn ihr mir evtl. helfen könntet:

    Code (text):
    1. <!DOCTYPE html>
    2.  
    3. <head>
    4. <style>
    5. #page-structure{
    6.   height: 100vh;
    7. }
    8.  
    9. .header-text {
    10.   h2, h1{
    11.    font-family: HelveticaNeue, Helvetica, Arial, "Lucida Grande", sans-serif !important;
    12.    font-weight: 900 !important;
    13.   }
    14. }  
    15. </style>
    16.    
    17. <script type="text/javascript">
    18.  
    19. DER JS CODE VON CODEPEN. Wenn ich ihn hier einfüge sind es zu viele Zeichen!
    20.  
    21. </script>
    22.  
    23.    
    24. </head>
    25. <body>
    26.  
    27.  
    28.  
    29.  
    30. <div id="initial-loader" class="padded"><span id="loader-text"></span></div>
    31.  
    32. <div id="main-body">
    33. <section id="page-structure" class="ajax">
    34. <header class="eliza height-95 black back-block-green-bottom-right">
    35.     <nav class="padded">
    36.     <a href="http://nclud.com" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/logo.svg" id="nclud-logo"></a>
    37.     </nav>
    38.     <div class="header-text grid_row padded-horizontal">
    39.       <h2 class="grid2">Revolutionary is our baseline. Different is our first step. And radical means we’re just getting started.</h2>
    40.       <h1 class="grid3">We are nclud.</h1>
    41.     </div>
    42.  
    43.     <div id="canvas">
    44.       <img id="image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/header-home-fallback.jpg" data-fallback="https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/header-home-fallback.jpg">
    45.     </div>
    46. </header>
    47.     </section>
    48. </footer>
    49.  
    50.  
    51.  
    52.  
    53. </body>
    54. </html>
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Sempervivum

    Sempervivum Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    125
    Punkte für Erfolge:
    18
    Diese Skripts erfordern das Einbinden von Bibliotheken. Du findest diese, wenn Du im JS-Editor links oben auf das Zahnradsymbol klickst.
     
  3. kristalljunge

    kristalljunge Mitglied

    Registriert seit:
    24 Mai 2014
    Beiträge:
    46
    Punkte für Erfolge:
    6
    Wahnsinn, wie simpel der Fehler war. Ich dachte ich muss irgendeine bestimmte Zielsprache dazucoden, wovon ich keine Ahnung hab oder so. Vielen Dank, wirklich!
     
  4. kristalljunge

    kristalljunge Mitglied

    Registriert seit:
    24 Mai 2014
    Beiträge:
    46
    Punkte für Erfolge:
    6
    Bei dem zweiten codepen ist allerdings kein JS oder CSS link (mit diesem marilyn monroe bild). Nur ein CSS Code. Wenn ich den einfüge, funktioniert es auch nicht. Was mache ich da falsch?
     
  5. Tronjer

    Tronjer Moderator Team Moderator

    Registriert seit:
    8 Oktober 2010
    Beiträge:
    4.758
    Punkte für Erfolge:
    83
    Hast du beim zweiten Pen SASS Code im CSS?
     
  6. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.669
    Punkte für Erfolge:
    83
    Vielleicht hast du übersehen, dass es sich dort im CSS-Frame um SCSS-Code handelt.
     
  7. kristalljunge

    kristalljunge Mitglied

    Registriert seit:
    24 Mai 2014
    Beiträge:
    46
    Punkte für Erfolge:
    6
    Wenn ich nach SCSS google, kommen nur CSS-Ergebnisse. Mhh kann mir da jemand helfen, was ich tun muss für "SCSS" zu nutzen?
     
  8. Tronjer

    Tronjer Moderator Team Moderator

    Registriert seit:
    8 Oktober 2010
    Beiträge:
    4.758
    Punkte für Erfolge:
    83
    Du musst SCSS zu CSS kompilieren.
     
  9. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.669
    Punkte für Erfolge:
    83
    Dann kann Google dich wohl nicht gut leiden :p

    FireShot ScreenCapture - 'SCSS - Google-Suche' - www_google_de_search_q=SCSS.jpg
     
  10. kristalljunge

    kristalljunge Mitglied

    Registriert seit:
    24 Mai 2014
    Beiträge:
    46
    Punkte für Erfolge:
    6
    ich weiß, ich nerve... aber ich verstehe es einfach nicht. muss ich dieses "ruby" installieren? muss jeder user dieses ruby installiert haben, um die animation zu sehen? ich check nicht was ich machen muss. sorry.
     
  11. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.669
    Punkte für Erfolge:
    83
    Wenn du auf einem Windows-PC entwickelst, ja.
    Nein, das betrifft den Entwickler.
     
  12. Tronjer

    Tronjer Moderator Team Moderator

    Registriert seit:
    8 Oktober 2010
    Beiträge:
    4.758
    Punkte für Erfolge:
    83
    Ruby ist nur notwendig, wenn man Compass zum kompilieren verwendet. Setzt man auf Grunt oder Gulp, bietet sich node-sass als Altenative an.
    https://github.com/sass/node-sass
     
  13. kristalljunge

    kristalljunge Mitglied

    Registriert seit:
    24 Mai 2014
    Beiträge:
    46
    Punkte für Erfolge:
    6
    Ok, nach mehreren Tutorials habe ich den Umgang mit Sass soweit verstanden.
    Das Problem liegt aber nicht bei SCSS, es muss wohl eher am Javascript liegen.

    Bei mir sind die Wolken (wie im codepen-Beispiel) sich zwar am bewegen, allerdings erstrecken sich bewegenden Wolken über das ganze Bild (nicht im oberen Bereich wie bei codepen), und des "Störbildschirm" (aka. Canvas) greift nicht.

    Der CSS-Code liegt im Ordner CSS (Eins zu eins kopiert) und das Javascript hab ich via <script></script> einmal versucht in den Header zu kopieren, und ebenfalls extern aus dem css-Ordner versucht zu kopieren. Es will einfach nicht funktionieren:

    http://codepen.io/Digiben/pen/oLLRZx
    http://yeezmag.de/uniporn/index2.php

    Weiß irgendwer was ich falsch mache?
     
  14. Sempervivum

    Sempervivum Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    125
    Punkte für Erfolge:
    18
    Mach dich mal mit den Developertools deines Browser vertraut und wirf einen Blick auf die Console:
    Das entscheidende dafür, dass kein Rauschen zu sehen ist, ist wahrscheinlich, dass Du kein Canvas-Tag definiert hast.
    Auch das HTML solltest Du bereinigen: Kein Body-Tag.