Difference between revisions of "Team:Aix-Marseille/Notebook"
| Line 22: | Line 22: | ||
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> | <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> | ||
<![endif]--> | <![endif]--> | ||
| + | <style> | ||
| + | #cd-timeline { | ||
| + | position: relative; | ||
| + | padding: 2em 0; | ||
| + | margin-top: 2em; | ||
| + | margin-bottom: 2em; | ||
| + | } | ||
| + | #cd-timeline::before { | ||
| + | /* this is the vertical line */ | ||
| + | content: ''; | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | left: 18px; | ||
| + | height: 100%; | ||
| + | width: 4px; | ||
| + | background: #d7e4ed; | ||
| + | } | ||
| + | .cssanimations .cd-timeline-img.is-hidden { | ||
| + | visibility: hidden; | ||
| + | } | ||
| + | .cssanimations .cd-timeline-img.bounce-in { | ||
| + | visibility: visible; | ||
| + | animation: cd-bounce-1 0.6s; | ||
| + | } | ||
| + | |||
| + | @keyframes cd-bounce-1 { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | transform: scale(0.5); | ||
| + | } | ||
| + | |||
| + | 60% { | ||
| + | opacity: 1; | ||
| + | transform: scale(1.2); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | } | ||
| + | </style> | ||
| + | <script>$(window).on('scroll', function(){ | ||
| + | $timeline_block.each(function(){ | ||
| + | if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) { | ||
| + | $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in'); | ||
| + | } | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
</head> | </head> | ||
<body> | <body> | ||
| Line 225: | Line 274: | ||
</script> | </script> | ||
| + | |||
| + | <section id="cd-timeline"> | ||
| + | <div class="cd-timeline-block"> | ||
| + | <div class="cd-timeline-img"> | ||
| + | <img src="img/cd-icon-picture.svg" alt="Picture"> | ||
| + | </div> <!-- cd-timeline-img --> | ||
| + | |||
| + | <div class="cd-timeline-content"> | ||
| + | <h2>Title of section 1</h2> | ||
| + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p> | ||
| + | <a href="#0" class="cd-read-more">Read more</a> | ||
| + | <span class="cd-date">Jan 14</span> | ||
| + | </div> <!-- cd-timeline-content --> | ||
| + | </div> <!-- cd-timeline-block --> | ||
| + | |||
| + | <div class="cd-timeline-block"> | ||
| + | <!-- ... --> | ||
| + | </div> | ||
| + | </section> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 21:07, 1 September 2015
Notebook
SPONSORS
Title of section 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.
Read more Jan 14