Πραγματικά Χρήσιμα jQuery – Sliders, Plugins & Πηγές Για Προγραμματιστές Web

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
31/03/2013 από
Zeoz

Η jQuery έχει κερδίσει τις καρδιές πολλών προγραμματιστών, χάρη στο σύνθημά της «γράψε λιγότερα, κάνε περισσότερα». Είναι πραγματικά πολύ απλή. Έχει περάσει ο καιρός, που οι προγραμματιστές είχαν να γράψουν ατελείωτες γραμμές κώδικα, για να κάνουν ένα πολύ μικρό εφέ στο κείμενο και τη συλλογή εικόνων τους. Σήμερα, μπορείτε να βάλετε οποιοδήποτε εφέ σε εικόνες, κείμενο και οτιδήποτε άλλο, με έναν απρόσκοπτο τρόπο και να τα ενσωματώσετε στις ιστοσελίδες σας.

Η jQuery έχει πολλά χαρακτηριστικά, όπως το χειρισμό συμβάντων, αλληλεπιδράσεις animating και Ajax για γρήγορη κατασκευή ιστοσελίδων και φυσικά βοηθάει πολύ την ανάπτυξη της χρηστικότητας της ιστοσελίδας.

Σε αυτή την ανάρτηση, δημοσιεύουμε Πραγματικά Χρήσιμα jQuery Sliders, Plugins και Πηγές για Προγραμματιστές Web. Μερικά από αυτά μπορεί να τα έχετε ήδη δει, αλλά κάποια άλλα μπορεί να σας είναι άγνωστα.
Αν σας αρέσουν κάποια από αυτά και σκοπεύετε να τα χρησιμοποιήσετε, τότε παρακαλώ διαβάστε τη συμφωνία άδειας χρήσης του δημιουργού, καθώς μπορεί να μεταβάλλεται κατά καιρούς.

Rotating Image Slider με jQuery

rotating_image_slider

Δημιουργήστε έναν ασύμμετρο slider εικόνων με μια μικρή διαφορά: όταν εναλλάσουμε τις εικόνες, θα τις περιστρέφουμε ελαφρώς και θα καθυστερούμε την ολίσθηση του κάθε στοιχείου. Το ασυνήθιστο σχήμα του slider έχει δημιουργηθεί με την τοποθέτηση κάποιων στοιχείων και τη χρήση χοντρών πλαισίων. Θα προσθέσουμε επίσης μια επιλογή αυτόματης κίνησης και τη λειτρουργία της ροδέλας του ποντικιού. Το jQuery 2D Transformation Plugin χρησιμοποιείται για την περιστροφή των εικόνων και το jQuery Mousewheel Plugin του Brandon Aaron για τον έλεγχο της ροδέλας κύλησης του ποντικιού.

Δοκιμή Λήψη

CSS3 Animated Bubble Buttons

bubble_buttons

Αυτό το jQuery σας βοηθά να δημιουργήσετε ένα χρήσιμο σύνολο από κουμπιά κινουμένων σχεδίων με τη δύναμη των πολλαπλών φόντων και κινουμένων σχεδίων του CSS3. Μπορείτε εύκολα να μετατρέψετε οποιοδήποτε σύνδεσμο στη σελίδα σας σε ένα κουμπί-κινούμενο σχέδιο με την απλή ανάθεση ενός ονόματος τάξης. Δεν χρειάζεται JavaScript. Διατίθεντε επίσης τέσσερα χρωματικά θέματα και τρία μεγέθη με την ανάθεση επιπλέον ονομάτων τάξης.

Δοκιμή Λήψη

 jShowOff: ένας jQuery Περιστροφέας Περιεχομένου

image_slider 

Το jShowOff είναι ένα jQuery plugin για τη δημιουργία μιας μονάδας περιστροφής περιεχομένου. Λειτουργεί με τη δημιουργία «διαφανειών» από τα δευτερεύοντα στοιχεία ενός συγκεκριμένου βασικού στοιχείου πάνω στο οποίο κινείται το jShowOff. Στη συνέχεια, περιστρέφεται μέσα από τις διαφάνειες, με επιλογές για control, συνδέσμους, και άλλα. Αυτό το είδος της μονάδας χρησιμοποιείται συχνά για να προωθηθούν σελίδες, ενότητες ή χαρακτηριστικά σε ένα site .

