Lab #5 - jQuery Animate

-

In lab #5, I used jQuery to animate a div and manipulate it to move, change the shape, size, and opacity of it. Each button you click does the action that it says. The buttons consist of move, size, opacity, cascade, shape and reset. Clicking on the move button will move the div square to the right a certain amount. Clicking it multiple times with make it keep going to the right until it goes off the page. The size button makes the div square become smaller. The opacity button randomly sets the opacity of the div square between 0 and 1. The cascade button combines the first 3 buttons and does all of them. The shape button changes the shape of the div square to make it more circular, like an oval. The reset button undoes all of the applied actions done with the previous buttons.

 First of all, every single button on this page is animated with jQuery, so its easiest to make an onclick function, which runs whenever the button is clicked. So when any of the buttons are clicked, they select the div (white box) as a selector. Then, whatever modification takes place to the selector will be placed inside of the onclick function. The move button increases the option "left" by 100 each time it is clicked. When the size button is clicked, the height and width of the div is altered. The height is changed to 100px and the width is changed to 80px. The opacity button uses a random number generator between 0 and 1 to decide what value to input for the visibility of the div. The shape button increases the border radius of the div which is why it is changed into an oval type shape. Cascade is, once again, a combination of all 3 of the beginning actions which is changing the left, height, width, and opacity. The reset button took me a while to actually figure out. I needed to find a way to revert all of the modifications back to the beginning. I ended up setting the left, back to its original position, same for the width and height, changing the opacity to 1 and making the border-radius 0 so that it becomes a square again.

 These skills are important for a web designer so that they can make their webpages more appealing to others via animations that you can create using jQuery. You could make appealing animations that can make your webpages stand out and make your clients buy your pages. You could also explore with these animations to further develop animation in jQuery to make more visually stunning pages.

Comments

Post a Comment

Popular posts from this blog

WBL Workshop #6 Interview Skills

-
          WBL Workshop #6 was about testing our interviewing skills. First thing that happened was us entering the room without knowing that we were going to be interviewed. So as a student you could say some of us were surprised about it. There were different people interviewing students that took place during this workshop. Students were set at different "stations" of people who would interview you. I was a little confused at first about what the interview would be about and what job we were actually being interviewed for to represent a mock interview. Then I realized that a perfect job for the situation would be something revolving around being a web designer. When it was my turn to be interviewed I wasn't nervous because I had some pre-answers in my head for obvious answers.               During the interview I kept looking toward the top right, for no apparent reason. I feel like I should have been looking at the employe...
Read more

CTE Expo Reflection Journal

-
Image
     The objective of the CTE EXPO was to engage the freshmen into seeing what the Web Design Academy was made of and what were the benefits of joining. It was also to make their interests peak as they could be exposed to these special skills.  To prepare for the CTE EXPO I just ran through looking for my best business attire I possibly had because I knew how important this event was, During the actual event I grabbed freshmen attention by saying, "hello are you interested in learning more about the visual design part of the CTE academy?" I used that line pretty much all the time to get the attention of the freshmen who looked lost or confused. I think what went well was that most of the freshmen, all the ones I met with, had an interest in the subject because of the amount of questions they asked and how detailed their questions were. For next year's CTE EXPO it would be best to realign the table structure because the poster boards of the visual design class were in...
Read more

Lab #12 Reflection

-
This lab was fun to learn but a little difficult at first. If you were learning adobe illustrator for the first time and had to do something with it, you would have a lot of trouble if you weren't reading the tutorials or listening to them. At first for me personally it was a little hard trying to figure out what to do. I go to the lab pretty much every day on my free period. Lunch personally is boring for me. Let's get back on topic. I took my time to read the tutorial for adobe illustrator again and absorb what I read. I did the extra reading to scan what I needed to complete the lab and what skills were needed to complete it. Though I wish I can post my work here, I really can't due to the fact it is saved in a pdf file. At first the file was in an .ai file but since I had to submit it in for a grade it was transferred into a pdf file for viewing purposes. It was something we learned from reviewing adobe illustrator. Adobe illustrator wasn't that hard to learn. The b...
Read more