Float box design + script fehler suche.

A

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
 
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.
 
Sempervivum hat gesagt.:
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.
Zum Vergrößern anklicken....

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 hat gesagt.:
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.
Zum Vergrößern anklicken....
Ps: habe viel fon die gelernt. Wie du siehst habe ich deinen input soweit ich es hinbekommen habe widerverwendet.
 
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.
Zum Vergrößern anklicken....
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.
 
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');
        });
    })();
 
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.
 
Sempervivum hat gesagt.:
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.
Zum Vergrößern anklicken....

Hay danke für die hilfe.

Was sagst du sonst zum gerüst meiner seite? Besser wie der vorgänger?
 
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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück