|
|
| Line 1: |
Line 1: |
| − | <!doctype html>
| |
| − | <html lang="zh">
| |
| − | <head>
| |
| − | <meta charset="UTF-8">
| |
| − | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| − | <title>jquery.scrollex</title>
| |
| − | <link rel="stylesheet" type="text/css" href="https://2016.igem.org/Team:Jilin_China/css/normalize?action=raw&ctype=text/css" />
| |
| − | <link rel="stylesheet" href="https://2016.igem.org/Team:Jilin_China/css/common?action=raw&ctype=text/css" />
| |
| − | <link rel="stylesheet" type="text/css" href="https://2016.igem.org/Team:Jilin_China/css/demo?action=raw&ctype=text/css">
| |
| − | //<script src="https://2015.igem.org/Team:Heidelberg/js/team_js?action=raw&ctype=text/javascript" type="text/javascript" charset="utf-8"></script>
| |
| − | //<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:Heidelberg/slick/slick_css?action=raw&ctype=text/css"/>
| |
| − |
| |
| − | <style>
| |
| − | html, body {
| |
| − | height: 100%;
| |
| − | }
| |
| | | | |
| − | #main {
| |
| − | height: 100%;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | .item {
| |
| − | position: relative;
| |
| − | height: 100%;
| |
| − | text-align: center;
| |
| − | -moz-transition: opacity 1s ease;
| |
| − | -webkit-transition: opacity 1s ease;
| |
| − | -o-transition: opacity 1s ease;
| |
| − | -ms-transition: opacity 1s ease;
| |
| − | transition: opacity 1s ease;
| |
| − | }
| |
| − |
| |
| − | .item:before {
| |
| − | content: '';
| |
| − | display: inline-block;
| |
| − | height: 100%;
| |
| − | vertical-align: middle;
| |
| − | }
| |
| − |
| |
| − | .item .container {
| |
| − | display: inline-block;
| |
| − | vertical-align: middle;
| |
| − | -moz-perspective: 900px;
| |
| − | -webkit-perspective: 900px;
| |
| − | -o-perspective: 900px;
| |
| − | -ms-perspective: 900px;
| |
| − | perspective: 900px;
| |
| − | }
| |
| − |
| |
| − | .item .container > :last-child {
| |
| − | margin-bottom: 0;
| |
| − | }
| |
| − |
| |
| − | .item .container .title {
| |
| − | display: inline-block;
| |
| − | background: #fff;
| |
| − | padding: 0.5em 1em;
| |
| − | border-radius: 0.25em;
| |
| − | font-size: 2.5em;
| |
| − | margin: 0 0 1.5em 0;
| |
| − | -moz-transform-origin: 50% 50%;
| |
| − | -webkit-transform-origin: 50% 50%;
| |
| − | -o-transform-origin: 50% 50%;
| |
| − | -ms-transform-origin: 50% 50%;
| |
| − | transform-origin: 50% 50%;
| |
| − | }
| |
| − |
| |
| − | .item .container p {
| |
| − | font-size: 1.5em;
| |
| − | line-height: 1.5em;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | .item .next {
| |
| − | position: absolute;
| |
| − | bottom: 2.5em;
| |
| − | left: 50%;
| |
| − | width: 5em;
| |
| − | height: 5em;
| |
| − | margin-left: -2.5em;
| |
| − | line-height: 5em;
| |
| − | border-radius: 100%;
| |
| − | color: #fff;
| |
| − | text-decoration: none;
| |
| − | border: solid 1px #fff;
| |
| − | }
| |
| − |
| |
| − | .item.inactive {
| |
| − | opacity: 0.25;
| |
| − | }
| |
| − |
| |
| − | #header {
| |
| − | }
| |
| − |
| |
| − | #header .title {
| |
| − | color: #2A2D3C;
| |
| − | }
| |
| − |
| |
| − | #one {
| |
| − | background-color: #03A081;
| |
| − | }
| |
| − |
| |
| − | #one .title {
| |
| − | color: #03A081;
| |
| − | }
| |
| − |
| |
| − | #two {
| |
| − | background-color: #3B8DAF;
| |
| − | }
| |
| − |
| |
| − | #two .title {
| |
| − | color: #3B8DAF;
| |
| − | }
| |
| − |
| |
| − | #three {
| |
| − | background-color: #7B70B2;
| |
| − | }
| |
| − |
| |
| − | #three .title {
| |
| − | color: #7B70B2;
| |
| − | }
| |
| − |
| |
| − | #four {
| |
| − | background-color: #D6628E;
| |
| − | }
| |
| − |
| |
| − | #four .title {
| |
| − | color: #D6628E;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | <!--[if IE]>
| |
| − | <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
| |
| − | <![endif]-->
| |
| − | </head>
| |
| − | <body>
| |
| − | <div id="main">
| |
| − | <!-- Header -->
| |
| − | <header class="item" id="header">
| |
| − | <div class="container">
| |
| − | <!-- <h1 class="title">Scrollex Demo: All Events</h1>
| |
| − | -->
| |
| − | <h1>jquery.scrollex-可制作炫酷页面滚动效果的jQuery事件插件 </h1>
| |
| − | <p>Highlights the visible item. Animates content as user scrolls.</p>
| |
| − | <div class="jq22-demo center">
| |
| − | <a href="index.html" class="current">滚动事件</a>
| |
| − | <a href="index2.html">进入和离开视口</a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <a href="#one" class="next">Start</a>
| |
| − | </header>
| |
| − |
| |
| − | <!-- Items -->
| |
| − | <section class="item" id="one">
| |
| − | <div class="container">
| |
| − | <h2 class="title">Item One</h2>
| |
| − | <p>Amet vis lobortis vis blandit adipiscing varius accumsan orci lorem. Metus pellentesque amet faucibus lobortis Arcu donec vitae. Eleifend aliquam lobortis interdum id accumsan metus arcu suscipit enim id varius phasellus.</p>
| |
| − | </div>
| |
| − | <a href="#two" class="next">Next</a>
| |
| − | </section>
| |
| − |
| |
| − | <section class="item" id="two">
| |
| − | <div class="container">
| |
| − | <h2 class="title">Item Two</h2>
| |
| − | <p>Amet vis lobortis vis blandit adipiscing varius accumsan orci lorem. Metus pellentesque amet faucibus lobortis Arcu donec vitae. Eleifend aliquam lobortis interdum id accumsan metus arcu suscipit enim id varius phasellus.</p>
| |
| − | </div>
| |
| − | <a href="#three" class="next">Next</a>
| |
| − | </section>
| |
| − |
| |
| − | <section class="item" id="three">
| |
| − | <div class="container">
| |
| − | <h2 class="title">Item Three</h2>
| |
| − | <p>Amet vis lobortis vis blandit adipiscing varius accumsan orci lorem. Metus pellentesque amet faucibus lobortis Arcu donec vitae. Eleifend aliquam lobortis interdum id accumsan metus arcu suscipit enim id varius phasellus.</p>
| |
| − | </div>
| |
| − | <a href="#four" class="next">Next</a>
| |
| − | </section>
| |
| − |
| |
| − | <section class="item" id="four">
| |
| − | <div class="container">
| |
| − | <h2 class="title">Item Four</h2>
| |
| − | <p>Amet vis lobortis vis blandit adipiscing varius accumsan orci lorem. Metus pellentesque amet faucibus lobortis Arcu donec vitae. Eleifend aliquam lobortis interdum id accumsan metus arcu suscipit enim id varius phasellus.</p>
| |
| − | </div>
| |
| − | <a href="#header" class="next">Top</a>
| |
| − | </section>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
| |
| − | <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
| |
| − | <script src="js/common.js"></script>
| |
| − | <script src="js/jquery.scrollex.js"></script>
| |
| − | <script>
| |
| − | /* jquery.scrolly v0.1 | (c) n33 | n33.co @n33co | MIT */
| |
| − | (function(e){var t="click.scrolly";e.fn.scrolly=function(r,i){var s=e(this);return r||(r=1e3),i||(i=0),s.off(t).on(t,function(t){var n,s,o,u=e(this),a=u.attr("href");a.charAt(0)=="#"&&a.length>1&&(n=e(a)).length>0&&(s=n.offset().top,u.hasClass("scrolly-centered")?o=s-(e(window).height()-n.outerHeight())/2:(o=Math.max(s,0),i&&(typeof i=="function"?o-=i():o-=i)),t.preventDefault(),e("body,html").stop().animate({scrollTop:o},r,"swing"))}),s}})(jQuery);
| |
| − |
| |
| − | $(function() {
| |
| − |
| |
| − | $('.item').scrollex({
| |
| − |
| |
| − | // Mode: Sets Scrollex to 'middle' mode (= midpoint between top/bottom edges must fall within contact area).
| |
| − | mode: 'middle',
| |
| − |
| |
| − | // Initialize event: Add the 'inactive' class to this element as soon as Scrollex is initialized.
| |
| − | initialize: function() {
| |
| − | $(this).addClass('inactive');
| |
| − | },
| |
| − |
| |
| − | // Enter event: Remove the 'inactive' class from this element.
| |
| − | enter: function() {
| |
| − | $(this).removeClass('inactive');
| |
| − | },
| |
| − |
| |
| − | // Leave event: Apply the 'inactive' class to this element.
| |
| − | leave: function() {
| |
| − | $(this).addClass('inactive');
| |
| − | },
| |
| − |
| |
| − | // Scroll event: Perform various CSS tweaks based on the user's progress through this element.
| |
| − | scroll: function(progress) {
| |
| − |
| |
| − | var $this = $(this),
| |
| − | $container = $this.find('.container'),
| |
| − | $title = $this.find('.title'),
| |
| − | $p = $this.find('p'),
| |
| − | $next = $this.find('.next'),
| |
| − | x;
| |
| − |
| |
| − | // Title.
| |
| − |
| |
| − | // Rotation.
| |
| − | x = (progress - 0.5) * 540;
| |
| − |
| |
| − | $title
| |
| − | .css('-moz-transform', 'rotateX(' + x + 'deg)')
| |
| − | .css('-webkit-transform', 'rotateX(' + x + 'deg)')
| |
| − | .css('-o-transform', 'rotateX(' + x + 'deg)')
| |
| − | .css('-ms-transform', 'rotateX(' + x + 'deg)')
| |
| − | .css('transform', 'rotateX(' + x + 'deg)');
| |
| − |
| |
| − | // Opacity.
| |
| − | if (progress > 0.5)
| |
| − | x = 1 - progress;
| |
| − | else
| |
| − | x = progress;
| |
| − |
| |
| − | x = Math.max(0, Math.min(1, x * 2));
| |
| − |
| |
| − | $title.css('opacity', x);
| |
| − |
| |
| − | // Paragraph.
| |
| − |
| |
| − | // Opacity.
| |
| − | if (progress > 0.5)
| |
| − | x = 1 - progress;
| |
| − | else
| |
| − | x = progress;
| |
| − |
| |
| − | x = Math.max(0, Math.min(1, x * 2));
| |
| − |
| |
| − | $p.css('opacity', x);
| |
| − |
| |
| − | // Next.
| |
| − |
| |
| − | // Opacity.
| |
| − | x = 1 - (Math.max(0, progress - 0.5) * 1.5);
| |
| − |
| |
| − | $next.css('opacity', x)
| |
| − |
| |
| − | // Scale.
| |
| − | x = 1 - (Math.max(0, progress - 0.5));
| |
| − |
| |
| − | $next
| |
| − | .css('-moz-transform', 'scale(' + x + ')')
| |
| − | .css('-webkit-transform', 'scale(' + x + ')')
| |
| − | .css('-o-transform', 'scale(' + x + ')')
| |
| − | .css('-ms-transform', 'scale(' + x + ')')
| |
| − | .css('transform', 'scale(' + x + ')');
| |
| − |
| |
| − | // Scrolly.
| |
| − | $next.scrolly(3000);
| |
| − |
| |
| − | }
| |
| − |
| |
| − | });
| |
| − |
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
