Κινούμενο τοπίο με χρήση CSS και jQuery | Μετά την κυκλοφορία του j...

Κινούμενο τοπίο με χρήση CSS και jQuery

Μετά την κυκλοφορία του jQuery, πολλοί σχεδιαστές ιστοσελίδων που αντιμετώπιζαν προβλήματα με το javascript, «μετακόμισαν» στο jQuery λόγω του μεγάλου εύρους από διάφορα εφέ που υποστηρίζει, συμπεριλαμβανομένης της συμβατότητάς του με διαφορετικούς host ιστοσελίδων. Το jQuery είναι πλέον ένα από τα πρωταγωνιστικά πλαίσια εργασίας Javascipt. Mόνο  βασικό javascript χρειάζεται για να χρησιμοποιήσεις το jQuery και να υλοποιήσεις μερικά τρομερά εφέ με λίγες γνώσεις. Εδώ και μερικές βδομάδες φτιάχναμε tutorials του jQuery για τους αναγνώστες μας και σήμερα δημιουργήσαμε αυτό το όμορφο tutorial, που στο τέλος του θα μάθετε να δημιουργείτε κινούμενα τοπία χρησιμοποιώντας CSS και jQuery. Ας ξεκινήσουμε λοιπόν:

Βήμα 1 : Οργάνωση Αρχείων

Πρώτα από όλα πρέπει να μαζέψουμε όλα τα αρχεία που χρειάζονται για αυτό το tutorial, να δημιουργήσουμε ένα HTML αρχείο, ένα CSS αρχείο και ένα φάκελο που θα έχει μέσα όλες τις εικόνες μας.

Βήμα 2 : HTML έγγραφο

Τώρα πρέπει να γράψουμε πρώτα ένα HTML έγγραφο, το οποίο θα περιέχει περίβλημα με σταθερό ύψος και πλάτος και μέσα σε αυτό ένα container το οποίο θα κρατά όλα τα στοιχεία της σελίδας μας. Δείτε τον κώδικα παρακάτω:

<div id="wrapper">
<div id="inner">
<div id="cloudone"><img src="images/clud1.png" alt="" /></div>
<div id="cloudtwo"><img src="images/clud2.png" alt="" /></div>
<div id="cloudthree"><img src="images/clud1.png" alt="" /></div>
<div id="boat"><img src="images/boat.png" alt="" /></div>
</div>
</div>

Τελικά ο κώδικας της html είναι :

<div id="wrapper">
<div id="inner">
<div id="cloudone"><img src="images/clud1.png" alt="" /></div>
<div id="cloudtwo"><img src="images/clud2.png" alt="" /></div>
<div id="cloudthree"><img src="images/clud1.png" alt="" /></div>
<div id="boat"><img src="images/boat.png" alt="" /></div>
</div>
</div>

Βήμα 3 : CSS style

Ένα σημαντικό πράγμα που πρέπει να έχετε στο μυαλό σας είναι να έχετε επίστρωση κρυμμένη για τον container (εσωτερικά) και απόλυτη τοποθέτηση για όλες τις κινούμενες εικόνες. Εδώ θα κρατήσουμε τις κινούμενες εικόνες, όπως τα σύννεφα και τη βάρκα, έξω από τον container, με τη βοήθεια αρνητικού αριστερού και δεξιού ορίου, έτσι ώστε χρησιμοποιώντας το jQuery να έχουμε ένα καλό εφέ.

Κατεβάστε παρακάτω τον CSS κώδικα

Βήμα 4 : jQuery

Πρώτα από όλα πρέπει να εισάγουμε τον παρακάτω κώδικα στο <head> tags της html σελίδας.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="landscape.js" type="text/javascript"><!--mce:1--></script>

Εδώ θα χρησιμοποιήσουμε διπλή συνάρτηση κίνησης για να κάνουμε κινούμενα τα σύννεφα και τη βάρκα. Για να περιστρέψουμε τα σύννεφα και τη βάρκα θα φτιάξουμε μια άλλη συνάρτηση. Δείτε πρώτα τον παρακάτω κώδικα:

function cloudone(){
$("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
setTimeout("cloudone()",10000);
}

Στον παραπάνω κώδικα, εκεί που μετακινήσαμε το class id cloudone to +=1200px, σημαίνει ότι η εικόνα θα μετακινηθεί δεξιά 1200 πίξελς και θα δώσει εφέ κύλισης. Ο χρόνος που χρειάζεται για να ολοκληρωθεί η κύλιση είναι 10 δευτερόλεπτα. Τώρα μια άλλη συνάρτηση κίνησης θα μετακινήσει την εικόνα στην αρχική της θέση (time interval 0 sec) και για να ξεκινήσουμε την περιστροφή ξανά προσθέσαμε τα διαστήματα του χρόνου και των δυο συναρτήσεων κίνησης και χρησιμοποιήσαμε την συνάρτηση setTimeout.  Με αυτόν τον τρόπο κινούνται όλες οι εικόνες που θέλετε στο φόντο. Για περισσότερες πληροφορίες δείτε τον παρακάτω κώδικα.

function cloudone(){ $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0) setTimeout("cloudone()",10000); } function cloudtwo(){ $("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0) setTimeout("cloudtwo()",15000); } function cloudthree(){ $("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0) setTimeout("cloudthree()",20000); } function boat(){ //This time we need to move boat to left side so we put the margin to 1000px $("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0) setTimeout("boat()",20000); }

Τώρα πρέπει να ενεργοποιήσουμε (trigger) όλες τις συναρτήσεις μας ( cloudone(), cloudtwo(), cloudthree() ) για να ξεκινά η κίνηση μόλις φορτώσει η σελίδα. Δείτε τον παρακάτω κώδικα.

$(document).ready(function() {
setTimeout("cloudone()",10);
setTimeout("cloudtwo()",10);
setTimeout("cloudthree()",10);
setTimeout("boat()",10);
});

Ο κώδικας εν τέλει είναι :

$(document).ready(function() {
setTimeout("cloudone()",10);
setTimeout("cloudtwo()",10);
setTimeout("cloudthree()",10);
setTimeout("boat()",10);
});
function cloudone(){
$("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
setTimeout("cloudone()",10000);
}
function cloudtwo(){
$("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0)
setTimeout("cloudtwo()",15000);
}
function cloudthree(){
$("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0)
setTimeout("cloudthree()",20000);
}
function boat(){
$("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0)
setTimeout("boat()",20000);
}

Πηγή: Acris Design

Κατηγορία:

Ιστολόγιο
https://www.webgift.gr/templates/core_webgift/
0