Πηγή

jQuery PhotoShoot Plugin 1.0

photoshoot

Το jQuery PhotoShoot σας δίνει την δυνατότητα να μετατρέψετε οποιοδήποτε σημείο της ιστοσελίδας σας σε ένα εφέ φωτογράφησης, πλήρες με σκόπευτρο. Η εικόνα θα μπορούσε να είναι θολή, η αδιαφάνεια θα μπορούσε να αλλάξει. Θα μπορούσατε επίσης, να περάσετε οποιαδήποτε λειτουργία θέλετε.

Δοκιμή Λήψη

Χαρτοφυλάκιο με εφέ κλείστρου με jQuery και Canvas

shutter_effect

Χρησιμοποιήστε το στοιχείο καμβά του HTML5 για να δημιουργήσετε ένα απλό χαρτοφυλάκιο φωτογραφιών, το οποίο εμφανίζει μια σειρά από ενσωματωμένες φωτογραφίες με ένα εφέ κλείστρου της κάμερας. Αυτή η λειτουργία θα έρθει με τη μορφή ενός εύχρηστου jQuery plugin, που μπορείτε εύκολα να ενσωματώσετε σε οποιαδήποτε ιστοσελίδα.

Δοκιμή Λήψη

Google Αναζήτηση Ιστοσελίδας με jQuery

wdf

Θα μπορούσατε να εφαρμόσετε αναζήτηση ξεκινώντας από μηδενική βάση, ή θα μπορούσατε να χρησιμοποιήσετε τη Λεπτομερή Αναζήτηση του Google για τον ίδιο σκοπό, για να απλοποιήσετε όλες τις εργασίες σας για αναζήτηση. Χρησιμοποιήστε την αναζήτηση AJAX API του Google, για να δημιουργήσετε μια προσαρμοσμένη μηχανή αναζήτησης, με την οποία μπορείτε να αναζητήσετε αποτελέσματα του διαδικτύου, εικόνες, βίντεο και ειδησεογραφικά στοιχεία στο site σας. Αυτό σας βοηθά να ενσωματώσετε μερικές όμορφες αναζητήσεις στο site σας.

Δοκιμή Λήψη

slidebox jquery banner rotator

slidebox

Ένα απλό jquery /css banner rotator /slideshow με κουμπιά επόμενο /προηγούμενο, μικρογραφίες διαφανειών και λειτουργία auto-play. Είναι πολύ απλό να εφαρμοστεί. Αυτό θα μπορούσε να είναι μια καλή αρχή για έναν αρχάριο στο jQuery.

Δοκιμή Λήψη

Simple Accordion w/CSS και jQuery

accordian

Όταν σχεδιάστηκε και εφαρμόστηκε με κριτήριο τη χρηστικότητα, το ακορντεόν μπορεί να φανεί εξαιρετικά χρήσιμο, όταν οργανώνει ένα μεγάλο τμήμα του περιεχομένου. Απλό ακορντεόν με τη χρήση CSS και jQuery για το περιεχόμενο.

Δοκιμή Πηγή

Δημιουργήστε εφέ κειμένου με τη χρήση jQuery

jticker

Πρέπει να έχετε δει εφέ κειμένου σε πολλές ιστοσελίδες flash. Το jTicker είναι ένα jQuery plugin που μπορεί να χρησιμοποιηθεί για τη δημιουργία εφέ πληκτρολόγησης κειμένου χωρίς τη χρήση φλας. Αυτό το αποτέλεσμα είναι χρήσιμο, όταν θέλετε να αναγκάσετε τον επισκέπτη να διαβάσει το κείμενο. Αλλά θα πρέπει να χρησιμοποιείται όπου είναι απαραίτητο, καθώς η χρηστικότητα είναι ελλειπής. Το jTicker μπορεί να εφαρμοστεί σε οποιοδήποτε στοιχείο και μπορεί να προσαρμοστεί με τη χρήση CSS. Μπορείτε επίσης να χρησιμοποιήσετε κουμπιά για να τρέξετε, να σταματήσετε και να ελέγξετε την ταχύτητα του εφέ.

Δοκιμή Λήψη

RSS Driven Dynamic jQuery News Slider Plugin

new_ticker

Το Dynamic News είναι ένα jQuery slider plugin που διευκολύνει την ενσωμάτωση ειδήσεων στο site σας. Το Dynamic News plugin υποστηρίζει δύο τρόπους για να προσθέσετε νέα δεδομένα. Μπορείτε είτε να εισάγετε τα νέα μέσω HTML επισημάνσεων χειροκίνητα, ή να αφήσετε το Dynamic News plugin να φορτώσει τα νέα από το RSS feed και να κατασκευάσει τις απαραίτητες HTML επισημάνσεις αυτόματα. Μια φοβερή λειτουργία του Dynamic News slider είναι η προεπισκόπηση των ειδήσεων, ή το παράθυρο περίληψης των ειδήσεων, να αιωρείται πάνω από την επικεφαλίδα των ειδήσεων, θα δείξει περίληψη των ειδήσεων σε ένα εργαλείο συμβουλών όπως το όπως το pop up, το οποίο παρέχει επίσης σύνδεσμο προς τη σελίδα με τις λεπτομέρειες των ειδήσεων. Όλες οι λειτουργίες του Dynamic News slider plugin μπορούν να ρυθμιστούν.Από εσάς εξαρτάται αν θέλετε να εμφανίζετε το παράθυρο προεπισκόπησης των ειδήσεων, τη γραμμή ελέγχου, να κάνετε αυτόματη απόκρυψη στη γραμμή ελέγχου ή να τη διατηρείτε πάντα ορατή.

Δοκιμή Λήψη

Εφέ ξεθωριασμένου χρώματος για ενσωμάτωση συνδέσμων κειμένου με τη χρήση jQuery

fade_effect

Εδώ είναι ένα απλό τέχνασμα UX που μπορεί να εφαρμοστεί εύκολα στις ιστοσελίδες σας. Με λίγες γραμμές jQuery θα κάνει τους συνδέσμους του κειμένου σας να ξεθωριάζουν σε ένα άλλο χρώμα σε κύλιση από πάνω. Αρχικά το δεύτερο SPAN κρύβεται. Όταν το Α κινείται το SPAN «δύο» σβήνει χρησιμοποιώντας το εφέ fadeTo της jQuery, ενώ το SPAN «ένα» σβήνει. Αυτό δημιουργεί ομαλό ξεθώριασμα από το ένα χρώμα στο άλλο.

Δοκιμή Λήψη

Φόρμα Παραγγελίας Πολλαπλής Ποσότητας Προϊόντων

order_form

Το κύριο σημείο εδώ είναι τα μαθηματικά. Είναι ένας απλός πίνακας προϊόντων, και κάθε προϊόν έχει ένα πλαίσιο για εισαγωγή της ποσότητας. Αλλάζοντας την αξία αυτής της ποσότητας ενεργοποιούνται αυτομάτως τα μαθηματικά και υπολογίζονται τα αθροίσματα. Τα αθροίσματα των γραμμών υπολογίζονται οριζοντίως, και τότε τα σύνολα των παραγγελιών υπολογίζονται καθέτως. Οι ποσότητες αθροίζονται και πολλαπλασιάζονται με ένα ποσοστό μεταφορικών εξόδων και όλα προστίθενται συνολικά.

Δοκιμή Λήψη

Start/Stop Slider

start_stop_slider

Αυτό είναι ένα jQuery slider που εντοπίζει αυτόματα τον αριθμό των «διαφανειών». Υπάρχουν πολλά κινούμενα σχέδια ανά διαφάνεια, τα οποία παίζουν αυτόματα, αλλά υπάρχει ένα κουμπί έναρξη/λήξη. Πολύ εύκολο να εφαρμοστεί. Εντελώς προσαρμόσιμο.

