Web jQuery, CSS etc. Login Page

Dieses Thema im Forum "Programmierung" wurde erstellt von Snycs, 18. September 2016.

  1. Snycs
    Offline

    Snycs

    Registriert seit:
    5. März 2016
    Beiträge:
    15
    Ort:
    Vohenstrauss, Bayern, Deutschladn
    Minecraft:
    SnycsYT
    Hallo ich habe letztens ein Wordpress Plugin entdeckt, dass eigentlich als Wartungsmodusplugin gedacht ist, aber eine eingebaute Login Funktion hat. Diese Seite, die das Plugin erstellt gefällt mir relativ gut und ich möchte sie für ein Projekt nachbauen. Da ich derzeit noch relativ wenig Ahnung von Webprogrammierung (php, jQuery, CSS (auch wenn das nicht direkt Programmiersprachen sind)) habe, wollte ich einfach mal nachfragen ob es schwierig ist soetwas zu realisieren. Ich habe sowohl das Plugin als auch die Seite hier verlinkt.

    Wäre froh, wenn mir jemand sagen kann, mit welchen Sprachen das am besten/einfachsten geht, oder falls jemand Langeweile hat, mir die Seite nachzubauen.

    Den Login/Register hab ich schon fertig. Bräuchte also nur noch das Design.

    Mit freundlichen Grüßen

    Snycs
     
    #1
  2. TheSimufreak
    Offline

    TheSimufreak

    Registriert seit:
    28. Juni 2012
    Beiträge:
    42
    Ich bin zwar kein Experte was jQuery angeht, aber ich denke mal dass das bis auf den Hintergrund, der sich beim ausklappen nach hinten verschiebt, keine allzu große Herausforderung darstellen sollte. Hier ein Link wie du Elemente drehen lassen kannst

    Update:
    Das hier kann dir da vielleicht weiter helfen

    Update 2:
    In der CSS Datei habee ich folgendes gefunden
    Code (CSS):
    1. body.open-login-form > .main-container {
    2.     -webkit-perspective: 1000px;
    3.     perspective: 1000px;
    4.     -ms-transform-origin: 0 50%;
    5.     -o-transform-origin: 0 50%;
    6.     -moz-transform-origin: 0 50%;
    7.     -webkit-transform-origin: 0 50%;
    8.     transform-origin: 0 50%;
    9.     -ms-transform:  perspective(1920px)  rotate3d(0, 1, 0, 9deg);
    10.     -webkit-transform:  perspective(1920px) rotate3d(0, 1, 0, 9deg);
    11.     transform:   perspective(1920px) rotate3d(0, 1, 0, 9deg);
    12.     -webkit-backface-visibility: hidden;
    13.     -moz-backface-visibility: hidden;
    14.     -ms-backface-visibility: hidden;
    15.     backface-visibility: hidden;
    16.  
    17. }
    Noch ein Update :D
    Habe dir für den Hintergrundeffekt ein kleines Beispielprojekt gebastelt, aus dem du dir dann die benötigten Sache abschauen kannst. Zum Ausprobieren einfach in eine HTML Datei kopieren und mit einem anderen Browser als IE öffnen ;)
    HTML:
    1.  
    2. #square{
    3.     height: 480px;
    4.     width: 320px;
    5.     background-color: blueviolet;
    6.     background-image: url('http://media-cache-ak0.pinimg.com/736x/76/bf/d6/76bfd66cd411e9ca67c85c9e002d3894.jpg')
    7. }
    8.  
    9. .tilt_front{
    10.  
    11.     transform-origin: 0 50%;
    12.     transform: rotate3d(0,1,0,0deg) perspective(0px);
    13.     transition: 1s transform;
    14.  
    15. }
    16.  
    17. .tilt_back{
    18.  
    19.     transform-origin: 0 50%;
    20.     transform: perspective(600px) rotate3d(0,1,0,50deg);
    21.     transition: 5s transform;
    22.  
    23. }
    24.  
    25.  
    26.  
    27. function tiltBack(element){    document.getElementById(element).className = 'tilt_back'; }
    28.  
    29. function tiltFront(element){ document.getElementById(element).className = 'tilt_front';}
    30.  
    31.  
    32.  
    33. </head>
    34.     <body>
    35.       <div style="background-color: red; width: 320px; height: 480px; background: url('http://nerdreactor.com/wp-content/uploads/2014/05/doctor-who-tenth-cubicle.jpg') -150px 0;">
    36.         <div id="square"></div>
    37.       </div>
    38.       </br>
    39.       </br>
    40.       <button onClick="tiltBack('square');">Open Tardis</button>
    41.       <button onClick="tiltFront('square');">Close Tardis</button>
    42.     </body>
    43. </html>
     
    #2
  3. Snycs
    Offline

    Snycs

    Registriert seit:
    5. März 2016
    Beiträge:
    15
    Ort:
    Vohenstrauss, Bayern, Deutschladn
    Minecraft:
    SnycsYT
    Vielen dank für deine hilfe:) du hast mir sehr weiter geholfen^^

    Eine Frage habe ich allerdings noch^^ wie kann ich diesen anmelde slider machen? :eek:
     
    #3
  4. TheSimufreak
    Offline

    TheSimufreak

    Registriert seit:
    28. Juni 2012
    Beiträge:
    42
    Das hört man gerne :)

    Da müsstest du einen Container definieren und den mit jQuery oder der translate-transformation von CSS3 umherschieben:
    jQuery: weiter unten auf der Website sind Beispiele. Da kannst du dann z.B. mit margin arbeiten:

    Code (Javascript):
    1. #login_panel{
    2.  
    3. margin-left:100px;
    4.  
    5. }
    6.  
    7. . . .
    8.  
    9. $("#login_panel").animate({
    10. margin-left:  0px;
    11. }, 1000, function(){});
    CSS3:
    HTML:
    1. .login_panel{
    2.  
    3. transformation: translate(-100px, 0);
    4. transition: 1s transformation;
    5.  
    6. }
    So wird das Panel um 100 Pixel nach Links verschoben.
     
    #4
    Snycs gefällt das.
  5. Snycs
    Offline

    Snycs

    Registriert seit:
    5. März 2016
    Beiträge:
    15
    Ort:
    Vohenstrauss, Bayern, Deutschladn
    Minecraft:
    SnycsYT
    muss ich den JavaScript code in eine extra datei schreiben oder kann ich den direkt in die Seite rein schreiben?
     
    #5
  6. TheSimufreak
    Offline

    TheSimufreak

    Registriert seit:
    28. Juni 2012
    Beiträge:
    42
    Du kannst den Code mit den <script> Tags in die HTML-Datei reinschreiben
    Code (Javascript):
    1.  
    2. <script>
    3. $("#login_panel").animate({
    4. margin-left:  0px;
    5. }, 1000, function(){});
    6. </script>
     
    #6