Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
alexitiris

CSS animation and JS onclick

Recommended Posts

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

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

Έχω μια πρόταση πχ "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
  • Like 1

Share this post


Link to post
Share on other sites

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

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

Edited by domino
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×