Δοκιμή Λήψη

Demo Πλοήγησης jQuery MagicLine

magic_line_nevigation_menu

Προβάλλει μια επισήμανση (υπογράμμιση ή φόντο) σε ένα νέο είδος πλοήγησης (και πίσω) όταν αιωρείται. Προαιρετικό ξεθώριασμα χρώματος. Η ιδέα είναι να έχετε κάποιου είδους επισήμανση (ένα φόντο ή υπογράμμιση) να σας ακολουθεί παντού, καθώς περνάτε το ποντίκι σας πάνω από διάφορους συνδέσμους στην πλοήγηση. Αυτό θα συμβεί με την jQuery και τις δυνατότητες animation που διαθέτει. Ως τέτοια, η “μαγική γραμμή” θα προστίθεται μόνο μέσω JavaScript. Μόλις προστεθεί στη λίστα και μπρφοποιηθεί, όπως περνάτε με το ποντίκι σας πάνω από διάφορους συνδέσμους, υπολογίζει την αριστερή θέση και το πλάτος και φτιάχνει σχέδια που ταιριάζουν.

Δοκιμή Λήψη

Απλά jQuery Dropdowns

simple_dropdown

Πολύ απλά, με ελάχιστη μορφοποίηση, jQuery αναπτυσσόμενα μενού. Φιλικό προς διάφορα προγράμματα περιήγησης και διατηρεί φιλικό «μονοπάτι» πλοήγησης. Κάθε «επίπεδο» είναι ευκρινώς σημειωμένο στο CSS. Στυλ πολύ μίνιμαλ, άνετα προσαρμόσιμο.

Δοκιμή Λήψη

Grid Accordion

infogrid

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

Δοκιμή Λήψη

AnythingSlider

anythingslider

jQuery slider με πολλά χαρακτηριστικά: hashtag σύνδεση με διαφάνειες, «ατελείωτη» ολίσθηση, χαλάρωση, δυναμική κατασκευή (οποιουδήποτε αριθμού διαφανειών), πολλαπλά συστήματα πλοήγησης, API, και πολλά άλλα. Αυτό το νέο AnythingSlider είναι μια προσπάθεια να συνδιάσει τη λειτουργικότητα όλων των προηγούμενων sliders και την πρόσθεση νέων χαρακτηριστικών. Με άλλα λόγια, για να δημιουργηθεί πραγματικά ένα slider πλήρους λειτουργικότητας, που θα μπορούσε να είναι ευρέως χρήσιμο. Επίσης, αυτό το slider είναι και ένα πραγματικό plugin, το οποίο θα πρέπει να κάνει την εφαρμογή και την προσαρμογή πολύ πιο εύκολη.

Δοκιμή Λήψη

Fancy View Source Button

view_source_button

Υπάρχουν πολλοί ιστοχώροι στο διαδίκτυο που χρησιμοποιούν το κουμπί «View Source» («Βλέπε την Πηγή»)για πολλές από τις σελίδες τους για να δώσουν στους χρήστες τον κωδικό ενός συγκεκριμένου demo. Αυτό το κουμπί Fancy View Source σας βοηθά να κάνετε αυτή τη ρουτίνα πιο εντυπωσιακή, ευχάριστη και ελκυστική στο μάτι. Χρησιμοποιώντας jQuery, Code Prettify και CSS3 :target, μπορούμε να φτιάξουμε ένα κουμπί που παρουσιάζει μια καλή εμφάνιση του πηγαίου κώδικα για τις τρέχουσες σελίδες.

Δοκιμή Λήψη

Slot Machine Tabs

organic_tabs

