Content: Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Background: Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Pattern: Blank Waves Notes Sharp Wood Rockface Leather Honey Vertical Triangles
Welcome to Design Host

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

alexitiris

CSS animation and JS onclick

2 posts in this topic

Posted (edited)

Γεια σας φίλοι μου.

Θα ήθελα την βοήθεια σας παρακαλώ.

Έχω μια πρόταση πχ "Web Developer" και 3 εικονες.

Η πρώτη εικόνα (test1) αριστερα και η τρίτη (test2) εικόνα δεξια θα είναι σταθερές.

Στην δεύτερη εικόνα (test3) μεσαία θελω να κάνω animation.

Θέλω το εξής να κάνω. Πρώτον, οι τρεις εικόνες θα έχουν opacity 0. Δεύτερον, όταν ο χρήστης κάνει κλικ στην πρόταση τότες θα ακούσει την πρόταση και η πρώτη εικονα θα γίνεται opacity 1 και μετά από 2 δευτερολεπτα να γίνονται οι άλλες εικόνες 2 opacity 1 και η δεύτερη εικόνα να κάνει animation προς τα δεξια για να πάει απάνω στην εικόνα τρίτη.

Έχω κάνει την CSS αλλά έχω κολησει στην JS. Μπορείτε παρακαλώ να με βοηθήσετε?

.test1image{
  max-width: 10%;
  margin: 4% 0 3% 30%;
}
.test2image{
  max-width: 15%;
  margin: 8% 0 3% 20%;
}

/*// Star: Element to animate //*/

.test3image{
  max-width: 15%;
  margin: 2% 0 3% -36%;
  animation-name: test3motion;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}

/*// Keyframes //*/
@keyframes test3motion{
  from{ transform: translateX(20px)}
  to{ transform: translateX(230px)}
}


.sntc-img {
    height: auto;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;
    z-index: 1;
}
.sntc-img--show {
    position: relative;
    opacity: 1;
    z-index: 99;
}

 

Edited by alexitiris
1 person likes this

Share this post


Link to post
Share on other sites

Posted (edited)

Δοκιμασες με jQuery να το κανεις; 

Μετα το κλικ, υπαρχει 1s καθυστερηση, επειτα εμφανιζεται η πρωτη εικονα, μετα υπαρχει ακομα 1s καθυστερηση (συνολο 2s απο το κλικ) και εμφανιζονται οι αλλες 2 εικονες. Μολις τελειωσει το fade-in των εικονων, τρεχει το animation της 2ης εικονας που καθεται πανω στην 3η.

Edited by domino
1 person likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now