To start with – let us Imagine a car moving down the road. If you have noticed it while picking up the speed, you see a blur behind it, showing its motion. This effect is known as motion blur.
Now, why i gave you the above example – the reason is same thing can also be applied to elements on a web page to create a sense of movement and speed.
You can use animation with offset motion blur to make elements appear in HTML and CSS, as if they are moving quickly across the screen. Adding a dynamic and visually appealing touch to your website, making it more engaging for users.
For example, you could use this effect to create a slideshow where images slide in from the side with a blur effect, giving the impression of a fast transition. This can help draw attention to important content or create a sense of excitement and energy on your website.
How To Create A Image Slider for your website
Let us see a live example:
Below is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Me</title>
<style>
body {
font-family: sans-serif;
display: flex;
width: 100vw;
overflow: hidden;
height: 100vh;
padding: 0;
margin: 0;
align-items: center;
justify-content: center;
}
:root {
--shadowSize: 25px;
--shadow: var(--shadowSize) var(--shadowSize) 0 2px rgba(255, 0, 0, 0.3),
calc(var(--shadowSize) * -1) calc(var(--shadowSize) * -1) 0 2px
rgba(0, 255, 0, 0.33);
--bigShadow: calc(var(--shadowSize) * 2) calc(var(--shadowSize) * 2) 0 2px
rgba(255, 0, 0, 0.5),
calc((var(--shadowSize) * 2) * -1) calc((var(--shadowSize) * 2) * -1) 0 2px
rgba(0, 255, 0, 0.5);
}
@keyframes appear {
0% {
opacity: 0;
transform: scale3d(9, 1, 1) translateX(-10vw);
box-shadow: var(--bigShadow);
}
40% {
box-shadow: none;
transform: scale3d(1, 1, 1) translateX(0);
}
45% {
opacity: 1;
transform: scale3d(0.35, 1.8, 1);
}
75% {
box-shadow: none;
transform: scale3d(0.35, 1.8, 1);
}
80% {
box-shadow: var(--shadow);
transform: scale3d(1.1, 1, 1);
}
85% {
transform: scale3d(1.4, 1, 1);
}
100% {
}
}
.box {
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
width: 350px;
background: white;
border: 2px solid black;
height: 250px;
transform-origin: 100% 50%;
}
.wrap {
padding: 200px;
}
.wrap:hover .box,
.wrap:active .box {
animation: appear 1s cubic-bezier(0.77, 0.33, 1, 0.72) 1;
}
</style>
</head>
<body>
<div class="wrap">
hover me
<div class="box">
<h3>Codemagnet - Your Magnetic Resource For Coding Brilliance</h3>
</div>
</div>
</body>
</html>
Output:
Explanation of the above code:
HTML Part:
<!DOCTYPE html>: Declares the document type and version of HTML being used.<html lang="en">: The root element of the HTML document, indicating the language of the document.<head>: Contains meta-information about the document, such as character encoding and viewport settings.<meta charset="UTF-8">: Specifies the character encoding for the document (UTF-8).<meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport to the width of the device and initial scale to 1.0, which is important for responsive design.<title>Hover Me</title>: Sets the title of the document displayed in the browser tab.
CSS Part:
body { ... }: Styles applied to the<body>element, setting the font family, display properties, and alignment of content.:root { ... }: Defines custom CSS variables for use throughout the stylesheet, such as shadow sizes and colors.@keyframes appear { ... }: Defines a keyframe animation calledappearthat gradually changes the opacity and scale of an element..box { ... }: Styles applied to the.boxclass, setting the font weight, display properties, size, background color, border, height, and transform origin..wrap { ... }: Styles applied to the.wrapclass, setting padding around the content..wrap:hover .box, .wrap:active .box { ... }: Styles applied to the.boxclass when the.wrapelement is hovered over or activated, triggering theappearanimation.
This code creates a simple HTML document with a box that animates when hovered over, demonstrating the use of CSS animations.
In conclusion, animation with offset motion blur using HTML and CSS can enhance the visual appeal and user experience of your website. By adding a sense of movement and speed to elements, you can create dynamic and engaging web content. Whether used for transitions, sliders, or other effects, this technique can help make your website more vibrant and captivating for visitors.
Leave a Reply