block menu with TweenMax.js

-


More possibilities of animation effects with TweenMax.js inspire me in the project.

 Github DOWNLOAD

 Step1:
link jq library ,TweenMax.js
And fontAwesome.css for this demo



Step2:
html

 Seperate the screen to four blocks.
When trigger the menu button, the menu show up.

 Step3:
CSS

menu-block is actually the full screen which contains four blocks.

Set the position of each block and the backgound color.
Initialize the width of each block to 0%,so that the animation starts from 0 to each block's percentage of width.

 Step4:
js

 With tweenmax.js, first is to initialize a timeline.
Each block animates the width to 25% in 1.2sec with Power4.
Menu list bounce in from the top in 0.9 sec.
And the timeline is reversable.
Another  Menu example with TweenMax.js  read 


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

How to build API and sell on Rapid API

-
Image
  Photo by  Fahim Muntashir  on  Unsplash As a front-end developer, you have to grasp the knowledge about how to fetch the API. But there is a question coming, where the API comes from? Why I can fetch data with a simple URL link and a private API key for some of them. Occasionally, I found a video about it. The curiosity leads me to find out further. Here is the  link . I am gonna record what I learned. F irst, you have to make an app with node.js. Make sure Node.js is installed on the PC. In the project,  npm install express request request-promise nodemon In the package.json file, change the scripts for running. so, you can run the terminal with  npm run dev  or  yarn dev  to run the live server. In the  index.js  file, we begin to build the code. require express and request. the port default is 5000 the home page is the sentence: Welcome to... When the port is 5000, the app listens and runs. For doing a  ScraperAPI , I...
Read more