off canvas image menu transition

How we can create an off-canvas menu with a cool image transition? Solution: See this Off Canvas Image Menu Transition Effects, Scroll Image Menu Animation.

Previously I have shared some types of menu, but this is an image based off-canvas menu. Basically, When the menu is being opened, the page slides out of view, revealing the menu and blocking other elements. In other words, when the menu reveals by sliding and hide the page behind it. Then its called off-canvas menu. And this program is based on full-page images as content and menu items. The complete package is an off-canvas image menu with transition effects.

Today you will learn to create a Scroll Image Menu Animation. Basically, there is a total of 7 images and two sections. The first section is showing the image count, and the second shows the title and description, and the whole screen contains the image. When you will scroll up or down then the image will change with a cool transition and the count will update in the left side section. At first, you will show a scroll down text and arrow down animation. When you will hover on the counting section, then the off-canvas menu will reveal with a slide-out effect. In the menu you will see all the images, here you can directly jump or change the image by click and select.

So, Today I am sharing Off Canvas Image Menu Transition Effects. There I have used HTML to create the layout, CSS for styling and all animation effect, jQuery for functioning slide menu reveal, image change on the scroll, etc. You can use the whole program to create your own portfolio website, where you can show your work in the image with a title and other texts.

If you are thinking now how this scrolling image menu actually is, then see the preview given below.

Preview Of Scroll Images Menu Animation

See this video preview to getting an idea of how this menu transition looks like.

Live Demo

Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

Off Canvas Image Menu Transition Effects Source Code

Before sharing source code, let’s talk about it. First I have created the main div with class name ‘main’ and placed all the items inside it. There I have created multiple sections to create the transition effect. And used HTML Data-* attribute to store and pass data. Create a separate div for show pagination, and on hover, it will reveal the menu, create a heading for scroll down text and arrow animation. Also in the HTML file, I have linked other files like CSS, JS, and jQuery CDN.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to all the elements. In the CSS file, I have linked all the images. There I have used transform and transition commands to create the animation effect. I also used the @media query to create a responsive design.

jQuery handling here all the functions in the program. There I have fetched all the elements by class name using $(".class name") method. Used for loop for{} command to count images and pagination function. There I have used if{} else{} statements to declare conditions. The jQuery codes are a little complicated, you will understand after getting the codes I can’t explain all in writing.

For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created Off Canvas Image Menu Transition Effects, Scroll Image Menu Animation. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

LEAVE A REPLY

Please enter your comment!
Please enter your name here