Today was another cool trick you can do with JavaScript.
You can make the shadow of an element move around following the mouse cursor. For this to work you have to know where is position X and where is position Y (mouseposition). Working with events you can use offsetX and offsetY to get the position where the cursor is. If there are multiple elements of the page a little math has to be done help the program to figure out where exactly the elements is which has to be changed.
const xWalk = Math.round((x / width * walk) - (walk / 2));
const yWalk = Math.round((y / height * walk) - (walk / 2));
These offsetX and offsetY positions seem very useful though a little bit difficult since you have to do a bit of math, but is okay. Still working on the ‘this’ though.A challenge I set for myself to change the background color of together with the mouse shadows. Not that much of a challenge for an experienced coder, but for me it is.
In Bootstrap I have created an Image gallery, though it has a few bugs. The glyphicon images are not loading properly, and I don’t know why. Maybe something to do with the bootstrap.css files. I have also learned about font awesome, which is awesome.
The Bootstrap grid system has its quirks too, I know the newer CSS grid system is here and it is easier, but I will learn the Bootstrap one just in case, it is worth knowing. You can find different cool fonts on this website fontawesome.io and simply used them in your website. Talking about free stuff, unsplash.com is a great site where you can get beautiful pictures for free. Credit has to be give to all the wonderful people out there who create content for everyone.
Had great day I hope you did too! Don’t worry too much about life people! It is wonderful and full of beauties. Just be open and you will see!
Cheers!