Mouseover πως να κανω αυτο....

[Rpanagos]

Εχω σκευτει να φτιαξω το εξης..

Θελω να εχω το logo στο κεντρο της σελιδας και μολις καποιος παει το ποντικι πανω το logo αυτο να μετακινηθει αριστερα και στα δεξια να εμφανιστει ενας πινακας με καποια στοιχεια..

Αυτο γινετε με css?
Δεν ξερω πως να το ψαξω για να βρω μια ακρη.

[WebDevGr]

Ψάξε για :hover καθώς και για CSS animations

[rafinos]

Αυτό ακριβώς που ζητάς το έχω δει σε ένα site Ελλήνων youtubers. 

 

Πήγαινε το ποντίκι επάνω στο logo της σελίδας. 

 

http://gramers.gr/

[Rpanagos]

Απο εκει το ειδα και εγω

Απλα θα ηθελα να μαθω να το κανω...

[rafinos]

Αρχικά θα χρειαστείς τη jquery.

 

Εν συνεχεία ορίστε ο κώδικάς του για την στιγμή που κάνεις mouseover πάνω στο logo:

$(document).on('mouseover','#logo',function(){
            $(this).stop().animate({'left':'350px'},400);
            $('#text_container').stop().animate({'opacity':1},700);
        });
        
        $(document).on('mouseout','#logo',function(){
            $(this).stop().animate({'left':'550px'},500,'easeOutElastic');
            $('#text_container').stop().animate({'opacity':0},400);
            global.counter++;

            if(global.counter == 50){
                global.speed = 200;
                $('body').stop();
                global.bgcolor();
                alert('EASTER EGG!!!');
            }
        });

Ορίστε και η html με το css που χρησιμοποιεί:

<div class='container'>
     <div id='logo'>
          <img src='i eikona sou'>
     </div>
     <div id='text_container'>
          blah blah blah blah
     </div>
</div>

#logo{
    width:542px;
    height:650px;
    display:block;
    position:relative;
    left:550px;
    ;
    opacity:0;
    z-index:2;
}

.container{
    position:relative;
    width:1100px;
    margin:auto;
}

#text_container{
    position: absolute;
    right: 94px;
    top: 29px;
    width: 318px;
    height: 518px;
    opacity:0;
    background:rgba(255,255,255,0.7);
    padding:40px;
}

[Rpanagos]

 

Αρχικά θα χρειαστείς τη jquery.

 

Εν συνεχεία ορίστε ο κώδικάς του για την στιγμή που κάνεις mouseover πάνω στο logo:

$(document).on('mouseover','#logo',function(){
            $(this).stop().animate({'left':'350px'},400);
            $('#text_container').stop().animate({'opacity':1},700);
        });
        
        $(document).on('mouseout','#logo',function(){
            $(this).stop().animate({'left':'550px'},500,'easeOutElastic');
            $('#text_container').stop().animate({'opacity':0},400);
            global.counter++;

            if(global.counter == 50){
                global.speed = 200;
                $('body').stop();
                global.bgcolor();
                alert('EASTER EGG!!!');
            }
        });

Ορίστε και η html με το css που χρησιμοποιεί:

<div class='container'>
     <div id='logo'>
          <img src='i eikona sou'>
     </div>
     <div id='text_container'>
          blah blah blah blah
     </div>
</div>

#logo{
    width:542px;
    height:650px;
    display:block;
    position:relative;
    left:550px;
    ;
    opacity:0;
    z-index:2;
}

.container{
    position:relative;
    width:1100px;
    margin:auto;
}

#text_container{
    position: absolute;
    right: 94px;
    top: 29px;
    width: 318px;
    height: 518px;
    opacity:0;
    background:rgba(255,255,255,0.7);
    padding:40px;
}

Σε ευχαριστω..

Αυτο ο κωδικας ειναι αο το αρχειο html που αποθηκευεις την σελιδα στο Pc ετσι?

 

Με css μονο,κατι τετοιο θα ηταν αδυνατο?

[rafinos]

Να πω την αλήθεια δεν μπορώ να σου δώσω σίγουρη απάντηση για αυτό που είπες για το "μόνο css". 

Αυτό γιατί τα animations του css έχουν εξελιχθεί σε πολύ μεγάλο βαθμό και δυστυχώς δεν τα γνωρίζω. 

[Rpanagos]

