|
|
| Line 1: |
Line 1: |
| | | | |
| − | .section {
| |
| − | /*border: 1em solid #fff;
| |
| − | border-bottom: 4em solid #fff;
| |
| − | border-radius: 20px;
| |
| − | box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
| |
| − | margin: 2em auto;*/
| |
| − | opacity: 0;
| |
| − | /*-webkit-transform: translateY(4em);
| |
| − | transform: translateY(4em);*/
| |
| − | -webkit-transition: opacity 1.5s .25s ease-out,
| |
| − | -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
| |
| − | transition: opacity 1.5s .25s ease-out,
| |
| − | -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
| |
| − | transition: transform 4s .25s cubic-bezier(0,1,.3,1),
| |
| − | opacity 1.5s .25s ease-out;
| |
| − | transition: transform 4s .25s cubic-bezier(0,1,.3,1),
| |
| − | opacity 1.5s .25s ease-out,
| |
| − | -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
| |
| − | width: 100%;
| |
| − |
| |
| − | will-change: transform, opacity;
| |
| − | }
| |
| − |
| |
| − | .section.is-visible {
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | img.show-on-scroll {
| |
| − | opacity: 0;
| |
| − | -webkit-transition: opacity 1.5s .25s ease-out,
| |
| − | -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
| |
| − | transition: opacity 1.5s .25s ease-out,
| |
| − | -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
| |
| − | transition: transform 4s .25s cubic-bezier(0,1,.3,1),
| |
| − | opacity 1.5s .25s ease-out;
| |
| − | transition: transform 4s .25s cubic-bezier(0,1,.3,1),
| |
| − | opacity 1.5s .25s ease-out,
| |
| − | -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
| |
| − | -webkit-transform: translate(0, calc(-30%));
| |
| − | transform: translate(0, calc(-30%));
| |
| − | width: 100%;
| |
| − |
| |
| − | will-change: transform, opacity;
| |
| − | }
| |
| − |
| |
| − | img.is-visible {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: translate(0, 0);
| |
| − | transform: translate(0, 0);
| |
| − | }
| |
| − |
| |
| − | header {
| |
| − | opacity: 0;
| |
| − | -webkit-transition: opacity .5s .25s ease-out;
| |
| − | transition: opacity .5s .25s ease-out;
| |
| − | }
| |
| − |
| |
| − | header.is-visible {
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | .main-photo {
| |
| − | -webkit-transform: scale(.8);
| |
| − | transform: scale(.8);
| |
| − | }
| |
| − | */
| |
| − |
| |
| − |
| |
| − | .heading {
| |
| − | -webkit-transform: translate(0, calc(-10%));
| |
| − | transform: translate(0, calc(-10%));
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | .is-visible .main-photo {
| |
| − | -webkit-transform: none;
| |
| − | transform: none;
| |
| − | }
| |
| − | */
| |
| − |
| |
| − | .heading.is-visible {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: translate(0, 0);
| |
| − | transform: translate(0, 0);
| |
| − | }
| |
| − |
| |
| − | .heading {
| |
| − | opacity: 0;
| |
| − | -webkit-transition: -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
| |
| − | transition: -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
| |
| − | transition: transform 4s .25s cubic-bezier(0,1,.3,1);
| |
| − | transition: transform 4s .25s cubic-bezier(0,1,.3,1), -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
| |
| − | -webkit-transition: opacity 2s 0.25s ease-out,
| |
| − | -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
| |
| − |
| |
| − | will-change: transform, opacity;
| |
| − | }
| |
| − |
| |
| − | #heading {
| |
| − | background-color: #f2edeb;
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | #transition {
| |
| − | height: 200px;
| |
| − | background-image: linear-gradient(#f2edeb, transparent);
| |
| − | background-color: #e3beb1;
| |
| − | }
| |
| − | */
| |
| − |
| |
| − | #section1 {
| |
| − | background-color: #e3beb1;
| |
| − | font-size: 25px;
| |
| − | text-align: center;
| |
| − | padding: 50px;
| |
| − | padding-top: 20px;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − |
| |
| − | #section2 {
| |
| − | background-color: #e3beb1;
| |
| − | font-size: 25px;
| |
| − | text-align: center;
| |
| − | padding: 50px;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − |
| |
| − | #section3 {
| |
| − | background-color: #6E352C;
| |
| − | color: #f2edeb;
| |
| − | font-size: 25px;
| |
| − | text-align: center;
| |
| − | padding: 50px;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − |
| |
| − | #section4 {
| |
| − | background-color: #e3beb1;
| |
| − | font-size: 25px;
| |
| − | text-align: center;
| |
| − | padding: 50px;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − |
| |
| − | #section5 {
| |
| − | background-color: #e3beb1;
| |
| − | font-size: 25px;
| |
| − | text-align: center;
| |
| − | padding: 50px;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − |
| |
| − | #section6 {
| |
| − | background-color: #f2edeb;
| |
| − | font-size: 25px;
| |
| − | text-align: center;
| |
| − | padding: 50px;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − |
| |
| − | #section7 {
| |
| − | background-color: #e3beb1;
| |
| − | font-size: 25px;
| |
| − | text-align: center;
| |
| − | padding: 50px;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − |
| |
| − | #section8 {
| |
| − | background-color: #e3beb1;
| |
| − | font-size: 25px;
| |
| − | text-align: center;
| |
| − | padding: 50px;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − |
| |
| − | #section9 {
| |
| − | background-color: #e3beb1;
| |
| − | font-size: 25px;
| |
| − | text-align: center;
| |
| − | padding: 50px;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − |
| |
| − | #section10 {
| |
| − | background-color: #e3beb1;
| |
| − | font-size: 25px;
| |
| − | text-align: center;
| |
| − | padding: 50px;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − |
| |
| − | #section11 {
| |
| − | background-color: #f2edeb;
| |
| − | font-size: 25px;
| |
| − | text-align: center;
| |
| − | padding: 50px;
| |
| − | font-weight: 300;
| |
| − | }
| |
