Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Craig Watson
Craig Watson
27,930 Points

After a little help creating a better jQuery function on my pen.

Hi everyone,

I spotted a Dribble Shot I liked and have created a pen with its characteristics.

I am just not happy with the way the JS if is changing the Profile Cards.

If someone wouldn't mind having a look over this with me and smoothing it out that would be awesome!

The Pen

I just feel the transition from one to another could be better and involve a fade effect whilst the transition is happening. I see this is a good opportunity to also see how other would approach this just to see if im way off :)

My gut is saying there should be a function that is fired when the card is clicked and that function moves the card and has the fade. When the function finished the fade is over.

I can for the life on me get a grasp of where to start with this.

Appreciate any help!

2 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

I don't think its so much your javascript. If I were to change anything it would be the z-index of all cards.

.front {
    position: absolute;
    transform: scale(1) rotate(0deg);
    margin-left: 0; 
    transition-duration: 2s;
    z-index: 900;
    box-shadow: 0px 0px 24px -2px #777;
}
.back-left,
.back-right {
    display: none;

    @include mq($break-lg) {
        display: flex;
    }
}
.back-right {
    position: absolute;
    transform: scale(0.9) rotate(14deg) translateX(200px);
    transition-duration: 2s;
    z-index: 600;
}
.back-left {
    position: absolute;
    transform: scale(0.9) rotate(-14deg) translateX(-200px);
    transition-duration: 2s;
    z-index: 400;
}

Try this out and see if you like it any better.

Kristian Terziev
Kristian Terziev
28,449 Points
Kristian Terziev
Kristian Terziev
28,449 Points

Hello Craig,

The thing I have noticed is that due to the fact that you have designed those cards to look sort of like real objects in a 3d space is will always look strange when the card on tha back goes through the one on the front. To ease the transition you can use something like fadeTo() to play with the opacity of the card while it is moving.

As for the JavaScript that is pretty much the way I would do it. There is no need to separate it into functions as thay will be used only once in the code.

Best, Kristiyan