Float box design + script fehler suche.

Andrin.Spitzer

Erfahrenes Mitglied
Hay ich hatte erst gerade einen guten Beitrag hier im Forum wollte nun aber nach Überarbeitung des Quellcode nun neu anfangen.

Alter Beitrag

Meine Website

Was ich wissen möchte ist:

-Ist der Code so sauber und Regel komm-form? (bin Anfänger)
-Warum funktioniert mein Parralax scrolling effect nicht mehr.
-warum ändert die Nav leiste die Farbe nicht mehr und wie sollte ich sie fixieren am oberen ende?
-und wie bekomme ich mein Kontaktformular und download bereich etwa so hin.
Unbenannt.png

-und einfach mal gefragt wäre es möglich die <h1> elemente transparent zu gestalten das die schrift durch das weiße div Element das Hintergrundbild scheint?



Freundliche Grüsse
 

Sempervivum

Erfahrenes Mitglied
Positiv fällt mir schon mal auf, dass die riesige Überschrift nicht mehr da ist und man dadurch nicht mehr so viel scrollen muss.
Eigentlich ist die Überschrift schon OK, da man dann gleich sieht, worum es auf der Seite geht. Nur eben nicht so übergroß.

Aber warum hast Du denn alles über den Haufen geworfen? Skript und HTML müssen zusammen passen. Vorher wurde main gescrollt und mit der neuen Version body. Daher funktioniert das Javascript nicht mehr.
 

Andrin.Spitzer

Erfahrenes Mitglied
Positiv fällt mir schon mal auf, dass die riesige Überschrift nicht mehr da ist und man dadurch nicht mehr so viel scrollen muss.
Eigentlich ist die Überschrift schon OK, da man dann gleich sieht, worum es auf der Seite geht. Nur eben nicht so übergroß.

Aber warum hast Du denn alles über den Haufen geworfen? Skript und HTML müssen zusammen passen. Vorher wurde main gescrollt und mit der neuen Version body. Daher funktioniert das Javascript nicht mehr.

Hay danke für die antwort.

Mir wurde das ganze zu unübersichtlich. Habe mir daher einige informationen zusammen gesucht und das gerüst neu konstruiert. Ich glaube es wäre nicht gelogen wenn man sagt das ich mir so viel code gespart habe und es jetzt ein saubereren code ist.
 

Andrin.Spitzer

Erfahrenes Mitglied
Hay danke für die antwort.

Mir wurde das ganze zu unübersichtlich. Habe mir daher einige informationen zusammen gesucht und das gerüst neu konstruiert. Ich glaube es wäre nicht gelogen wenn man sagt das ich mir so viel code gespart habe und es jetzt ein saubereren code ist.
Ps: habe viel fon die gelernt. Wie du siehst habe ich deinen input soweit ich es hinbekommen habe widerverwendet.
 

Sempervivum

Erfahrenes Mitglied
Ich glaube es wäre nicht gelogen wenn man sagt das ich mir so viel code gespart habe und es jetzt ein saubereren code ist.
Das ist natürlich ein Grund. Selber bevorzuge ich auch das Prinzip "KISS"- "keep it simple and stupid". Häufig, wenn etwas sehr kompliziert wird, liegt es daran, dass man es noch nicht richtig verstanden hat.
Aus dem Grunde gefällt mir auch das Layout in deiner Grafik nicht so gut: Zu stark zergliedert. Aber wenn Du es so möchtest, werde ich mal daran gehen und es umzusetzen. Ebenso das Javascript wieder zum Laufen bringen.
 

Sempervivum

Erfahrenes Mitglied
Javascript funktioniert so:
Code:
    (function () {
        var parallax = document.querySelectorAll("body"),
            speed = -0.2;
        var vnav = document.querySelector('nav'),
            deltaScrollPos = 50;
        window.addEventListener('scroll', () => {
            var scrollPos = document.documentElement.scrollTop;
            [].slice.call(parallax).forEach(function (el, i) {
                var elBackgrounPos = "10% " + (scrollPos * speed) + "px";
                el.style.backgroundPosition = elBackgrounPos;
            });
            if (scrollPos < deltaScrollPos)
                vnav.classList.remove('scrolled');
            else
                vnav.classList.add('scrolled');
        });
    })();
 

Sempervivum

Erfahrenes Mitglied
Und mein Entwurf für das Kontakt-Layout:

CSS:
            .container-contact {
                display: flex;
            }

            .container-contact>div.left {
                flex: 2;
                display: grid;
                grid-template-columns: 1fr 2fr;
                grid-template-areas: "heading-text heading-text"
                    "name  message"
                    "email  message"
                    "phone message";
            }

            .container-contact>div.right {
                flex: 1;
            }

            .heading-text {
                grid-area: heading-text;
            }

            #name {
                grid-area: name;
            }

            #email {
                grid-area: email;
            }


            #phone {
                grid-area: phone;
            }

            #message {
                grid-area: message;
            }
HTML:
        <div class="container-contact">
            <div class="left">
                <p class="heading-text">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore
                    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet clita kasd
                    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                <input name="name" id="name" placeholder="Name*" />
                <input name="email" id="email" placeholder="E-Mail*" />
                <input name="Tel" id="phone" placeholder="Tel" />
                <textarea name="text" id="message" placeholder="Nachricht..."></textarea>
            </div>
            <div class="right">

            </div>
        </div>
Den rechten Container kannst Du dann selbst versuchen.
 

Andrin.Spitzer

Erfahrenes Mitglied
Das ist natürlich ein Grund. Selber bevorzuge ich auch das Prinzip "KISS"- "keep it simple and stupid". Häufig, wenn etwas sehr kompliziert wird, liegt es daran, dass man es noch nicht richtig verstanden hat.
Aus dem Grunde gefällt mir auch das Layout in deiner Grafik nicht so gut: Zu stark zergliedert. Aber wenn Du es so möchtest, werde ich mal daran gehen und es umzusetzen. Ebenso das Javascript wieder zum Laufen bringen.

Hay danke für die hilfe.

Was sagst du sonst zum gerüst meiner seite? Besser wie der vorgänger?
 

Sempervivum

Erfahrenes Mitglied
Doch, das Parallax funktioniert, wenn man genau hinsieht. Damit der Effekt kräftiger wird, kannst Du den Faktor erhöhen:
Code:
        var parallax = document.querySelectorAll("body"),
            speed = -0.5; // <-- hier
 

Neue Beiträge