Πώς να δημιουργήσετε μια κυλιόμενη οθόνη κύλισης με CSS3 και jQuery

  SPLASH SCREEN TITLE
  Τίτλος σελίδας
Σπίτι
Σχετικά με
Δουλειά
Επικοινωνία
  Το κατώτατο όριο είναι σταθερό, ακολουθώντας την αρχή της αδιαφορίας.  Ο Dolor, ο οποίος έχει την ευκαιρία να επιτύχει την εργασία του με την επιφύλαξη των ωραρίων του έργου, δεν έχει καμία αμφιβολία ότι ο ίδιος ο ίδιος έχει την ευκαιρία να επιτύχει το όνομά του και να επιτύχει το όνομά του.  Natus, τα ελάχιστα, τα σφάλματα, το porro facere cumperiente, το αποτέλεσμα της αναγκαστικής ανάπτυξης, το πραγματικό πρόβλημα, το ναυπηγικό πρότυπο, το quidem nemo enim, δεν έχει να κάνει με τον αρχιτέκτονα.  Σφάλμα, το οποίο θα μπορούσε να οδηγήσει σε μειωμένη ζημιά λόγω της ύπαρξής του, είναι σχεδόν αδύνατο να εξακριβωθεί.  Αρχιτέκτονας, η φυσική φούσα δεν συμμετέχει στην πραγματικότητα nihil repellat dolorum rerum quidem 

  © 2013 - Αρχική οθόνη

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }.fade-in {opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:0.3s;-moz-animation-duration:0.3s;animation-duration:0.3s;-webkit-animation-delay: 0.5s;-moz-animation-delay: 0.5s;animation-delay: 0.5s;}

.splash {    background: url('../img/splash-bg.jpg') center center;background-size: cover;background-attachment: fixed;position: fixed;top: 0;right: 0;bottom: 0;left: 0;min-height: 360px;z-index: 999;text-align: center;}

html, body {    width: 100%;height: 100%;}body { font: normal 1em/1.5em 'Open Sans', sans-serif; color: #333; margin-bottom: 20px; }.wrapper {max-width: 1000px;width: 90%;margin: 0 auto;}.splash-title {color: white;font-size: 3em;margin-top: 100px;text-shadow: 0 2px 10px #000;-webkit-animation-delay: 1s;-moz-animation-delay: 1s;animation-delay: 1s;}a.splash-arrow {color: white;font-size: 1.2em;position: absolute;bottom: 55px;left: 50%;margin-left: -25px;padding: 10px;width: 50px;height: 50px;font-weight: bold;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;animation-delay: 1.5s;border: 3px solid white;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}a.splash-arrow:hover {text-decoration: none;bottom: 50px;}@media all and (max-width: 690px) {header h1 { width: 100%; text-align: center; }header nav { float: none; display: inline-block; margin: 0 auto; }.splash-title {font-size: 2em;}}@media all and (max-width: 480px) {.splash-title {font-size: 1.5em;}}

$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"}  ),} $ (". splash-βέλος"), κάντε κλικ (λειτουργία () {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"}  , 800) ·))}) ·}) · $ (παράθυρο) .scroll (λειτουργία () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"}  , 100), $ ("wrapper"), καθυστέρηση (100) .animate ({"opacity": "1.0"}, 800),}),}).

Πώς να δημιουργήσετε μια οθόνη κύλισης με κύλιση με CSS3 και JQuery

Η σήμανση

SPLASH SCREEN TITLE

Τίτλος σελίδας

`Στυλ`

`jQuery`

`συμπέρασμα`