Probleme mit codepen.io

Community Off-Topic Plauderecke
1

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:

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]

#page-structure{ height: 100vh; }

.header-text {
h2, h1{
font-family: HelveticaNeue, Helvetica, Arial, „Lucida Grande“, sans-serif !important;
font-weight: 900 !important;
}
}

Revolutionary is our baseline. Different is our first step. And radical means we’re just getting started.

We are nclud.

<div id="canvas">
  <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">
</div>
[/CODE]
2

Wahnsinn, wie simpel der Fehler war. Ich dachte ich muss irgendeine bestimmte Zielsprache dazucoden, wovon ich keine Ahnung hab oder so. Vielen Dank, wirklich!

3

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?

4

Hast du beim zweiten Pen SASS Code im CSS?

5

Vielleicht hast du übersehen, dass es sich dort im CSS-Frame um SCSS-Code handelt.

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?

7

Du musst SCSS zu CSS kompilieren.

8

Dann kann Google dich wohl nicht gut leiden :stuck_out_tongue:

[ATTACH=full]4637[/ATTACH]

9

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.

10

Wenn du auf einem Windows-PC entwickelst, ja.
[ul]
[li] http://sass-lang.com/install [/li][/ul]

Nein, das betrifft den Entwickler.
[ul]
[li] http://webkrauts.de/artikel/2011/effiziente-css-entwicklung-mit-sass-und-compass-teil-1 [/li][li] http://webkrauts.de/artikel/2011/effiziente-css-entwicklung-mit-sass-und-compass-teil-2 [/li][li] http://www.holgerkoenemann.de/sass-fuer-einsteiger-teil1-hintergruende-installation/ [/li][/ul]

11

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

12

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 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?