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

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


×