|
|
| Line 13: |
Line 13: |
| | <head> | | <head> |
| | <script type="text/javascript"> | | <script type="text/javascript"> |
| - | $.fn.slider = function() {
| |
| - | $(".loader").show("fade", 300);
| |
| - | $(".loader").delay(1000).hide("fade", 300);
| |
| - | $(".slider").delay(1500).show("fade", 300);
| |
| - | $(".shadow").delay(1800).show("fade", 500);
| |
| - | };
| |
| | | | |
| - |
| |
| - | $(document).ready( function() {
| |
| - | $("#slider").slider();
| |
| - | });
| |
| | </script> | | </script> |
| | </head> | | </head> |
| Line 36: |
Line 26: |
| | </style> | | </style> |
| | <style type="text/css"> | | <style type="text/css"> |
| - | /* ## GLOBAL VARIABLES #################### */
| |
| - | /* first color on page*/
| |
| - | /* second color on page */
| |
| - | /* slider animation time */
| |
| - | /* ## STYLES ############################## */
| |
| - | @-webkit-keyframes progress {
| |
| - | 0% {
| |
| - | width: 0px;
| |
| - | height: 5px;
| |
| - | }
| |
| - | 5% {
| |
| - | width: 0px;
| |
| - | height: 5px;
| |
| - | }
| |
| - | 85% {
| |
| - | width: inherit;
| |
| - | height: 5px;
| |
| - | }
| |
| - | 89% {
| |
| - | width: inherit;
| |
| - | height: 5px;
| |
| - | }
| |
| - | 91% {
| |
| - | width: inherit;
| |
| - | height: 0px;
| |
| - | }
| |
| - | 100% {
| |
| - | width: inherit;
| |
| - | height: 0px;
| |
| - | }
| |
| - | }
| |
| - | @-webkit-keyframes captions {
| |
| - | 3% {
| |
| - | height: 0px;
| |
| - | }
| |
| - | 7% {
| |
| - | height: 55px;
| |
| - | }
| |
| - | 82% {
| |
| - | height: 55px;
| |
| - | }
| |
| - | 87% {
| |
| - | height: 0px;
| |
| - | }
| |
| - | }
| |
| - | @-webkit-keyframes fade {
| |
| - | 4% {
| |
| - | opacity: 0;
| |
| - | }
| |
| - | 15% {
| |
| - | opacity: 1;
| |
| - | }
| |
| - | 74% {
| |
| - | opacity: 1;
| |
| - | }
| |
| - | 86% {
| |
| - | opacity: 0;
| |
| - | }
| |
| - | }
| |
| - | @-webkit-keyframes slice-top {
| |
| - | 0% {
| |
| - | -webkit-transform: scale(1) rotate(0deg);
| |
| - | opacity: 1;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | }
| |
| - | 90% {
| |
| - | -webkit-transform: scale(1) rotate(0deg);
| |
| - | opacity: 1;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | }
| |
| - | /* 98% { opacity: 1; } */
| |
| - | 100% {
| |
| - | -webkit-transform: scale(1.116) rotate(-25deg);
| |
| - | opacity: 0;
| |
| - | top: -300px;
| |
| - | left: -100px;
| |
| - | }
| |
| - | }
| |
| - | @-webkit-keyframes slice-bottom {
| |
| - | 0% {
| |
| - | -webkit-transform: scale(1) rotate(0deg);
| |
| - | opacity: 1;
| |
| - | bottom: 0;
| |
| - | right: 0;
| |
| - | }
| |
| - | 90% {
| |
| - | -webkit-transform: scale(1) rotate(0deg);
| |
| - | opacity: 1;
| |
| - | bottom: 0;
| |
| - | right: 0;
| |
| - | }
| |
| - | /* 98% { opacity: 1; } */
| |
| - | 100% {
| |
| - | -webkit-transform: scale(1.116) rotate(-25deg);
| |
| - | opacity: 0;
| |
| - | bottom: -300px;
| |
| - | right: -100px;
| |
| - | }
| |
| - | }
| |
| - | a:link,
| |
| - | a:link:before,
| |
| - | a:link:after {
| |
| - | font-weight: normal;
| |
| - | text-decoration: none;
| |
| - | color: white;
| |
| - | content: "";
| |
| - | }
| |
| - | a:visited {
| |
| - | font-weight: normal;
| |
| - | text-decoration: none;
| |
| - | color: grey;
| |
| - | }
| |
| - | a:focus {
| |
| - | font-weight: bold;
| |
| - | text-decoration: none;
| |
| - | }
| |
| - | a:hover {
| |
| - | font-weight: normal;
| |
| - | text-decoration: none;
| |
| - | color: lightgrey;
| |
| - | }
| |
| - | a:active {
| |
| - | font-weight: normal;
| |
| - | text-decoration: none;
| |
| - | color: grey;
| |
| - | }
| |
| - | #wrapper {
| |
| - | width: 800px;
| |
| - | height: 400px;
| |
| - | margin: 20px auto;
| |
| - | position: relative;
| |
| - | }
| |
| - | .slider {
| |
| - | width: 800px;
| |
| - | height: 400px;
| |
| - | background-color: #808080;
| |
| - | overflow: hidden;
| |
| - | display: none;
| |
| - | position: absolute;
| |
| - | }
| |
| - | .shadow {
| |
| - | display: block;
| |
| - | height: 100px;
| |
| - | border-radius: 50%;
| |
| - | width: 112%;
| |
| - | box-shadow: #000 0px 150px 130px;
| |
| - | position: absolute;
| |
| - | bottom: 80px;
| |
| - | left: -6%;
| |
| - | z-index: -1;
| |
| - | display: none;
| |
| - | }
| |
| - | .controls {
| |
| - | position: absolute;
| |
| - | width: inherit;
| |
| - | height: inherit;
| |
| - | z-index: 999;
| |
| - | overflow: hidden;
| |
| - | }
| |
| - | .left {
| |
| - | float: left;
| |
| - | -moz-transform: rotate(-45deg);
| |
| - | -webkit-transform: rotate(-45deg);
| |
| - | -o-transform: rotate(-45deg);
| |
| - | -ms-transform: rotate(-45deg);
| |
| - | transform: rotate(-45deg);
| |
| - | }
| |
| - | .right {
| |
| - | float: right;
| |
| - | -moz-transform: rotate(135deg);
| |
| - | -webkit-transform: rotate(135deg);
| |
| - | -o-transform: rotate(135deg);
| |
| - | -ms-transform: rotate(135deg);
| |
| - | transform: rotate(135deg);
| |
| - | }
| |
| - | .arrow {
| |
| - | height: 50px;
| |
| - | width: 50px;
| |
| - | border-top: 10px solid;
| |
| - | border-left: 10px solid;
| |
| - | border-color: rgba(255, 255, 255, 0.3);
| |
| - | margin: 19.5% 30px;
| |
| - | cursor: pointer;
| |
| - | opacity: 0;
| |
| - | -webkit-animation: fade 10s infinite;
| |
| - | -webkit-transition: border-color 0.2s;
| |
| - | -moz-transition: border-color 0.2s;
| |
| - | -o-transition: border-color 0.2s;
| |
| - | transition: border-color 0.2s;
| |
| - | }
| |
| - | .fade {
| |
| - | -webkit-animation: fade 10s;
| |
| - | }
| |
| - | .arrow:hover {
| |
| - | border-color: rgba(255, 255, 255, 0.7);
| |
| - | }
| |
| - | .progressbar {
| |
| - | position: absolute;
| |
| - | bottom: 0px;
| |
| - | height: 5px;
| |
| - | background-color: #ff0000;
| |
| - | z-index: 999;
| |
| - | -webkit-animation: progress 10s linear infinite;
| |
| - | }
| |
| - | .captions {
| |
| - | position: absolute;
| |
| - | bottom: 0px;
| |
| - | width: inherit;
| |
| - | height: 0px;
| |
| - | background-color: rgba(0, 0, 0, 0.4);
| |
| - | -webkit-animation: captions 10s infinite;
| |
| - | -webkit-transition: background-color 0.2s;
| |
| - | -moz-transition: background-color 0.2s;
| |
| - | -o-transition: background-color 0.2s;
| |
| - | transition: background-color 0.2s;
| |
| - | }
| |
| - | .captions:hover {
| |
| - | background-color: rgba(0, 0, 0, 0.8);
| |
| - | cursor: pointer;
| |
| - | }
| |
| - | .captions span {
| |
| - | position: absolute;
| |
| - | z-index: 999;
| |
| - | bottom: 5px;
| |
| - | font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
| |
| - | color: white;
| |
| - | font-weight: lighter;
| |
| - | opacity: 0;
| |
| - | font-size: large;
| |
| - | padding: 0px 20px;
| |
| - | line-height: 50px;
| |
| - | cursor: pointer;
| |
| - | -webkit-font-smoothing: antialiased;
| |
| - | -webkit-animation: fade 10s infinite;
| |
| - | }
| |
| - | .images {
| |
| - | display: none;
| |
| - | position: absolute;
| |
| - | width: inherit;
| |
| - | height: inherit;
| |
| - | }
| |
| - | .images img {
| |
| - | position: absolute;
| |
| - | display: none;
| |
| - | width: inherit;
| |
| - | height: inherit;
| |
| - | }
| |
| - | .image {
| |
| - | position: absolute;
| |
| - | width: inherit;
| |
| - | }
| |
| - | .slice-top {
| |
| - | top: 0;
| |
| - | height: 50%;
| |
| - | background-color: green;
| |
| - | -webkit-transform-origin: top center;
| |
| - | -webkit-animation: slice-top 10s infinite;
| |
| - | }
| |
| - | .slice-bottom {
| |
| - | bottom: 0;
| |
| - | height: 50%;
| |
| - | background-color: green;
| |
| - | -webkit-transform-origin: bottom center;
| |
| - | -webkit-animation: slice-bottom 10s infinite;
| |
| - | }
| |
| - | /*
| |
| - | #slider:hover .progressbar, #slider:hover .arrow, #slider:hover .fade, #slider:hover .slice-top, #slider:hover .slice-bottom, #slider:hover .captions, #slider:hover .captions span {
| |
| - | -webkit-animation-play-state: paused;
| |
| - | }
| |
| - |
| |
| - | #slider div, #slider span {
| |
| - | -webkit-animation-iteration-count: 1 !important;
| |
| - | } */
| |
| - | /* LOADER */
| |
| - | @-webkit-keyframes rotate {
| |
| - | 0% {
| |
| - | opacity: .2;
| |
| - | -webkit-transform: rotateZ(-360deg);
| |
| - | }
| |
| - | 50% {
| |
| - | opacity: 1;
| |
| - | -webkit-transform: rotateZ(0deg);
| |
| - | }
| |
| - | 100% {
| |
| - | opacity: .2;
| |
| - | -webkit-transform: rotateZ(360deg);
| |
| - | }
| |
| - | }
| |
| - | .loader {
| |
| - | top: calc(50% - 53px);
| |
| - | left: calc(50% - 53px);
| |
| - | height: 100px;
| |
| - | width: 100px;
| |
| - | display: none;
| |
| - | }
| |
| - | .loader,
| |
| - | .loader:before,
| |
| - | .loader:after {
| |
| - | position: absolute;
| |
| - | border: 3px solid transparent;
| |
| - | border-top: 3px solid #ff0000;
| |
| - | border-radius: 50%;
| |
| - | -webkit-animation: rotate linear infinite;
| |
| - | -webkit-animation-duration: 1.05s;
| |
| - | content: '';
| |
| - | }
| |
| - | .loader:before {
| |
| - | height: 75px;
| |
| - | width: 75px;
| |
| - | top: 10px;
| |
| - | left: 10px;
| |
| - | -webkit-animation-duration: 6s;
| |
| - | }
| |
| - | .loader:after {
| |
| - | height: 50px;
| |
| - | width: 50px;
| |
| - | top: 22px;
| |
| - | left: 22px;
| |
| - | -webkit-animation-duration: 3s;
| |
| - | }
| |
| - |
| |
| | </style> | | </style> |
| | | | |
| Line 367: |
Line 34: |
| | <body> | | <body> |
| | <p>sdasd</p> | | <p>sdasd</p> |
| - | <div id="animatedmenu">
| |
| - | <div class="container">
| |
| - | <ul id="sti-menu" class="sti-menu">
| |
| - | <li data-hovercolor="#37c5e9">
| |
| - | <a href="#">
| |
| - | <h2 data-type="mText" class="sti-item">Project</h2>
| |
| - | <h3 data-type="sText" class="sti-item">Story of a color wizard</h3>
| |
| - | <span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
| |
| - | </a>
| |
| - | </li>
| |
| - | <li data-hovercolor="#ff395e">
| |
| - | <a href="#">
| |
| - | <h2 data-type="mText" class="sti-item">Notebook</h2>
| |
| - | <h3 data-type="sText" class="sti-item">The day by day process</h3>
| |
| - | <span data-type="icon" class="sti-icon sti-icon-alternative sti-item"></span>
| |
| - | </a>
| |
| - | </li>
| |
| - | <li data-hovercolor="#57e676">
| |
| - | <a href="#">
| |
| - | <h2 data-type="mText" class="sti-item">Team</h2>
| |
| - | <h3 data-type="sText" class="sti-item">Hardworking guys</h3>
| |
| - | <span data-type="icon" class="sti-icon sti-icon-info sti-item"></span>
| |
| - | </a>
| |
| - | </li>
| |
| - | <li data-hovercolor="#d869b2">
| |
| - | <a href="#">
| |
| - | <h2 data-type="mText" class="sti-item">Human Practices</h2>
| |
| - | <h3 data-type="sText" class="sti-item">Let's show people what we got</h3>
| |
| - | <span data-type="icon" class="sti-icon sti-icon-family sti-item"></span>
| |
| - | </a>
| |
| - | </li>
| |
| - | <li data-hovercolor="#ffdd3f">
| |
| - | <a href="#">
| |
| - | <h2 data-type="mText" class="sti-item">Outreach</h2>
| |
| - | <h3 data-type="sText" class="sti-item">iGem all over the world</h3>
| |
| - | <span data-type="icon" class="sti-icon sti-icon-technology sti-item"></span>
| |
| - | </a>
| |
| - | </li>
| |
| - | </ul>
| |
| - | </div>
| |
| | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> |
| | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> | | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> |
"