Καθώς κάνετε κλικ σε μια διαφορετική καρτέλα, οι τρεις στήλες του κειμένου πετάνε προς τα πάνω σε διάφορες αναλογίες και αντικαθίστανται από νέες στήλες. Μοιάζει κάπως σαν ένα μηχάνημα «κουλοχέρης». Αυτό θα μπορούσε να είναι χρήσιμο για πολλές ιστοσελίδες ηλεκτρονικού εμπορίου, οι άλλες ιστοσελίδες που προβάλλουν τις τιμές τους για διάφορες υπηρεσίες που έχουν να προσφέρουν.

Δοκιμή Λήψη

Συρόμενα Γράμματα με jQuery

sliding_letters_with_jquery

Θέλουμε να φέρουμε ζωντάνια στο βασικό εφέ αιώρησης παίζοντας με τα γράμματα σε μια λέξη άγκυρα. Ο στόχος είναι να σύρετε γράμμα με γράμμα όταν βρίσκεστε πάνω από ένα στοιχείο συνδέσμου. Μπορούμε να έχουμε είτε την ίδια λέξη ή μια διαφορετική και μπορούμε να σύρουμε τα νέα γράμματα όλα την ίδια χρονική στιγμή ή το ένα μετά το άλλο.

Δοκιμή Λήψη

Galleriffic

gallerific

Το Galleriffic είναι ένα jQuery plugin που παρέχει μια πλούσια, χωρίς post-back εμπειρία, βελτιστοποιημένη για να χειριστεί μεγάλο όγκο φωτογραφιών, διατηρώντας παράλληλα το εύρος. Έχει χαρακτηριστικά όπως Smart προφόρτιση εικόνας αφού φορτωθεί η σελίδα, πλοήγηση μικρογραφιών, κλπ.

Δοκιμή Λήψη

Ηash Slider

jquery_hash_slider

Αυτό το jquery slider κάνει ό, τι κάνουν τα περισσότερα, αλλά προσθέτει ένα hashtag στη θέση παραθύρου, ώστε να μπορείτε να συνδεθείτε σε οποιοδήποτε περιεχόμενο / θέση του slider. Τα χαρακτηριστικά του περιλαμβάνουν ευκολία στην εφαρμογή, πλήρη μορφοποίηση μέσω css, ενσωμάτωση τροχού του ποντικιού, απευθείας συνδέσεις με τη θέση του slider μέσω hash tag, αυτόματη παραγωγή αριθμών πλοήγησης, κλπ.

Δοκιμή Λήψη

Orbit jQuery Image Slider

orbit_jquery_image_slider

Τα περισσότερα jQuery sliders εικόνων κυμαίνονται γύρω στα 8 kbs για συμπιεσμένες εκδόσεις, και γύρω στα 15kbs ή περισσότερο για ασυμπίεστα αρχεία ανάπτυξης, αλλά τι γίνεται αν υπήρχε ένας τρόπος για να κρατήσουμε το απλό ξεθώριασμα, τις διαφάνειες και τα χαρακτηριστικά, και μερικά άλλα καλά πράγματα, αλλά όχι τα παραφορτωμένα και κακής ποιότητας διαγώνια ξεθωριάσματα ή τα σπιράλ που διαλύονται. Αυτό το jQuery slider εικόνων τα εξασφαλίζει όλα αυτά.

Δοκιμή Λήψη








Hide ↑

Xtnd.it Group | e-xtend your possibilities

Ripple Effects με SVG και Javascript ~ Material Design 

18 September 2015

Ενα σε βάθος tutorial για το πώς να οικοδομήσουμε  ripple effect  που περιγράφονται με βάση των προδιαγραφών σχεδιασμού της Google και να τις συνδυάσουμε[…]

Read more...

5η Έκθεση για τις Υπηρεσίες Internet Web World Expo 2015

18 September 2015

 24-25 Οκτωβρίου – Ζάππειο Μέγαρο|  

Η WebWorldExpo[…]

Read more...

WordPress Greek Community 3rd meetup

21 April 2015

Τρίτη 28/04/2015, 18:00
THE HUB EVENTS, Αλκμήνης 5, Κ. Πετράλωνα

Η ελληνική κοινότητα του WordPress είναι εδώ! Αρκετό καιρό μετά το προηγούμενο meetup[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.