Liquid Animation With Html Css And JavaScript With Free Source Code

Author - personCodeatnow

Follow Us On Telegram   Telegram link

Download Code

HTML 
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow | Liquid Transition Effect</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
 <div id="rgbKineticSlider" class="rgbKineticSlider"></div>
 <a href="#" class="menu">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <line x1="4" y1="8" x2="40" y2="8" />
  <line x1="0" y1="16" x2="40" y2="16" />
</svg>
 </a>
 <div class="wrapper">
  <div class="separator"></div>
  <div class="separator-text">Tours</div>
  <div class="ticket">
   <div class="ticket-list">
    <div class="ticket-text__wrapper">
     <span class="ticket-title">Country</span>
     <span class="ticket-subtitle">Italy</span>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
     <path d="m6 9 6 6 6-6" />
    </svg>
   </div>
   <div class="ticket-list">
    <div class="ticket-text__wrapper">
     <span class="ticket-title">City</span>
     <span class="ticket-subtitle">Roma</span>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
     <path d="m6 9 6 6 6-6" />
    </svg>
   </div>
   <div class="ticket-list">
    <div class="ticket-text__wrapper">
     <span class="ticket-title">Departing</span>
     <span class="ticket-subtitle">19 June</span>
    </div>
    <svg class="returning" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-switch-horizontal" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <polyline points="16 3 20 7 16 11" />
     <line x1="10" y1="7" x2="20" y2="7" />
     <polyline points="8 13 4 17 8 21" />
     <line x1="4" y1="17" x2="13" y2="17" />
    </svg>
    </svg>
   </div>
   <div class="ticket-list depart">
    <div class="ticket-text__wrapper">
     <span class="ticket-title">Returning</span>
     <span class="ticket-subtitle">27 June</span>
    </div>
    </svg>
   </div>
   <div class="ticket-list">
    <div class="ticket-text__wrapper">
     <span class="ticket-title">Travelers</span>
     <span class="ticket-subtitle">2 Adults</span>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
     <path d="m6 9 6 6 6-6" />
    </svg>
    </svg>
   </div>
   <div class="ticket-list">
    <svg class="settings" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-adjustments-horizontal" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <circle cx="14" cy="6" r="2" />
     <line x1="4" y1="6" x2="12" y2="6" />
     <line x1="16" y1="6" x2="20" y2="6" />
     <circle cx="8" cy="12" r="2" />
     <line x1="4" y1="12" x2="6" y2="12" />
     <line x1="10" y1="12" x2="20" y2="12" />
     <circle cx="17" cy="18" r="2" />
     <line x1="4" y1="18" x2="15" y2="18" />
     <line x1="19" y1="18" x2="20" y2="18" />
    </svg>
    </svg>
    </svg>
   </div>
   <div class="search">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <circle cx="10" cy="10" r="7" />
  <line x1="21" y1="21" x2="15" y2="15" />
</svg>
   </div>
  </div>
 </div>
 <nav>
  <a href="#" class="main-nav prev" data-nav="previous">
   <div class="slider prev">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
    </svg>
   </div>
  </a>
  <a href="#" class="main-nav next" data-nav="next">
   <div class="slider next">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
    </svg>
   </div>
  </a></a>
 </nav>
</div>
<!-- partial -->
  <script src='https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/TweenMax.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/imagesLoaded.pkgd.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/pixi.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/pixi-filters.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/rgbKineticSlider.js'></script><script  src="./script.js"></script>

</body>
</html>
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow | Liquid Transition Effect</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
 <div id="rgbKineticSlider" class="rgbKineticSlider"></div>
 <a href="#" class="menu">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <line x1="4" y1="8" x2="40" y2="8" />
  <line x1="0" y1="16" x2="40" y2="16" />
</svg>
 </a>
 <div class="wrapper">
  <div class="separator"></div>
  <div class="separator-text">Tours</div>
  <div class="ticket">
   <div class="ticket-list">
    <div class="ticket-text__wrapper">
     <span class="ticket-title">Country</span>
     <span class="ticket-subtitle">Italy</span>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
     <path d="m6 9 6 6 6-6" />
    </svg>
   </div>
   <div class="ticket-list">
    <div class="ticket-text__wrapper">
     <span class="ticket-title">City</span>
     <span class="ticket-subtitle">Roma</span>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
     <path d="m6 9 6 6 6-6" />
    </svg>
   </div>
   <div class="ticket-list">
    <div class="ticket-text__wrapper">
     <span class="ticket-title">Departing</span>
     <span class="ticket-subtitle">19 June</span>
    </div>
    <svg class="returning" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-switch-horizontal" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <polyline points="16 3 20 7 16 11" />
     <line x1="10" y1="7" x2="20" y2="7" />
     <polyline points="8 13 4 17 8 21" />
     <line x1="4" y1="17" x2="13" y2="17" />
    </svg>
    </svg>
   </div>
   <div class="ticket-list depart">
    <div class="ticket-text__wrapper">
     <span class="ticket-title">Returning</span>
     <span class="ticket-subtitle">27 June</span>
    </div>
    </svg>
   </div>
   <div class="ticket-list">
    <div class="ticket-text__wrapper">
     <span class="ticket-title">Travelers</span>
     <span class="ticket-subtitle">2 Adults</span>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
     <path d="m6 9 6 6 6-6" />
    </svg>
    </svg>
   </div>
   <div class="ticket-list">
    <svg class="settings" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-adjustments-horizontal" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <circle cx="14" cy="6" r="2" />
     <line x1="4" y1="6" x2="12" y2="6" />
     <line x1="16" y1="6" x2="20" y2="6" />
     <circle cx="8" cy="12" r="2" />
     <line x1="4" y1="12" x2="6" y2="12" />
     <line x1="10" y1="12" x2="20" y2="12" />
     <circle cx="17" cy="18" r="2" />
     <line x1="4" y1="18" x2="15" y2="18" />
     <line x1="19" y1="18" x2="20" y2="18" />
    </svg>
    </svg>
    </svg>
   </div>
   <div class="search">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <circle cx="10" cy="10" r="7" />
  <line x1="21" y1="21" x2="15" y2="15" />
</svg>
   </div>
  </div>
 </div>
 <nav>
  <a href="#" class="main-nav prev" data-nav="previous">
   <div class="slider prev">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
    </svg>
   </div>
  </a>
  <a href="#" class="main-nav next" data-nav="next">
   <div class="slider next">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
    </svg>
   </div>
  </a></a>
 </nav>
</div>
<!-- partial -->
  <script src='https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/TweenMax.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/imagesLoaded.pkgd.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/pixi.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/pixi-filters.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/rgbKineticSlider.js'></script><script  src="./script.js"></script>

</body>
</html>
CSS 
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #11131e;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2em;
  width: 100%;
  height: 100vh;
  background-size: 400% 400%;
  -webkit-animation: bg-anim 15s ease infinite;
          animation: bg-anim 15s ease infinite;
}

