Μοτίβα

Audio player

Διαδραστικό παράδειγμα κώδικα που αναπαριστά ένα απλό σύστημα αναπαραγωγής ήχου. Κατά την επιλογή του κεντρικού εικονιδίου ξεκινάει η αναπαραγωγή του αρχείου...

Button

Διαδραστικό παράδειγμα κώδικα που δημιουργεί ένα κουμπί που εκτελέι διαφορετικές λειτουργίες κατά το Hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκ...

Calculator

Παράδειγμα οπτικής και λειτουργικής εξομοίωσης αριθμομηχανής.

Camera motion color

Διαδραστικό παράδειγμα κώδικα με χρήση κάμερας. Στο παράδειγμα υπάρχει ένα πλαίσιο πράσινου χρώματος . Όταν εντοπιστεί κίνηση μέσα στο πλαίσιο αλλάζει το χρώ...

Camera filter

Διαδραστικό παράδειγμα κώδικα Processing. Το παράδειγμα χρησιμοποιεί ως είσοδο κάμερα και εφαρμόζει διαδραστικό πλέγμα/φίλτρο που λειτουργεί και ως έξοδος τω...

Camera motion

Διαδραστικό παράδειγμα κώδικα με χρήση κάμερας. Στο παράδειγμα υπάρχει δύο διαφορετικά πλαίσια (πράσινο και κόκκινο). Όταν εντοπιστεί κίνηση σε κάποιο πλαίσι...

Clock

Παράδειγμα διαδραστικού ρολογιού

CSS queries

Παράδειγμα κώδικα με σκοπό να γίνει κατανοητή η χρήση των CSS media queries. Αλλάζοντας το μέγεθος του παραθύρου του περιηγητή (browser) σας αλλάζει το χρώμα...

Google maps

Έυρεση τοποθεσίας χρήστη χρησιμοποιώντας το Google Maps API (https://developers.google.com/maps/?hl=en).

3D image

Διαδραστικό παράδειγμα εικόνων χρησιμοποιώντας την τεχνική parallax. Στο συγκεκριμένο παράδειγμα η τεχνική αυτή δημιουργεί την αίσθηση του 3d περιβαλλντος. Ο...

Image processing

Παράδειγμα διαδραστικού κώδικα στον οποίο όταν εκτελείται από το χρήστη η λειτουργία hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκεκριμένο παράδει...

Image zoom

Παράδειγμα διαδραστικού κώδικα στον οποίο όταν εκτελείται από το χρήστη η λειτουργία hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκεκριμένο παράδει...

Image

Διαδραστικό παράδειγμα κώδικα που εισάγει μια εικόνα τύπου SVG (https://en.wikipedia.org/wiki/Scalable_Vector_Graphics). Όταν εκτελείται από το χρήστη η λειτ...

Interactive Text

Διαδραστικό παράδειγμα κώδικα που δημιουργεί ειδικά εφέ κατά το Hover (κίνηση του ποντικιού πάνω από την εικόνα) πάνω στο κείμενο. Για τη δημιουργία αυτών τω...

Keyboard input

Μετακίνηση αντικειμένου μέσω πληκτρολογίου (html Canvas)

Lighting

Διαδραστικό παράδειγμα κώδικα Processing που δημιουργεί φωτισμό (Directional light) σε μια σφαίρα. Ο φωτισμός μεταβάλλεται με την κίνηση του ποντικιού.

Maps location

Εύρεση τοποθεσίας μέσω της χρήσης φόρμας εισόδου και του Google Maps API (https://developers.google.com/maps/?hl=en).

Menu CSS

Παράδειγμα εναλλακτικού μενού χωρίς τη χρήση Javascript. Για τη δημιουργία της διάδρασης έχει χρησιμοποιηθεί ο CSS preprocessor SCSS.

Menu dropdown

Διαδραστικό παράδειγμα dropdown μενού χωρίς τη χρήση Javascript.

Menu empty

Παράδειγμα εναλλακτικού μενού χωρίς ενσωματωμένες λειτουργίες.

Menu pie

Διαδραστικό παράδειγμα πολύπλοκου κυκλικού μενού. Με την επιλογή του κουμπιού “open” από το χρήστη, εμφανίζονται μια σειρά από πιθανές επιλογές.

Menu scroll

Διαδραστικό παράδειγμα responsive μενού σε One page template χρησιμοποιώντας τη βιβιοθήκη Τwitter Βootstrap 3.0 . Στο παράδειγμα εμφανίζεται το μενού έπειτα ...

Menu slide

Παράδειγμα slide μενού χωρίς ενσωματωμένες λειτουργίες.

Mouse button

Παράδειγμα διαδραστικού κώδικα όπου ο χρήστης χρησιμοποιώντας το ποντίκι, πατώντας το κουμπί “ANOTHER” μπορεί να αλλάξει τα εκτυπωμένα μηνύματα.

Mouse draw processing

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

Mouse draw

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

Mouse eraser

Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως “σβηστήρι”. Υπάρχουν δύο διαθέσιμες εικόνες και η μία σβήνει μετακινώντας τον κέρσορα για να απ...

Mouse form

Παράδειγμα εισόδου μέσω της συσκευής Ποντίκι Νο.4

Mouse lines

Παράδειγμα διαδραστικού κώδικα Processing. Στο παράδειγμα αυτό 2 δυναμικές ευθείες γραμμές τέμνονται στο σημείο όπου βρίσκεται κάθε φορά ο κέρσορας του ποντι...

Mouse option

Παράδειγμα διαδραστικού κώδικα όπου ο χρήστης χρησιμοποιώντας το ποντίκι, μπορεί να αλλάξει δυναμικά το περιεχόμενο που θα εμφανίζεται στη σελίδα. Για το σκο...

Mouse scroll

Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή εισόδου και δίνει ως έξοδο το ανάλογο αποτέλεσμα στην οθόνη. Για να αλλάξει η τιμή εισό...

Sortable list

Παράδειγμα διαδραστικού κώδικα που ταξινομεί μια λίστα με τη χρήση του ποντικιού. Χρησιμοποιείται το στοιχείο sortable της JavaScript βιβλιοθήκης JQueryUI (...

Switch

Διαδραστικό παράδειγμα κώδικα που αναπαριστά τη λειτουργία ενός διακόπτη. Ο χρήστης μπορεί να επιλέξει ανάμεσα στις επιλογές ON και OFF. Για τη δημιουργία το...

Video player

Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή εισόδου. Το βίντεο χρησιμοποιεί για την έναρξη και την παύση του το σύστημα αναπαραγωγή...

Visualization dataset

Διαδραστικό παράδειγμα γραφήματος χρησιμοποιώντας τη βιβλιοθήκη d3.js (http://d3js.org). Το παράδειγμα οπτικοποιεί 2 διαφορετικά σετ δεδομένων (datasets).

Visualization

Παράδειγμα διαδραστικού γραφήματος No.1