jQuery hover animation

-

That's my website. When hovering on the picture. The picture will turn into colorful one and animate to right a little. Meanwhile, the title will scroll to top .  The main function is based on jQuery.
I love Taylor Swift so much! aha..
Here is my code below.
How many pictures is based on how many div.pentagon.

Styling sets the styles before animation and after.
JQuery is so convenient. So powerful!

Popular posts from this blog

Meal Finder using MealDB API

-
Image
  Course from Brad Traversy Features: fetching API with fetch() manipulating DOM in js  Github code HTML The input box includes a button to submit a search, and another one is the random search button. Both of them will trigger addEventlistener. The result heading shows the result message. The meals show the result displaying of cards. The single meal shows the details of picked meal. CSS    T he container is centered, and the form is flex. The meals is a list of results, which distributed to four items each line. The each meal with info is in the absolute position covered on the images. Changing the opacity of meal info's background by hovering each meal. The responsive purpose. JS get the DOMs needed search and random click trigger the functions reset the single meal first and then fetch the meals data from the MealDB API AND result heading shows the meal according to the searching name If no meal in the database, show the message map all the meals if have and then...
Read more

Fancyapps — easily build overlay windows with carousel

-
Image
  I used to play around with these gallery boxes with old versions. Now the Fancybox is the 4th version with more functions, including plugins, events, options. They even provided how to use React easily demo. I remember when I was learning Javascript, the fancy project is building a carousel, it took some time and logical understanding, but it’s a good way to learn the logic JS though. But for now, I will be grasping the eyeball by this fancy Javascript library. Since it’s a fast-developing world, the result should be precise, accurate, and fast, right? Fanyapps includes  Fancybox, Carousel, and Panzoom . Fancybox is a flex gallery container, which is touch and mobile optimized with swipe, drag, and pinch-to-zoom gestures. Carousel is a display place with smooth animations and more functions inside. Panzoom is a customized zooming function. They combined smoothly and more functionally. Official site Playaround the demo here Step1: import the library with npm or using CDN I li...
Read more

Speech text Reader with Javascript

-
Image
  course from Brad Traversy Github code  Features: web speech API HTML toggle-button for hiding and showing the text box the select option list will fetch from API  textarea value pass into the message text when reading the main show up the list of data (images and text) CSS hide the text box outside top of client Page and position turns down when adding classlist show when the box is active , the box-shadow shows up and the image fit in the box grid the box at the main part. four columns and responsive screen setting up JS get the DOM needed the data of images and text array loop the data to get the image and the text, set the box dom and classList, then append to the main section when clicking the box, setTextMessage() and speanText(),also for the box-shadow effect with active classname For fetching the text and language with Web speech API .  new message of input text value as a parameter the text pass to message value speakText with speecgSynthesis.speak()  ...
Read more