तैरते हुए प्रभाव वाला पालतू हिंडोला

804 Andev.web

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

21 August 2024

ड्रैग और व्हील के साथ हिंडोला

13 November 2024

छवियों के लिए 3D CSS फोटो फ्रेम प्रभाव

13 November 2024

शुद्ध CSS का उपयोग करके छवियों पर फ्रेम प्रभाव

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="carousel">
  <div class="carousel__item carousel__item--left">
    <img src="https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?q=80&w=3388&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Buddy</h3>
      <p> Friendly, loyal, playful</p>
    </div>
  </div>
  <div class="carousel__item carousel__item--main">
    <img src="https://images.unsplash.com/photo-1552053831-71594a27632d?q=80&w=3362&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Max</h3>
      <p>Energetic, brave, strong</p>
    </div>
  </div>
  <div class="carousel__item carousel__item--right">
    <img src="https://images.unsplash.com/photo-1537151625747-768eb6cf92b2?q=80&w=2568&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Bella</h3>
      <p>Sweet, gentle, loving</p>
    </div>
  </div>
  <div class="carousel__item">
    <img src="https://images.unsplash.com/photo-1588943211346-0908a1fb0b01?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Charlie</h3>
      <p>Cheerful, affectionate, lively</p>
    </div>
  </div>
  <div class="carousel__item">
    <img src="https://images.unsplash.com/photo-1596492784531-6e6eb5ea9993?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Rocky</h3>
      <p>Tough, adventurous, spirited</p>
    </div>
  </div>
  <div class="carousel__item">
    <img src="https://images.unsplash.com/photo-1510771463146-e89e6e86560e?q=80&w=1362&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Luna</h3>
      <p> Curious, smart, elegant</p>
    </div>
  </div>
  <div class="carousel__btns">
    <button class="carousel__btn" id="leftBtn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="m15 4l2 2l-6 6l6 6l-2 2l-8-8z"/></svg></button>
    <button class="carousel__btn" id="rightBtn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="m9.005 4l8 8l-8 8L7 18l6.005-6L7 6z"/></svg></button>
  </div>
</div>

</body>
</html>

CSS

*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    font-family: 'Montserrat', sans-serif;
}
html {
    font-size: 62.5%;
}
body {
    box-sizing: border-box;
    font-size: 1.6rem;
    background-color: rgb(24, 27, 30);
    color: #fff;
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.carousel {
    position: relative;
}
.carousel__item {
    position: relative;
    height: 35rem;
    width: 25rem;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1rem 4rem rgba(0,0,0,.5);
    position: absolute;
    transform: translate(-50%,-50%) scale(.1);
    z-index: 0;
    transition: all .2s linear;
}
.carousel__item img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.carousel__item--main {
    transform: translate(-50%,-50%) scale(1);
    z-index: 2;
    cursor: pointer;
}

.carousel__item--left {
    transform: translate(-110%,-50%) scale(.9);
    z-index: 1;
}
.carousel__item--right {
    transform: translate(10%,-50%) scale(.9);
    z-index: 1;
}
.carousel__item--left img, .carousel__item--right img {
    filter: grayscale(80%);
}

.carousel__item--right:hover {
    transform: translate(10%,-50%) scale(1.2);
    z-index: 3;
    cursor: pointer;
}
.carousel__item--left:hover {
    transform: translate(-110%,-50%) scale(1.2);
    z-index: 3;
    cursor: pointer;
}
.carousel__item--main:hover {
    transform: translate(-50%,-50%) scale(1.2);
}
.carousel__item:hover > .carousel__text {
    opacity: 1;
}
.carousel__item:hover img {
    filter: grayscale(0%);
}

.carousel__text {
    position: absolute;
    bottom: 0;
    z-index: 4;
    opacity: 0;
    transition: opacity .2s;
    width: 100%;
    text-align: center;
    background-color: rgba(0,0,0,.5);
    padding: 2rem 1rem;
    color: #fff;
}

.carousel__btns {
    position: absolute;
    transform: translate(-50%, 22rem);
    display: flex;
    gap: 2rem;
}
.carousel__btn {
    background-color: transparent;
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    border:1px solid currentColor;
    color: #fff;
    cursor: pointer;
}
.carousel__btn svg {
    height: 1.8rem;
    width: 1.8rem;
}
.carousel__btn:hover {
    color: #aaa;
}

JS

'use strict';

const carouselItems = document.querySelectorAll('.carousel__item');
console.log(carouselItems)
let currentItem = document.querySelector('.carousel__item--main');
const leftBtn = document.querySelector('#leftBtn');
const rightBtn = document.querySelector('#rightBtn');

rightBtn.addEventListener('click', function() {
    currentItem = document.querySelector('.carousel__item--right');
    const leftItem = document.querySelector('.carousel__item--main');
    carouselItems.forEach((item,i) => {
        item.classList = 'carousel__item';
    });
    currentItem.classList.add('carousel__item--main');
    leftItem.classList.add('carousel__item--left');
    const currentId = Array.from(carouselItems).indexOf(currentItem);
    const rightItem = currentId === carouselItems.length -1 ? carouselItems[0] : carouselItems[currentId +1];
    rightItem.classList.add('carousel__item--right');
});

leftBtn.addEventListener('click', function() {
    currentItem = document.querySelector('.carousel__item--left');
    const rightItem = document.querySelector('.carousel__item--main');
    carouselItems.forEach((item,i) => {
        item.classList = 'carousel__item';
    });
    currentItem.classList.add('carousel__item--main');
    rightItem.classList.add('carousel__item--right');
    const currentId = Array.from(carouselItems).indexOf(currentItem);
    const leftItem = currentId === 0 ? carouselItems[carouselItems.length-1] : carouselItems[currentId-1];
    leftItem.classList.add('carousel__item--left');
});

अनुशंसित

ड्रैग और व्हील के साथ हिंडोला

छवियों के लिए 3D CSS फोटो फ्रेम प्रभाव

शुद्ध CSS का उपयोग करके छवियों पर फ्रेम प्रभाव

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS