Tuesday, March 14, 2017

Lab 11: FANCY BUTTON! by Jiahua

      This is the second lab with the use of JQuery. In this lab, we have to create a button that can change opacity when you hover on to it. This is for to make it more interactive to the users. And it makes it cooler if things changes without the need to click on things. It also tells the user that the mouse is hovering on top of the button. Ms. Ramirez showed us an example of this button which is done by Mark a talented alumnus of ITHS...this makes me think of the 3 months that I have until I leave this amazing place...so much amazing memories here. I really don't want to leave...so many friends and amzing teachers and staff here...I really don't know what to say... Anyways, back to the lab, we had to create this special button with JQuery.

      I first made a button, changed the CSS to the one that I use for all my other buttons on this website to match my website and maintain a nice consistence. I goal was to have it normal went you don't hover on to it, but when you do hover on to it, it will change it's opacity to a less visible or let's say fading away, but it does't fade back until the mouse is not hovering on it any more. At first I wasn't exactly sure how to do this lab until I saw Mark's project, I really want to thank him for his amazing work and the legacy he left behind here, I really wish I can do the same as well, but I do see Ms. Ramirez so my old stuff to the younger Web Design studens, it makes me proud something. I might as well just be known as the Minion guy, lol! I really wished I had the chance to get to know Mark. He must be a very interesting person to talk to. I might be able to learn more of web design from him. Anyways, I'm getting off topic here again, but I needed to fill the space out as there isn't too much to talk about in this lab... it's just a button that changes when you hover over it. I simply made it fade to a different oppacity on mouseenter and mouseleave, which is inspired by the code of Mark Munoz.

No comments:

Post a Comment