Rideau Image

Ouverture de page effet rideaux

Plugin proposé par AlbertX

Activer les rideaux

Le code HTML

Dans un élément HTML coller le code ci-dessous en première ligne de la page

                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><div id="loader-wrapper"><div id="loader">
                        </div><div class="loader-section section-left"><img src="image-rideau-gauche.png" style="width:100%;height:100%" alt=""></div>
                        <div class="loader-section section-right"><img src="image-rideau-droite.png" style="width:100%;height:100%" alt=""></div>
                        </div><script>$(window).on("load", function() {$('body').addClass('loaded');});</script>

Le code CSS

Code à placer dans le css de l'élément HTML

                        /* Placez la ligne ci-dessous en commentaires pour désactiver le loader */
                        #loader {display: none!important;}
                        /* Couleur des rideaux */
                        #loader-wrapper .loader-section {background: #000!important;}
                        #loader-wrapper {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 1001;
                        }
                        #loader {
                        display: block;
                        position: relative;
                        left: 50%;
                        top: 50%;
                        width: 150px;
                        height: 150px;
                        margin: -75px 0 0 -75px;
                        border-radius: 50%;
                        border: 3px solid transparent;
                        border-top-color: #3498db;
                        -webkit-animation: spin 2s linear infinite;
                        animation: spin 2s linear infinite;
                        z-index: 1002;
                        }
                        #loader:before {
                        content: "";
                        position: absolute;
                        top: 5px;
                        left: 5px;
                        right: 5px;
                        bottom: 5px;
                        border-radius: 50%;
                        border: 3px solid transparent;
                        border-top-color: #e74c3c;
                        -webkit-animation: spin 3s linear infinite;
                        animation: spin 3s linear infinite;
                        }
                        #loader:after {
                        content: "";
                        position: absolute;
                        top: 15px;
                        left: 15px;
                        right: 15px;
                        bottom: 15px;
                        border-radius: 50%;
                        border: 3px solid transparent;
                        border-top-color: #f9c922;
                        -webkit-animation: spin 1.5s linear infinite:
                        animation: spin 1.5s linear infinite;
                        }
                        @-webkit-keyframes spin {
                        0%   { 
                        -webkit-transform: rotate(0deg);
                        -ms-transform: rotate(0deg);
                        transform: rotate(0deg);
                        }
                        100% {
                        -webkit-transform: rotate(360deg);
                        -ms-transform: rotate(360deg);
                        transform: rotate(360deg);
                        }
                        }
                        @keyframes spin {
                        0%   { 
                        -webkit-transform: rotate(0deg);
                        -ms-transform: rotate(0deg);
                        transform: rotate(0deg); 
                        }
                        100% {
                        -webkit-transform: rotate(360deg);
                        -ms-transform: rotate(360deg);
                        transform: rotate(360deg);
                        }
                        }
                        #loader-wrapper .loader-section {
                        position: fixed;
                        top: 0;
                        width: 51%;
                        height: 100%;
                        background: #222222;
                        z-index: 1001;
                        -webkit-transform: translateX(0); 
                        -ms-transform: translateX(0);
                        transform: translateX(0);
                        }
                        #loader-wrapper .loader-section.section-left {
                        left: 0;
                        }
                        #loader-wrapper .loader-section.section-right {
                        right: 0;
                        }
                        .loaded #loader-wrapper .loader-section.section-left {
                        -webkit-transform: translateX(-100%); 
                        -ms-transform: translateX(-100%);
                        transform: translateX(-100%); 
                        -webkit-transition: all 0.7 0.3s  cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
                        }
                        .loaded #loader-wrapper .loader-section.section-right {
                        -webkit-transform: translateX(100%); 
                        -ms-transform: translateX(100%);
                        transform: translateX(100%);
                        -webkit-transition: all 0.7s  0.3s  cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                        transition: all 0.7s  0.3s   cubic-bezier(0.645, 0.045, 0.355, 1.000);
                        }
                        .loaded #loader {
                        opacity: 0;
                        -webkit-transition: all 0.3s ease-out;  
                        transition: all 0.3s ease-out;
                        }
                        .loaded #loader-wrapper {
                        visibility: hidden;
                        -webkit-transform: translateY(-100%); 
                        -ms-transform: translateY(-100%);
                        transform: translateY(-100%); 
                        -webkit-transition: all 0.3s 1s ease-out;  
                        transition: all 0.3s 1s ease-out;
                        }

Validation W3C

Slider et Image

Accordion

Divers 1

Divers 2

Mascarade

Lumière

Couché de soleil

Le Crozon