Facebook-f Instagram Linkedin-in

On Scroll change Background Color

On scroll change background color animation with minimal HTML + CSS + jQuery to highlight your CTA sections or Hero Product.

Easy to implement code

HTML :

<section>
 <div class="shape shape1">
  <h2>Vertical Scroll</h2>
 </div>

 <div class="shape shape2">
  <h2>Vertical Scroll</h2>
 </div>

 <h2>Vertical Scroll</h2>
</section>

CSS :

section {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: #fdfaf1;
}

section .shape {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 10;
}

section .shape.shape1 {
   background-color: #DFB42F;
   clip-path: circle(200px at 0 0);
}

section .shape.shape2 {
   background-color: #2D75EB;
   clip-path: circle(150px at 100% 100%);
}

section h2 {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
   text-align: center;
   color: #fff;
   font-size: 12em;
}

section .shape.shape1 h2 {
   color: transparent;
   -webkit-text-stroke: 3px #333;
}

section .shape.shape2 h2 {
   color: transparent;
   -webkit-text-stroke: 3px #333;
}

JQUERY :

const shape1 = document.querySelector(".shape1");
const shape2 = document.querySelector(".shape2");

const modifier = window.innerWidth / 520;

window.addEventListener("scroll", () => {

const scrollY = window.scrollY;
shape1.style.clipPath = "circle(" + scrollY * modifier + "px at 0 0)";
shape2.style.clipPath = "circle(" + scrollY * modifier + "px at 100% 100%)";

});

LIVE PREVIEW :

Discover more Articles

Cool Card Animation on Mouse Move

Create a Cool card animation on mouse hover with minimal HTML + CSS + jQuery to highlight your Services, Team member cards.

Easy to implement code

HTML :

<div class="card" style="width: 20rem;">
 <img src="images/male-profile.jpg" class="card-img-top" alt="">
 <div class="card-body">
   <h5 class="card-title">James Leane</h5>
   <p class="card-text">Founder @WiseWeb</p>
 </div>
</div>

<div class="card" style="width: 20rem;">
  <img src="images/female-profile.jpg" class="card-img-top" alt="">
  <div class="card-body">
    <h5 class="card-title">Sarah Lewis</h5>
    <p class="card-text">Operations Coordinator</p>
 </div>
</div>

CSS :

.card {
    background-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    border-color: #fafafa;
}
.card-img-top {
    width:100%;
    height: 280px;
    object-fit:cover;
}
.card-body {
    padding: 20px;
}
.card-title {
    margin-bottom: 3px;
}
.card-text {
    font-size: 14px;
    color: #6d737d;
}

JQUERY :

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tilt.js@1.1.19/dest/tilt.jquery.js"></script>

<script type="text/javascript">
(function($) {

   "use strict";

   $(".card").tilt({
    maxTilt: 15,
    perspective: 1400,
    easing: "cubic-bezier(.03,.98,.52,.99)",
    speed: 1200,
    glare: true,
    maxGlare: 0.15
   });
}(jQuery));
</script>

LIVE PREVIEW :

James Leane

Founder @WiseWeb

Sarah Lewis

Operations Coordinator

Discover more Articles

Infinite Scrolling Text Animation with HTML & CSS only

Here’s the easiest way to build Inifinite maquee scroller with HTML+CSS only. Easy to use for Elementor, Custom HTML Website animations for Call to action blocks.

Easy to implement code

HTML :

<div class="scroll-bar">
  <div class="scroll-items">
   <span>Schedule <i>a call</i> <span class="dot"></span></span>
   <span>Schedule <i>a call</i> <span class="dot"></span></span>
   <span>Schedule <i>a call</i> <span class="dot"></span></span>
  </div>

  <div class="scroll-items" aria-hidden="true">
   <span>Schedule <i>a call</i> <span class="dot"></span></span>
   <span>Schedule <i>a call</i> <span class="dot"></span></span>
   <span>Schedule <i>a call</i> <span class="dot"></span></span>
  </div>
</div>

CSS :

.scroll-bar {
   display: flex;
   overflow: hidden;
   user-select: none;
   gap: 4rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   font-family: "Questrial";
   background: #0b0b1d;
}

.scroll-items {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 4rem;
   min-width: 100%;
   animation: scroll 45s linear infinite;
}

@keyframes scroll {
   0% {
    transform: translateX(0);
   }
   100% {
    transform: translateX(calc(-100% - 4rem));
   }
}

.scroll-items span {
   font-size: 5vw;
   font-weight: 500;
   white-space: nowrap;
   display: flex;
   align-items: center;
   color: #ffffff;
   transition: all 0.5s ease;
}

.scroll-bar:hover span {
   color: #32dd9f;
}

.scroll-items span.dot {
   width: 0.4rem;
   height: 0.4rem;
   background: #0b0b1d;
   border-radius: 50%;
   border: 10px solid #ffffff;
   display: inline-block;
   margin-left: 4.5rem;
   transition: all 0.5s ease;
}

.scroll-bar:hover span.dot {
   border-color: #32dd9f;
}

LIVE PREVIEW :

Schedule a call Schedule a call Schedule a call

Discover more Articles