.container {
  max-width: 1160px;
  border-radius: 4px;
  max-height: 660px;
  height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.rgbKineticSlider {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.rgbKineticSlider canvas {
  position: absolute;
  display: block;
}

nav a {
  color: #fff;
  text-decoration: none;
  position: absolute;
  top: 50%;
  z-index: 1;
  padding: 20px;
}

nav a.next {
  right: 40px;
}

nav a.prev {
  left: 40px;
}

svg {
  width: 28px;
}

.menu {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #f5f5f5;
}

.slider {
  border: 1px solid #fff;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #fff 40%, transparent 0%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.4s ease-out;
  cursor: pointer;
}
.slider:hover {
  transform: scale(1.5);
}
.slider.prev svg {
  transform: rotate(-180deg);
}

.wrapper {
  max-width: 900px;
  width: 88%;
  top: calc(100% - 160px);
  right: 50%;
  transform: translatex(50%);
  position: absolute;
  color: #f5f5f5;
}

.separator {
  border: 1px solid #fdfdfe;
}
.separator-text {
  position: absolute;
  top: 20px;
}

.ticket {
  position: absolute;
  top: 50px;
  right: 50%;
  font-family: "Poppins", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(212, 212, 212, 0.5);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  padding: 16px 12px;
  border-radius: 4px;
  transform: translatex(calc(50% - 25px));
}
.ticket-list {
  display: flex;
  align-items: center;
  padding-right: 16px;
}
.ticket-list + .ticket-list {
  border-left: 1px solid #fdfdfe;
  padding-left: 16px;
}
.ticket-list.depart {
  border-left: 0;
}
.ticket .returning {
  margin-left: 32px;
}
.ticket-text__wrapper {
  display: flex;
  flex-direction: column;
}
.ticket-title {
  font-size: 12px;
}
.ticket-subtitle {
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.ticket svg {
  width: 20px;
  margin-left: 60px;
}
.ticket .settings {
  margin: 0;
}
.ticket .search {
  background-color: #fe6651;
  position: absolute;
  right: -54px;
  height: 100%;
  width: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 4px 4px 0;
}
.ticket .search svg {
  margin: 0;
  width: 20px;
}

@-webkit-keyframes bg-anim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes bg-anim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 986px) {
  .ticket-list:nth-child(3),
.ticket-list:nth-child(4) {
    display: none;
  }
}
@media (max-width: 800px) {
  .ticket-list:nth-child(2) {
    display: none;
  }

  nav a.next {
    right: 20px;
  }

  nav a.prev {
    left: 20px;
  }
}
@media (max-width: 590px) {
  .ticket-list:nth-child(5),
.ticket-list:nth-child(6) {
    display: none;
  }

  body {
    padding: 1em;
  }

  .slider {
    width: 26px;
    height: 26px;
  }
  .slider svg {
    width: 20px;
  }
  .slider:hover {
    transform: scale(1.1);
  }

  .main-nav {
    top: 0;
    padding: 20px 5px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  nav a.next {
    left: 48px;
  }

  nav a.prev {
    left: 10px;
  }
}
JS 
// https://github.com/hmongouachon/rgbKineticSlider
const images = [
 "https://images.unsplash.com/photo-1636537511494-c3e558e0702b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
  "https://images.unsplash.com/photo-1468436385273-8abca6dfd8d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1705&q=80",
  "https://images.unsplash.com/photo-1493707553966-283afac8c358?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
 "https://images.unsplash.com/photo-1508189860359-777d945909ef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
];

const texts = [
  ["Istanbul", "\"Take a greatest journey on your life\""],
  ["Amsterdam", "\"We take photos as a return ticket to a moment otherwise gone\""],
  ["Paris", "\"Traveling – it leaves you speechless, then turns you into a storyteller\""],
  ["Sweden", "\"Once a year, go someplace you’ve never been before\""]
];

rgbKineticSlider = new rgbKineticSlider({
  slideImages: images,
  itemsTitles: texts,

  backgroundDisplacementSprite: "https://i.ibb.co/N246LxD/map-9.jpg", 
  cursorDisplacementSprite: "https://i.ibb.co/KrVr51f/displace-circle.png",
  cursorImgEffect: true,
  cursorTextEffect: true,
  cursorScaleIntensity: 0.65,
  cursorMomentum: 0.14,

  swipe: true,
  swipeDistance: window.innerWidth * 0.4,
  swipeScaleIntensity: 2,

  slideTransitionDuration: 1, // transition duration
  transitionScaleIntensity: 30, // scale intensity during transition
  transitionScaleAmplitude: 160, // scale amplitude during transition

 
  nav: true, // enable navigation
  navElement: ".main-nav", // set nav class


  imagesRgbEffect: true,
  imagesRgbIntensity: 0.9,
  navImagesRgbIntensity: 80,

  textsDisplay: true, 
  textsSubTitleDisplay: true, 
  textsTiltEffect: true,
  googleFonts: ["Playfair Display:700", "Roboto:400"],
  buttonMode: false,
  textsRgbEffect: true,
  textsRgbIntensity: 0.03,
  navTextsRgbIntensity: 15,

  textTitleColor: "white",
  textTitleSize: 125,
  mobileTextTitleSize: 80,
  textSubTitleColor: "white",
  textSubTitleSize: 21,
  mobileTextSubTitleSize: 16,
  textSubTitleLetterspacing: 2,
  textSubTitleOffsetTop: 90, 
  mobileTextSubTitleOffsetTop: 90
});
Tags

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link