Να πω την αλήθεια δεν μπορώ να σου δώσω σίγουρη απάντηση για αυτό που είπες για το "μόνο css". 

Αυτό γιατί τα animations του css έχουν εξελιχθεί σε πολύ μεγάλο βαθμό και δυστυχώς δεν τα γνωρίζω. 

Μαλιστα οκ,

 

τον κωδικα απο που τον ειδες,του σιτε αυτου?

Εκανες downlad την σελιδα?

[rafinos]

Όχι πάτησα δεξί κλικ και τον εμφάνισα.

 

Ο javascript κώδικάς του δεν είναι όμως για αρχάριους. Το κομμάτι που σου έδειξα μπορεί να μην το βρεις καν με μια απλή ματιά. Πολλά από αυτά που κάνει και εγώ δεν τα ξέρω (δεν είμαι και κάνας guru απλά στο λέω πληροφοριακά).

[Rpanagos]

Όχι πάτησα δεξί κλικ και τον εμφάνισα.

 

Ο javascript κώδικάς του δεν είναι όμως για αρχάριους. Το κομμάτι που σου έδειξα μπορεί να μην το βρεις καν με μια απλή ματιά. Πολλά από αυτά που κάνει και εγώ δεν τα ξέρω (δεν είμαι και κάνας guru απλά στο λέω πληροφοριακά).

Αν αντιγραψει καποιος τον κωδικα και αλλαξει καποια πραγματα εχει θεμα με copyrights κλπ?

[gsarig]

Αν δεν θες να χρησιμοποιήσεις javarscript, αρκετά παρόμοιο εφέ μπορείς να πετύχεις με css transitions - δες εδώ ένα πολύ πρόχειρο παράδειγμα: http://codepen.io/gsarig/pen/egwdzm

[Rpanagos]

Αν δεν θες να χρησιμοποιήσεις javarscript, αρκετά παρόμοιο εφέ μπορείς να πετύχεις με css transitions - δες εδώ ένα πολύ πρόχειρο παράδειγμα: http://codepen.io/gsarig/pen/egwdzm

Πολυ καλο..

με κατι τετοιο ειμαι καλυμμενος..

 

Thnx!

 

Πληροφοριακα...αυτο το εφτιαξες εσυ?

[rafinos]

Αν δεν θες να χρησιμοποιήσεις javarscript, αρκετά παρόμοιο εφέ μπορείς να πετύχεις με css transitions - δες εδώ ένα πολύ πρόχειρο παράδειγμα: http://codepen.io/gsarig/pen/egwdzm

Τώρα να ρωτήσω εγώ κάτι. Στα transitions επιλέγεις σε ποια properties θα μπει κίνηση εάν αλλάξουν;

[gsarig]

@Rpanagos ναι, εγώ το έφτιαξα στα γρήγορα για να πάρεις μια ιδέα πώς μπορείς να το κάνεις. Μην αντιγράψεις στα τυφλά τον κώδικα, κάποια πράγματα δεν θα τα χρειαστείς ενώ μπορεί η συγκεκριμένη δομή στην html να μην σε καλύπτει στη δική σου σελίδα και να πρέπει να το προσαρμόσεις ανάλογα.

 

@rafinos αν ξέρεις ότι θες να μεταβάλλεις συγκεκριμένη μόνο ιδιότητα (π.χ. opacity) μπορείς να ορίσεις μόνο αυτή στο transition αντί να βάλεις το all, που θα προσπαθούσε να εφαρμόσει το εφέ και σε όλες τις υπόλοιπες. Αυτό είναι και πιο αποδοτικό από άποψη ταχύτητας/πόρων. Αν θες να μεταβάλλεις 2 ή περισσότερες ιδιότητες στο ίδιο στοιχείο, μπορείς να τις χωρίσεις με κόμμα - π.χ.

transition: left 0.3s ease-out, opacity 0.3s ease 0.3s;

Σημείωση: η τέταρτη τιμή στο δεύτερο transition (opacity) είναι προαιρετική και ορίζει την καθυστέρηση για το συγκεκριμένο εφέ - με αυτό τον τρόπο η αλλαγή στο opacity θα ξεκινούσε αφού προηγουμένως είχε ολοκληρωθεί η αλλαγή στο left (δηλ. μετά από 0.3s).

[Rpanagos]

Ωραίος φιλέ!

Ναι εννοείται θα τον προσαρμοσω.

Ευχαριστω!