Guys, need your help
Imagine you have 10 cards and you want to add shadow on mouse hover for the card. Could you help me?Thanks in advance!
cardsArray = [ card1 card2 card3 card4 card5 card6 card7 card8 card9 card10]
for card in cardsArray card.onMouseOver -> cardShadow()
I want to show shadow for the card which I hover over, but not for all, how can I achieve it?
Maybe your cardShadow() function must receive as a parameter what is the cart that will have the shadow...
I'm pretty new to arrays, here is what I have
cardShadow = -> for card in cardsArray card.shadowColor = "rgba(0,0,0,0.5)" card.shadowX = 0 card.shadowY = 10 card.shadowBlur = 15 card.shadowSpread = 0
This way you are applying it to all cards in array.
cardShadow = (card) ->card.shadowColor = "rgba(0,0,0,0.5)"card.shadowX = 0card.shadowY = 10card.shadowBlur = 15card.shadowSpread = 0
Try to pass as a parameter the card that you are trying do shadow
Edit your loop to:
for card in cardsArraycard.onMouseOver ->cardShadow(card)
I think that you will have to implement a function to do the opposite but to the event MouseOut, just to ensure that the card looses the shadow on MouseOut.
Can you share the proto with us to see what's happening?
Just use a for loop and apply the hover state inside it. Effectively this goes through all your cards and applies the effect one by one. Of course, there are many other ways to do it.
Is this what you want? http://share.framerjs.com/kcqpr20xglpl/
Hi Alex Gilev, I think this is what you need: http://share.framerjs.com/fyqxb8gi7i66/ Perhaps the mouseover effect should be a little bit more pronounced, though.
All the examples work above just as well, but just another approach that optimizes for code organization. For loops can easily get super bloated the more properties you assign to objects. This approach moves all the properties/logic under the object, which also removes the need to worry about this/@, and you just create instances inside the loop, but do whatever makes sense the most sense to you. ¯\_(ツ)_/¯ – http://share.framerjs.com/u8ncawene4i5/