/** * SylfArt — Reveal on scroll * Apparition ordonnee, de haut en bas, des elements de la page. * * Les etats masques ne s'appliquent QUE sous html.reveal-on (ajoute tres tot * par un script en ). Sans JS, la classe n'est jamais posee : tout le * contenu reste visible normalement (pas de FOUC, pas de contenu piege cache). * Le JS ajoute .is-revealed quand l'element entre dans le viewport. */ /* ======================================================================== FADE + MONTEE : blocs de contenu et items de grille ===================================================================== */ html.reveal-on .homepage-content, html.reveal-on .product-carousel-section .carousel-header, html.reveal-on .two-columns-image-column, html.reveal-on .two-columns-content-column, html.reveal-on .gallery-header, html.reveal-on .gallery-filters, html.reveal-on .journal-header, html.reveal-on .faq-title, html.reveal-on .faq-section, html.reveal-on .faq-item, html.reveal-on .entry-header, html.reveal-on .post-content-wrapper .entry-content, html.reveal-on .post-sidebar, html.reveal-on .woocommerce-products-header, html.reveal-on .single-product .woocommerce-product-gallery, html.reveal-on .single-product .entry-summary, html.reveal-on .product-sections, html.reveal-on .related.products, html.reveal-on .masonry-item, html.reveal-on .woocommerce ul.products li.product, html.reveal-on .site-footer .footer-column { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.22, .61, .36, 1), transform .75s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } html.reveal-on .homepage-content.is-revealed, html.reveal-on .product-carousel-section .carousel-header.is-revealed, html.reveal-on .two-columns-image-column.is-revealed, html.reveal-on .two-columns-content-column.is-revealed, html.reveal-on .gallery-header.is-revealed, html.reveal-on .gallery-filters.is-revealed, html.reveal-on .journal-header.is-revealed, html.reveal-on .faq-title.is-revealed, html.reveal-on .faq-section.is-revealed, html.reveal-on .faq-item.is-revealed, html.reveal-on .entry-header.is-revealed, html.reveal-on .post-content-wrapper .entry-content.is-revealed, html.reveal-on .post-sidebar.is-revealed, html.reveal-on .woocommerce-products-header.is-revealed, html.reveal-on .single-product .woocommerce-product-gallery.is-revealed, html.reveal-on .single-product .entry-summary.is-revealed, html.reveal-on .product-sections.is-revealed, html.reveal-on .related.products.is-revealed, html.reveal-on .masonry-item.is-revealed, html.reveal-on .woocommerce ul.products li.product.is-revealed, html.reveal-on .site-footer .footer-column.is-revealed { opacity: 1; transform: none; will-change: auto; } /* ======================================================================== FADE SEUL : le hero (evite un glissement d'une grande image) et les cartes du journal (elles ont deja leur propre transform au survol). ===================================================================== */ html.reveal-on .homepage-featured-image, html.reveal-on .journal-item { opacity: 0; transition: opacity .9s cubic-bezier(.22, .61, .36, 1); will-change: opacity; } html.reveal-on .homepage-featured-image.is-revealed, html.reveal-on .journal-item.is-revealed { opacity: 1; will-change: auto; } /* ======================================================================== CAROUSELS : l'entete apparait, puis la rangee d'oeuvres se devoile en cascade. On anime les .product-slide, declenches par la classe posee sur le wrapper (ainsi la position horizontale n'entre pas en jeu). ===================================================================== */ html.reveal-on .products-carousel-wrapper .product-slide { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } html.reveal-on .products-carousel-wrapper.is-revealed .product-slide { opacity: 1; transform: none; will-change: auto; } html.reveal-on .products-carousel-wrapper.is-revealed .product-slide:nth-child(1) { transition-delay: 0s; } html.reveal-on .products-carousel-wrapper.is-revealed .product-slide:nth-child(2) { transition-delay: .08s; } html.reveal-on .products-carousel-wrapper.is-revealed .product-slide:nth-child(3) { transition-delay: .16s; } html.reveal-on .products-carousel-wrapper.is-revealed .product-slide:nth-child(4) { transition-delay: .24s; } html.reveal-on .products-carousel-wrapper.is-revealed .product-slide:nth-child(5) { transition-delay: .32s; } html.reveal-on .products-carousel-wrapper.is-revealed .product-slide:nth-child(6) { transition-delay: .40s; } html.reveal-on .products-carousel-wrapper.is-revealed .product-slide:nth-child(7) { transition-delay: .48s; } html.reveal-on .products-carousel-wrapper.is-revealed .product-slide:nth-child(n+8) { transition-delay: .56s; } /* ======================================================================== ACCESSIBILITE : si l'utilisateur demande moins d'animations, on affiche tout immediatement, sans transition ni deplacement. ===================================================================== */ @media (prefers-reduced-motion: reduce) { html.reveal-on .homepage-content, html.reveal-on .product-carousel-section .carousel-header, html.reveal-on .two-columns-image-column, html.reveal-on .two-columns-content-column, html.reveal-on .gallery-header, html.reveal-on .gallery-filters, html.reveal-on .journal-header, html.reveal-on .faq-title, html.reveal-on .faq-section, html.reveal-on .faq-item, html.reveal-on .entry-header, html.reveal-on .post-content-wrapper .entry-content, html.reveal-on .post-sidebar, html.reveal-on .woocommerce-products-header, html.reveal-on .single-product .woocommerce-product-gallery, html.reveal-on .single-product .entry-summary, html.reveal-on .product-sections, html.reveal-on .related.products, html.reveal-on .masonry-item, html.reveal-on .woocommerce ul.products li.product, html.reveal-on .site-footer .footer-column, html.reveal-on .homepage-featured-image, html.reveal-on .journal-item, html.reveal-on .products-carousel-wrapper .product-slide { opacity: 1 !important; transform: none !important; transition: none !important; } }