Estoy tratando de crear una sección donde solo un div se desplazará, no toda la página
como si el usuario se desplaza sobre la sección de imágenes del producto, entonces la sección de detalles del producto se mantendrá
No quiero mostrar todas las imágenes del producto a los usuarios en el desplazamiento solo si se desplaza el cursor sobre la sección del producto.
es como si las imágenes se desplazaran solo en un div
Codepen: https://codepen.io/taruunn/pen/MWONvdr
.productWrapper{ display:flex; max-width:1440px; margin:0 auto } .product_images{ display:flex; flex-direction:column; width: 100%; flex: 1 1 50%; } .product_images img{ margin-top:25px } .product_details{ padding:0 25px; width: 100%; flex: 1 1 40%; } .product_images:hover +.product_details .product_sticky { position: sticky; top: 0; } <div class="productWrapper"> <div class="product_images"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/600x900?text=product-image"> </div> <div class="product_details"> <div class="product_sticky"> <h2>product title </h2> <h4>Price</h4> <p>Product description Product descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct description </p> </div> </div> </div>Esto lo hará JavaScript. Pero si no quiere usar JS, entonces esto lo hará por fotogramas clave.
.productWrapper{ display:flex; flex-wrap:wrap; max-width:1440px; margin:0 auto } .product_images{ display:flex; flex-direction:column; width: 100%; flex: 1 1 50%; position : relative; overflow:hidden; height:450px; } .product_images img{ margin-top:25px; Position :absolute; height:100%; width:100%; object-fit:cover; } .product_images img:nth-child(1){ top:0; } .product_images img:nth-child(2), .product_images img:nth-child(3), .product_images img:nth-child(4), .product_images img:nth-child(5), .product_images img:nth-child(6){ top: 200%; } .product_images:hover img{ animation-duration: .5s; animation-fill-mode: forwards; animation-name: mymove; } .product_images img:nth-child(2) { animation-delay: 2s; animation-duration: 0s; z-index: 1; } .product_images img:nth-child(3) { animation-delay: 3s; z-index: 2; } .product_images img:nth-child(4) { animation-delay: 6s; z-index: 4; } .product_images img:nth-child(5) { animation-delay: 9s; z-index: 5; } .product_images img:nth-child(6) { animation-delay: 12s; z-index: 6; } .product_details{ padding:0 25px; width: 100%; flex: 1 1 40%; } .product_images:hover +.product_details .product_sticky { position: sticky; top: 0; } @keyframes mymove{ 0% { top: 200%; } 100% { top: 0; } } <div class="productWrapper"> <div class="product_images"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/600x900?text=product-image"> </div> <div class="product_details"> <div class="product_sticky"> <h2>product title </h2> <h4>Price</h4> <p>Product description Product descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct description </p> </div> </div> </div>