Lab 29: Mouse Move Shadow

-
Link to Lab 29:

In this lab, we were assigned to create a user interactive webpage where different text shadows would move as the mouse moves. In the image below, you can see exactly what I mean, there are four different texts of the same word and those four will move depending on the location of the mouse. Honestly, the Javascript isn't very long, it is just one function that controls everything which is the function below.
function shadow(e) {
const { offsetWidth: width, offsetHeight: height } = hero;
let { offsetX: x, offsetY: y } = e;
if (this !== e.target) {
x = x + e.target.offsetLeft;
y = y + e.target.offsetTop;
}
const xWalk = Math.round((x / width * walk) - (walk / 2));
const yWalk = Math.round((y / height * walk) - (walk / 2));
text.style.textShadow = `
${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
`;
}

 This function controls the shadows of the text and the last four lines are the ones that dictate the movement of the shadows. The other part that needs to be added is an event listener that essentially performs the function when the mouse is hovering over the canvas. This lab was very fun to play with and see what can be done with. There is also the fact that the lab is just aesthetically pleasing.


Comments

Post a Comment

Popular posts from this blog

Lab 23-2: Type Ahead

-
Image
Link to Lab 23-2: I personally found this lab to be very interesting because we were assigned to make a search form that when only a few letters are types, a lost of cities or states with that combination of letters would appear. The parts of the code that were needed included code that would search through both the list of cities and lost of states, code that would ignore words such as "an" because it is not part of the city or state name and code that would display the results. Honestly, looking at the code, it is simpler than it looks. I thought this lab would be very useful in the future because it could be a great addition to a website where I am looking through a long list and want to narrow down the options. This code isn't just limited to cities and states, it could be applied to books, movies, and so much more
Read more

WBL Workshop 2

-
For this workshop, we learned about resumes and the different techniques and strategies to make sure our resumes pop out to interviewers. Some of the tips they gave us were that resumes is that generally resumes should only be one page long, easy to read, use a standard font, and should always use proper grammar. An exercise we did in order to begin thinking about our resumes is to think about our hards and soft skills in order to have a section that lists all our skills. Hard skills I wrote were knowing Dreamweaver and Photoshop. Some of my soft skills were being organized, good communication and fluency in Spanish. This WBL workshop was very important to learn how to further improve my resume
Read more

Lab7 - Simple Accordion

-
Image
Link to Lab7 In this lab, we were assigned to make an accordion, which is basically a table with rows and when the mouse hovers over it another row appears. The JQuery code is below: $(document).ready(function(){ $("dd").hide(); $(".answer").hide(); $("dl").on("mouseover", "dt", function(){ $(this).next() .slideDown(300) .siblings("dd") .slideUp(300); });  }); This lab uses the hide commands which does exactly what it says, it hide any element that it is assigned to. The next piece of code is actually what is in charge of allowing the accordion to work. It states that when the mouse hovers over the element "dl" that it would slide down the element "dd" and when it does not then it will slide up. 
Read more