Divinector

Sticky header menus or navigation bars are also called fixed headers, which cause the header of a website to remain at the top of the page as a user scrolls up and down. One of the easiest ways to make a sticky header is to use the CSS position: sticky. But We have used some custom js code to make the sticky header hide on scroll down and reveal on scroll up. DOWNLOAD CODE

--

--

Today we will share with you a simple but beautiful snippet about 3D flip card animation. This animation can be accomplished via an on-click event or hover. We have decided to do this animation on hover. The flip card effect animation is when we hover over a card, its back part rotates and comes in front of us. The card will come back to its previous state when we lift the hover. This animation is more common in websites nowadays, especially e-commerce websites. DOWNLOAD CODE

--

--

There is a recent trend in website design that shows fullscreen videos. Nowadays, a lot of websites are made using this trend. There is a good reason why it is used by website designers. A background video is a great way to amplify your brand’s message, add a dynamic look to it, and help the website look astounding. Full-screen video backgrounds can be a good resource if you want to encourage new visitors to stay longer on your website. Of course, it is also true that content is king and there can be no substitute for it. However, if the content representation is modern and aesthetic then your website visitors will get attracted to it and your business leads and ranking will increase. GET CODE

--

--

The text submitted by your customers can be seen in a testimonials slider. The testimonials section is a powerful tool for establishing trust and encouraging potential buyers to take action because it shows how others have benefited from your product. When your visitor read your testimonial slider they are judging from the customer’s point of view. They see themselves using the product you are selling. Nowadays people don’t want to stay on a website for more than 2 to 3 minutes. Long testimonials can be boring to read so it’s best to keep testimonial content as short and simple as possible. Today we will share with you the source code of another testimonial slider example. It is designed with Bootstrap 5, the latest version of the Bootstrap framework. If you want to use testimonials in your projects, this is a good example. DOWNLOAD CODE

--

--

css animated background

In this blog, we are going to learn how to create a CSS-only animated background for the header section of a website. Animated backgrounds give your website a different look. Animation helps improve the aesthetics of a website. Today we will share one such background animation snippet with you. Animated background for websites is common nowadays. Out of the general website design trend, nowadays many developers are designing websites in a slightly different way. This has become the demand of this time. Because the more unique a website is, the more acceptable and appreciated it will be to users. As animation adds a different dimension to a website, this is a trend that every developer wants to use. Download Code

--

--

In this blog, we will share a CSS animation example snippet about CSS loading animation. If the system can’t process a user’s request right now, it will display a loading animation to tell the user that your system is still processing your request. If the user doesn’t see anything then they think the system is malfunctioning and they leave the website. It’s better to have some sort of animation during the loading process to engage the user.

DOWNLOAD CODE

--

--

In this blog, we will share a snippet about Showing and Hide passwords using HTML CSS and Javascript. We’ll learn how to hide and show a password with an eye icon. This feature is very useful and should be used on your login form for privacy. There are two steps in this process and they are easy to follow. The login form needs to be created in the first place. Then we will use some javascript code to get the show and hide the password effect.

DOWNLOAD CODE

--

--

An automatic image slider shows images by one. There will be no indicators or controls in the slideshow. The process is automatic. Advanced functionalities will not be there as no JavaScript was used. You can also call it automatic slideshow animation. We used simple HTML and CSS to create this snippet.

Download Code

--

--

user profile card design

Glassmorphism is a design style used to give different web elements a unique look. It looks like a frosted glass Effect. A designer named Michal Malewicz invented this design style. This design style is used in many web and app development these days. In this blog, we will create a profile card UI design using this style. We tried to create a user profile card with a glassmorphism design style. A user’s profile card has information about them. The information is his name, designation, brief description, and social media profile link. The same elements are there in our user profile card design.

DOWNLOAD CODE

--

--

Divinector

Divinector

DivinectorWeb Provides HTML, CSS, Javascript Tutorials along with real-time examples and Code.