Create A Website With Cool Animations Using HTML CSS And JavaScript
Elevate your website to the next level with our comprehensive guide on creating cool floating effect animations using HTML, CSS, and JavaScript. Our easy-to-follow tutorial will help you design a website that captivates your audience and keeps them engaged with eye-catching animations that add depth and dimension to your pages. Whether you're a beginner or an experienced developer, our guide will walk you through the process of creating floating effects that add a touch of magic to your website. Start building your dream website today!
With the use of HTML, CSS, and JavaScript, you can create a website that truly stands out from the crowd. By incorporating floating effects, you can add a dynamic and interactive element that captures the attention of your visitors and keeps them engaged. Whether you're looking to create a personal blog, a business website, or an online store, our guide will provide you with the tools and knowledge to create a unique and professional-looking site that reflects your brand and personality.
In addition to the creative benefits of floating effect animations, they also offer practical advantages. By adding movement and depth to your website, you can guide your visitors' attention and create a more intuitive user experience. With our guide, you'll learn how to use floating effects strategically to highlight important content and make your website more user-friendly. Whether you're a beginner or an experienced developer, our guide will help you take your website to the next level with cool floating effect animations.
Create A Website With Cool Animations Using HTML CSS And JavaScript
<!--DOCTYPE html--> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--==title========================--> <title>Website HTML</title> <!--==CSS==========================--> <link rel="stylesheet" href="css/style.css"> <!--==Poppins-font=================--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" /> </head> <body> <!--==main======================================--> <section id="main"> <!--==navigation===============--> <nav class="navigation"> <!--logo--> <a href="#" class="logo"> <img alt="Logo" src="imgaes/logo.png"> </a> <!--login--> <a href="#" class="nav-login">Login</a> </nav> <div class="main-slider"> <!-- Swiper --> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <!--1--> <div class="swiper-slide"> <div class="main-slider-box"> <img alt="" src="imgaes/1.png"> <div class="main-slider-text"> <strong>Somorye</strong> <h4>ave.</h4> </div> </div> </div><!--slide-end--> <!--1--> <div class="swiper-slide"> <div class="main-slider-box"> <img alt="" src="imgaes/2.png"> <div class="main-slider-text"> <strong>Somorye</strong> <h4>ave.</h4> </div> </div> </div><!--slide-end--> <!--1--> <div class="swiper-slide"> <div class="main-slider-box"> <img alt="" src="imgaes/3.png"> <div class="main-slider-text"> <strong>Somorye</strong> <h4>ave.</h4> </div> </div> </div><!--slide-end--> </div> </div> <div class="swiper-pagination"></div> </div> <!--btns--> <div class="slider-btns"> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </section> <!-- Swiper JS --> <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper(".mySwiper", { direction: "vertical", pagination: { el: ".swiper-pagination", dynamicBullets: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, autoplay: { delay: 4000, disableOnInteraction: false, }, }); </script> </body> </html>
*{
margin: 0px;
padding: 0px;
font-family: poppins;
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
/*========================*/
#main{
width: 100%;
min-height: 100vh;
background-size: 120%;
background-position: center bottom;
display: flex;
position: relative;
background-image: url(../imgaes/main-bg.jpg);
flex-direction: column;
}
#main::after{
content: '';
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 50vh;
background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 57%, rgba(0,0,0,0) 100%);
z-index: 4;
}
#main::before{
content: '';
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 70vh;
background: linear-gradient(0deg, rgba(0,0,0,0.7) 12%, rgba(0,0,0,0) 57%, rgba(0,0,0,0) 100%);
z-index: 4;
}
.main-slider{
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: calc(100vh - 100px);
overflow: hidden;
}
.mySwiper{
width: 100%;
height: 100% !important;
overflow: hidden;
}
.main-slider-box{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
user-select: none;
}
.main-slider-box img{
position: absolute;
left: 50%;
bottom: -50px;
transform: translateX(-50%);
height: 100%;
object-fit: contain;
object-position: center bottom;
z-index: 3;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translate(-50%, 0px);
}
50% {
transform: translate(-50%, -20px);
}
100% {
transform: translate(-50%, 0px);
}
}
.main-slider-text{
position: absolute;
left: 22%;
top: 50%;
animation: float 6s ease-in-out infinite;
transform: translateX(-50%);
}
.main-slider-text strong{
color: #ffffff;
text-transform: uppercase;
letter-spacing: 15px;
font-size: 0.7rem;
}
.main-slider-text h4{
color: #ca1319;
font-size: 8rem;
line-height: 5rem;
letter-spacing: 20px;
font-weight: 600;
}
.slider-btns{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
z-index: 5;
height: 60px;
width: 120px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.swiper-button-next,
.swiper-button-prev{
position: static !important;
transform: rotate(-90deg);
margin: 0px !important;
}
.swiper-button-next::after,
.swiper-button-prev::after{
color: #ebebeb;
font-size: 22px !important;
}
.swiper-pagination-bullet{
background: #e2e2e2 !important;
}
.navigation{
position: absolute;
left: 50%;
top: 30px;
width: 90%;
transform: translateX(-50%);
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 5;
}
.logo img{
height: 50px;
object-fit: contain;
object-position: center;
}
.nav-login{
color: #e6e6e6;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
letter-spacing: 5px;
text-transform: uppercase;
border-bottom: 2px solid #e2e2e250;
display: none;
}
.swiper-pagination{
margin-right: 60px;
}
@media(max-width:1400px){
#main{
background-size: cover;
background-repeat: no-repeat;
}
}
@media(max-width:920px){
.main-slider-text{
left: 40%;
z-index: 5;
}
}
@media(max-width:520px){
.main-slider-text{
left: 60%;
}
.main-slider-text h4{
font-size: 5rem;
line-height: 5rem;
}
.main-slider-box img{
height: 90%;
}
}
Comments