last update: 09/01/25

Libraries – working progress

pages in progress

1. landing page

  • Tools: Elementor (Pro), HTML, CSS, JavaScript.
  • Landing Page

pending:

  1. zoom photo fix shaddow & scroll cersor
  2. font – we raise your brand
  3. new photo projects
  4. new photos meet the advertrisers (εχει γίνει συνεννόηση με Παντελή)
  5. δοκιμαζεται κατι διαφορετικό στο section contact
  6. demo footer

LINK: lANDING DEMO PAGE

2. SLOW VIDEO SCROLL - services

( updated 9/1/25 )

  • Tools: Elementor (Free), HTML, CSS, JavaScript.

pending:

  1. video fix  –  εχει γίνει συνεννόηση με Παντελή (Asana)
  2. design box fix
  3. demo footer

LINK: LOGO BRANDS

3. About Us

  • Tools: Elementor (Pro), HTML, CSS, JavaScript.

pending : demo footer

link: about us

Blocks

1.1 Mouse Animation

  • Tools: Elementor (Pro), Photoshop, Freepik (Pro).
  • Περιγραφή:
    • Δημιουργία διαδραστικής κίνησης με στρώσεις φωτογραφιών και fonts.
  • Τι κρατάμε:
    • Πολύ εύκολη υλοποίηση με Photoshop και απευθείας εισαγωγή μέσω Elementor.

link: mouse animation 

 

1.2 About Us Vertical Carousel 

  • Tools: Elementor (Pro), HTML, CSS, JavaScript.
  • Περιγραφή:
    • HTML-CSS:
      • 25+ layers στο Elementor για τη δομή.
      • 16+ CSS classes για την παραμετροποίηση.
    • JavaScript:
      • Προσαρμογή του HTML code για το τελευταίο container.

(για να δείς τα classes πατας: edit with elementor – δεξί κλίκ στην οθόνη – structure – επέλεξε εναν απο τους εσωτερικούς contaiers – advanced –  css classes).

javascript modifications: 

Για να δείς την javascript πατας: edit with elementor – δεξί κλίκ στην οθόνη – structure – επέλεξε τον τελευταίο container – HTML – HTML CODE

Τι κρατάμε:

  • Η λειτουργικότητα απαιτεί καλή κατανόηση της δομής του Elementor μέσω του structure view (δεξί κλικ → advanced settings).
  • Εξαιρετικό αποτέλεσμα, αν και απαιτητικό σε layers και classes.

link: vertical caroussel

1.3 Photo Scroller

  • Tools: Elementor (Free).
  • Περιγραφή:
    • Ομαλή κίνηση φωτογραφιών, με στόχο την καθοδήγηση του χρήστη (UI/UX).
  • Τι κρατάμε:
    • Παρά την απλότητα του εργαλείου, το αποτέλεσμα εξαρτάται από την καθαρότητα του περιεχομένου και τη σαφήνεια της κίνησης.

Επαναλαμβάνω οτι κοιτάμε τον τρόπο που δουλεύουν τα εργαλεία, κατα πόσο ειναι smooth τα animation και οχι το design

link: photo scroller

1.4 Horizontal Scrolling

  • Tools: Elementor (Pro), HTML, CSS, JavaScript.
  • Περιγραφή:
    • Παρόμοια διαδικασία με το vertical carousel.
    • Παραμετροποίηση CSS και JavaScript για την προσαρμογή.
  • Τι κρατάμε:
    • Ένας συνδυασμός γνώσεων στα εργαλεία μπορεί να δημιουργήσει εξαιρετικά smooth animations.

link: horizontal-scrolling

1.5 GSAP ScrollTrigger (FAIL)

Ο λόγος που μπήκα στην διαδικασία για video scrolling ήταν για να αποφύγω την διαδικασία καρε – καρε photo scrolling, κατι τέτοιο θα μου γλύτωνε παρα πολλές ώρες στα kare που πρεπει να δημιουργήσω και παρα πολλές ώρες στο responsive.

Αυτη η μέθοδος δεν δούλεψε αλλα θα τα δούμε με την σειρά και τι κρατάμε απο αυτο.

  • Tools: Elementor (Pro), HTML, CSS, JavaScript.
  • Περιγραφή:
    • Πειραματισμός με GSAP ScrollTrigger για scrolling video animation.
    • Προβλήματα:
      • Εισαγωγή GSAP μέσω χειροκίνητης εγκατάστασης στην Plesk. (χρειαστηκε χειροκίνητη εισαγωγή της GSAP  μεσα στην Plesk (go files  -> httpdocs -> wp-admin -> functions)
      • Το video έδειχνε μόνο το τέλος → Επιλύθηκε (css modifications).
      • Καρέ-καρέ κίνηση → FAIL

στο κατω link θα δείς κατι που δέν δούλεψε σωστά.

δοκίμασε σιγα σιγα με ένα scroll την φορά 

fail link

τι κρατάμε απο αυτό

Η μέθοδος GSAP scrolltrigger δουλεύει πάρα πολυ καλά σε video 4 εως 6 δευτερολέπτων και μονο σε slowmotion

παραδειγμα:

link: Karpouzi

1.6 wave caroussel

tools: Elementor (free), HTML, CSS, Javascript

  • Περιγραφή:
    • Παρόμοια διαδικασία με το vertical carousel.
    • Παραμετροποίηση CSS και JavaScript για την δημιουργία animation

link: wave caroussel

1.7 vertical image caroussel

tools: Elementor (free), HTML, CSS, Javascript

  • Περιγραφή:
    • Παρόμοια διαδικασία με το vertical carousel. (no scrolling motion)
    • Παραμετροποίηση CSS και JavaScript για την δημιουργία animation

link: vertical image caroussel

(εαν δεν βλέπεις το transition δοκιμασε refresh, ψαχνω ακόμα να το διορθώσω)

1.8 horizontal image caroussel

tools: Elementor (Pro), HTML, CSS, Javascript

  • Περιγραφή:
    • Παρόμοια διαδικασία με το vertical carousel.
    • Παραμετροποίηση CSS και JavaScript για την δημιουργία animation

link: horizontal image caroussel

1.9 OUR PROJECT 3D caroussel

tools: Elementor (Free), HTML, CSS, Javascript

  • Περιγραφή:
    • basic caroussel με παραμετροποίηση CSS και JavaScript για την δημιουργία animation

link:3d caroussel

2.1 SPIN CAROUSEL – meet the team

tools: Elementor (Free), HTML, CSS, Javascript

problems:

ακομα δεν δουλευει σωστα σε mobile και σπαει τον κωδικα οταν το βάζω με άλλα script  αλλα θα το φτιαξω, (οι φωτο ειναι ενδεικτικές)

 

link:spin carousel

HTML – CSS

Για να δείς τα classes πατας: edit with elementor – δεξί κλίκ στην οθόνη – structure – επέλεξε εναν απο τους εσωτερικούς contaiers – advanced –  css classes).

javascript modifications: 

Για να δείς την javascript πατας: edit with elementor – δεξί κλίκ στην οθόνη – structure – επέλεξε τον τελευταίο container – HTML – HTML CODE