Hover & Animation - Githubissues

joshrowley / alexamartinez.com

Alexa's Portfolio

0 stars 0 forks source link

Hover & Animation #28

Closed AlexaMartinez closed 9 years ago

AlexaMartinez commented 9 years ago

I forgot to discuss this over the google hangout:

Would you be able to add some nice smooth interactions with my site? I can point to examples of things I like:

[ ] Thumbnails on index - the way they load
[ ] Hover for thumbnails
[ ] Hover states for buttons and links - change colors (we can discuss)

AlexaMartinez commented 9 years ago

@joshrowley I added new svgs for social media links in assets/img/icons

AlexaMartinez commented 9 years ago

To Do:

Hover

[ ] Hover for Nav Links: darken is good... changed to 25%... how do I bold? hover-weight(bold) ?
[x] Buttons go to 25% dark.. good.. can line do that as well??

Transitions/Animations

[x] Smooth scroll to skills section (when it is made)
[x] Buttons go to 25% dark.. good.. can line do that as well??

AlexaMartinez commented 9 years ago

Original animation inspiration:

How the grid fades in: http://www.instrument.com/work/

joshrowley commented 9 years ago

Hey I added hover effects to the borders, added the smooth scroll to the skills section, and added the gallery grid fading in as you scroll up. Let me know what you think of these and if you'd like to adjust or try a different approach.

I unfortunately cannot animate an element's font-weight. The browser does not know how to render the intermediary steps between typefaces, so it can't do a smooth transition. We could scale up the text slightly (I think our best option), or animate another property that's applied by the browser rather than a font, such as text-shadow.

AlexaMartinez commented 9 years ago

Awesome! We can slightly scale up the text if that's easiest! Just something to show it as a clickable item more. Thanks!!

joshrowley commented 9 years ago

Cool, I have them scale up slightly