[Release]Inprogress-Template (HTML,CSS-Files included)

[Fydes]

Hi Dudes,

da ich mein altes Projekt derweil nicht weiterführe, sondern an einem Rework arbeite, release ich euch meine alte Inprogress-Page samt Code.



Eine kleine Animation ist dabei, diese `liest` sozusagen einen Text vor. Sprich Buchstabe für Buchstabe.

Im Anhang ist der gecodete Teil, Code und Design sind natürlich von mir.

Positives sowie negatives Feedback ist natürlich gerne gesehen.

Mit besten Grüßen
mabua

[Aze /..]

Für ne Inprogress Page total ausreichend, Design ist auch ansprechend. Danke fürs teilen!

[Kyuso /..]

Schöne Sache aufjedenfall. Danke für's Release.

Jedoch wäre es schön wenn noch höflichkeitshalber die .PSD mit dabei wäre, da im Background das alte Serverlogo bzw. Name doch sehr stört.

[MrTherzon]

Sieht Gut aus, vollkommend ausreichend.
PSD wäre cool.

[/exit]

Simple aber reicht aus.

[.Kornet]

sieht sehr gut aus danke

[Jantux]

Wie immer <3

Danke dir <3

[#Metho]

Du solltest dir vielleicht Gedanken machen, wann du ids und wann du classes verwenden möchtest, sofern du absichtlich nur ein Element beschreibst, nutze am besten Ids und definiere exakte Selektierungen:

PHP Code:

.class1 > .class2 > .class3 {} /* statt */ .class3 {}
#id /* statt */ .class1 #id {} /* etc. */ 


Hier mal einige Fehler die mir im CSS aufgefallen sind (undokumentiert):

 Spoiler

PHP Code:

body {
    font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
    background: #000 url("img/background.jpg") no-repeat center center fixed; /* rgba(0, 0, 0, 9); */
    
    /* color: #FFFFFF; */
    
    color: #FFF;
    line-height: 25px;
    
    /* <reset> */
    margin: 0;
    /* </reset> */
}

#wrapper {
    width: 1024px;
    margin: 0 auto;
    /* padding: 0 auto; */
}

#wrapper .text-block  {
    /* .text-block  { */
    /* float: right; */
    
    width: 500px;
    position: absolute;
    top: 35%;
    left: 50%;
    display: none;
}

h1 {
    /* position: relative; */
    /* top: 15px; */
    margin: 0 0 5px;
}

hr {
    /* border: 0; */
    
    border: none;
    height: 1px;
    background: #FFF;
}

#footer {
    background: rgba(0, 0, 0, .6);
    
    /* width: 100%; */
    
    height: 100px;
    /* position: absolute; */
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
}

#footer span {
    /* position: relative; */
    /* top: 25px; */
    
    margin: 25px 0 0;
    display: inline-block;
} 


#EDIT Wie ich's in JavaScript gemacht hätte

PHP Code:

var text = document.getElementById('text');

(function (e, t, z) { var c = 0, l = t.length; i = window.setInterval(function () { (c < l) ? e.textContent += t[c++] : window.clearInterval(i) }, z) }(text, 'Dies ist ein Text', 100)); 


#/EDIT
Danach gibt's die Funktion:

PHP Code:

setInterval() | clearInterval() // Alternativ zu setTimeout() | clearTimeout() 


Und du kannst

PHP Code:

target 


auch an die Funktion binden mit

PHP Code:

(function () {}).bind(target) 


(dies ist aber eher nebensächlich und nur von Vorteil, solltest du viele Pseudo-Klassen haben)

Zudem auch

PHP Code:

HTMLElement.appendChild(/*text | document.createTextNode() */ ) /* und */ nodeValue /* oder */ innerHTML /* oder */ innerText/* oder */ textContent 


verwenden, da du ja sonst wieder ein jQuery-Object generieren musst, was unnötig zeit beansprucht.

Ich könnte jetzt noch public, privat, anonym oder nicht ansprechen, aber das würde nun den Umfang sprengen für die wenigen Zeilen Code.

Ganz, noch angesprochen, ich finde das Design sehr ansprechend, es gefällt mir sehr gut und die Dateien sind auch nicht allzu schwer zu bearbeite (vllt. hätte man noch eine .txt machen können, wo der Benutzer den Text reinschreibt und man diese dann mit Javascript öffnet und ausliest).

Wünsche mir du machst vllt nochmal einen Background, weil die sehen echt gelungen aus.

[悪地城]

Klein aber Fein

Danke

[ライト]

Ich mag das Hintergrund Bild gibt es dazu eine PSD?

[Fydes]

Ich habe den Namen aus dem Background retuschiert, so könnt ihr diesen nun auch verwenden. Leider finde ich die Photoshop Datei nicht mehr, lediglich die alte Beta-Page.


Besteht dafür auch Interesse?

Mit besten Grüßen
mabua

[ライト]

Originally Posted by mabua

Ich habe den Namen aus dem Background retuschiert, so könnt ihr diesen nun auch verwenden. Leider finde ich die Photoshop Datei nicht mehr, lediglich die alte Beta-Page.


Besteht dafür auch Interesse?

Mit besten Grüßen
mabua

Also ich hätte interesse daran

[MrTherzon]

Hätte auch Intresse an der Beta-Page.

[ProfessorEnte]

Schaut sehr interessant aus!