Created
June 3, 2014 13:01
-
-
Save nielk/d2f9b67cbcd2e051e590 to your computer and use it in GitHub Desktop.
menu toggle scroll
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1> | |
| Lorem ipsum | |
| </h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. </p> | |
| <h2>Loreat solum</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem adte fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. </p> | |
| <h3>Loreat bubleza solum</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem adte fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem adte fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem adte fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. </p> | |
| <h1> | |
| Lorem ipsum | |
| </h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. </p> | |
| <h2>Loreat solum</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem adte fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. </p> | |
| <h3>Loreat bubleza solum</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem adte fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem adte fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem adte fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. </p> | |
| <h1> | |
| Lorem ipsum | |
| </h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. </p> | |
| <h2>Loreat solum</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem adte fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. </p> | |
| <h3>Loreat bubleza solum</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem adte fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem adte fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem adte fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. iste fugiat. consectetur adipisicing elit. Neque, suscipit velit nihil deleniti cumque reiciendis ea expedita commodi aut nemo assumenda asperiores harum dolorum ipsum at quidem ad iste fugiat. </p> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| font-family: Helvetica; | |
| color: #333; | |
| line-height: 30px; | |
| } | |
| h1, h2, h3 { | |
| text-transform: uppercase; | |
| } | |
| .container { | |
| margin: 0 auto; | |
| max-width: 960px; | |
| } | |
| .made-in-france { | |
| position: fixed; | |
| z-index: 99999; | |
| bottom: 0; | |
| min-height: 40px; | |
| width: 100%; | |
| background-color: #d8dcde; | |
| -webkit-transform:translateY(0); | |
| -moz-transform:translateY(0); | |
| -ms-transform:translateY(0); | |
| -o-transform:translateY(0); | |
| transform:translateY(0); | |
| -webkit-transition:all 1s; | |
| -moz-transition:all 1s; | |
| -o-transition:all 1s; | |
| transition:all 1s; | |
| -webkit-backface-visibility: hidden; | |
| } | |
| .centrage { | |
| max-width: 960px; | |
| margin: 0 auto; | |
| } | |
| .dixheuresdix .centrage { | |
| max-width: 100%; | |
| margin: auto; | |
| padding-left: 20px; | |
| } | |
| .made-in-france ul { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .made-in-france li { | |
| display: inline-block; | |
| list-style-type: none; | |
| } | |
| .made-in-france img { | |
| height: auto; | |
| } | |
| @media (max-width: 768px) { | |
| .first-elt { | |
| display: block !important; | |
| } | |
| .hidden-anim { | |
| -webkit-transform:translateY(200px) !important; | |
| -moz-transform:translateY(200px) !important; | |
| -ms-transform:translateY(200px) !important; | |
| -o-transform:translateY(200px) !important; | |
| transform:translateY(200px) !important; | |
| } | |
| } | |
| .hidden-anim { | |
| -webkit-transform:translateY(50px); | |
| -moz-transform:translateY(50px); | |
| -ms-transform:translateY(50px); | |
| -o-transform:translateY(50px); | |
| transform:translateY(50px); | |
| -webkit-transition:all .5s; | |
| -moz-transition:all .5s; | |
| -o-transition:all .5s; | |
| transition:all .5s; | |
| -webkit-backface-visibility: hidden; | |
| } | |
| .ipad { | |
| -webkit-backface-visibility: hidden; | |
| } | |
| </style> | |
| <script> | |
| var prev = 0; | |
| $(".made-in-france").parents().addClass('ipad'); | |
| var myFunc = function() { | |
| if(window.pageYOffset < 100 || window.pageYOffset < prev) { | |
| $(".made-in-france").removeClass('hidden-anim'); | |
| } else { | |
| $(".made-in-france").addClass('hidden-anim'); | |
| } | |
| prev = window.pageYOffset; | |
| }; | |
| window.addEventListener('scroll', function() { | |
| myFunc(); | |
| }, false); | |
| </script> | |
| <section class="made-in-france dixheuresdix"> | |
| <div class="centrage"> | |
| <ul> | |
| <li class="first-elt"><img src="./images/MIPIM03.jpg" alt=""></li> | |
| <li><a href="http://www.sedap.com/" target="_blank"><img src="./images/MIPIM04-bis_01.png" alt="Atelier Sedap"></a></li> | |
| <li><a href="http://www.sedap.com/lighting/" target="_blank"><img src="./images/MIPIM04-bis_02.png" alt="Atelier Sedap - Lightning"></a></li> | |
| <li><a href="http://www.sedap.com/ornements/" target="_blank"><img src="./images/MIPIM04-bis_03.png" alt="Atelier Sedap - Ornements"></a></li> | |
| <li><a href="http://www.dixheuresdix.com/fr/" target="_blank"><img src="./images/MIPIM05.jpg" alt="Dix heures dix"></a></li> | |
| <li><a href="http://www.lucid.fr/" target="_blank"><img src="./images/MIPIM06.jpg" alt="LUCID"></a></li> | |
| <li><a href="http://www.belleslumieres.fr/" target="_blank"><img src="./images/MIPIM07.jpg" alt="Belleslumières boutique"></a></li> | |
| </ul> | |
| </div> | |
| </section> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment