/* ----- BACKGROUND ANIMATIONS ----- */ #background #background6 { -skrollr-animation-name:background6Animation } #background #background5 { -skrollr-animation-name:background5Animation } #background #background4 { -skrollr-animation-name:background4Animation } #background #background3 { -skrollr-animation-name:background3Animation } #background #background2-grass { -skrollr-animation-name:background2GrassAnimation } #background #background1 { -skrollr-animation-name:background1Animation } @-skrollr-keyframes background6Animation { start { background-position:30% 5% } end { background-position:70% 5% } } @-skrollr-keyframes background5Animation { start { background-position:0% 0% } end { background-position:50% 0% } } @-skrollr-keyframes background4Animation { start { background-position:0% 0% } end { background-position:100% 0% } } @-skrollr-keyframes background3Animation { start { background-position:0% 0% } end { background-position:200% 0% } } @-skrollr-keyframes background2GrassAnimation { 72000 { opacity:0; } 144000 { opacity:1; } 216000 { opacity:0; } 288000 { opacity:1; } 360000 { opacity:0; } /*end { opacity:0;background-position:500% 0% }*/ } @-skrollr-keyframes background1Animation { start { background-position:0% 0%; } end { background-position:700% 0% } } /* ----- ELEPHANT ANIMATIONS ----- */ .elephant.elephant-xl { -skrollr-animation-name:elephantXLAnimation } .elephant.elephant-l { -skrollr-animation-name:elephantLAnimation } .elephant.elephant-s { -skrollr-animation-name:elephantSAnimation } .elephant.elephant-xs { -skrollr-animation-name:elephantXSAnimation } @-skrollr-keyframes elephantXLAnimation { 72000 { display:none;left:-50% } 72001 { display:block;left:-50% } 82000 { display:block;left:-18% } } @-skrollr-keyframes elephantLAnimation { 216000 { display:none;left:-50% } 216001 { display:block;left:-50% } 226000 { display:block;left:-33% } } @-skrollr-keyframes elephantSAnimation { 144000 { display:none;left:-50% } 144001 { display:block;left:-50% } 154000 { display:block;left:-16% } } @-skrollr-keyframes elephantXSAnimation { 288000 { display:none;left:-50% } 288001 { display:block;left:-50% } 298000 { display:block;left:16% } } /* ----- SCENE ANIMATIONS ------*/ #scenes { -skrollr-animation-name:sceneAnimation } #scenes #scene4.scene img.scene-foreground { -skrollr-animation-name:scene4ForegroundAnimation } @-skrollr-keyframes sceneAnimation { start { left:0px; } end { left:-18500px; } } @-skrollr-keyframes scene4ForegroundAnimation { 144000 { left:2500px; } 216000 { left:0px; } 288000 { left:-2500px; } } /* ----- PAGE ANIMATIONS ------ */ #pages .page.page1 { -skrollr-animation-name:page1Animation } #pages .page.page2 { -skrollr-animation-name:page2Animation } #pages .page.page3 { -skrollr-animation-name:page3Animation } #pages .page.page4 { -skrollr-animation-name:page4Animation } #pages .page.page5 { -skrollr-animation-name:page5Animation } #pages .page.page6 { -skrollr-animation-name:page6Animation } #pages .page.page7 { -skrollr-animation-name:page7Animation } @-skrollr-keyframes page1Animation { start { left:0%;opacity:1; } 10000 { left:0%;opacity:0; } 10001 { left:-100%;opacity:0; } } @-skrollr-keyframes page2Animation { 61999 { left:100%;opacity:0; } 62000 { left:0%;opacity:0; } 72000 { left:0%;opacity:1; } 82000 { left:0%;opacity:0; } 82001 { left:-100%;opacity:0; } } @-skrollr-keyframes page3Animation { 133999 { left:100%;opacity:0; } 134000 { left:0%;opacity:0; } 144000 { left:0%;opacity:1; } 154000 { left:0%;opacity:0; } 154001 { left:-100%;opacity:0; } } @-skrollr-keyframes page4Animation { 195999 { left:100%;opacity:0; } 206000 { left:0%;opacity:0; } 216000 { left:0%;opacity:1; } 226000 { left:0%;opacity:0; } 226001 { left:-100%;opacity:0; } } @-skrollr-keyframes page5Animation { 277999 { left:100%;opacity:0; } 278000 { left:0%;opacity:0; } 288000 { left:0%;opacity:1; } 298000 { left:0%;opacity:0; } 298001 { left:-100%;opacity:0; } } @-skrollr-keyframes page6Animation { 349999 { left:100%;opacity:0; } 350000 { left:0%;opacity:0; } 360000 { left:0%;opacity:1; } 370000 { left:0%;opacity:0; } 370001 { left:-100%;opacity:0; } } @-skrollr-keyframes page7Animation { 421999 { left:100%;opacity:0; } 422000 { left:0%;opacity:0; } 432000 { left:0%;opacity:1; } } /* ----- CAROUSEL ANIMATIONS ----- */ #chapter-carousel .item-chapter-0 .item-image { -skrollr-animation-name:carouselItem0SelectedAnimation } #chapter-carousel .item-chapter-1 .item-image { -skrollr-animation-name:carouselItem1SelectedAnimation } #chapter-carousel .item-chapter-2 .item-image { -skrollr-animation-name:carouselItem2SelectedAnimation } #chapter-carousel .item-chapter-3 .item-image { -skrollr-animation-name:carouselItem3SelectedAnimation } #chapter-carousel .item-chapter-4 .item-image { -skrollr-animation-name:carouselItem4SelectedAnimation } #chapter-carousel .item-chapter-5 .item-image { -skrollr-animation-name:carouselItem5SelectedAnimation } #chapter-carousel .item-chapter-6 .item-image { -skrollr-animation-name:carouselItem6SelectedAnimation } @-skrollr-keyframes carouselItem0SelectedAnimation { start { background-color:rgb(110,126,139) } 1000 { background-color:rgb(242,235,227) } } @-skrollr-keyframes carouselItem1SelectedAnimation { 71000 { background-color:rgb(242,235,227) } 72000 { background-color:rgb(110,126,139) } 73000 { background-color:rgb(242,235,227) } } @-skrollr-keyframes carouselItem2SelectedAnimation { 134000 { background-color:rgb(242,235,227) } 144000 { background-color:rgb(110,126,139) } 154000 { background-color:rgb(242,235,227) } } @-skrollr-keyframes carouselItem3SelectedAnimation { 206000 { background-color:rgb(242,235,227) } 216000 { background-color:rgb(110,126,139) } 226000 { background-color:rgb(242,235,227) } } @-skrollr-keyframes carouselItem4SelectedAnimation { 278000 { background-color:rgb(242,235,227) } 288000 { background-color:rgb(110,126,139) } 298000 { background-color:rgb(242,235,227) } } @-skrollr-keyframes carouselItem5SelectedAnimation { 350000 { background-color:rgb(242,235,227) } 360000 { background-color:rgb(110,126,139) } 370000 { background-color:rgb(242,235,227) } } @-skrollr-keyframes carouselItem6SelectedAnimation { 422000 { background-color:rgb(242,235,227) } 432000 { background-color:rgb(110,126,139) } } /* ----- TIMELINE ANIMATIONS ----- */ #chapter-timeline .line-progress { -skrollr-animation-name:timelineProgressAnimation } @-skrollr-keyframes timelineProgressAnimation { 0 { width:0% } 72000 { width:16.66% } 144000 { width:33.33% } 216000 { width:50% } 288000 { width:66.66% } 360000 { width:83.33% } 432000 { width:100% } } #chapter-timeline .marker { -skrollr-animation-name:timelineMarkerAnimation } @-skrollr-keyframes timelineMarkerAnimation { 0 { left:0% } 72000 { left:16.66% } 144000 { left:33.33% } 216000 { left:50% } 288000 { left:66.66% } 360000 { left:83.33% } 432000 { left:100% } } #chapter-timeline .point-1 .inner { -skrollr-animation-name:timelineItem1SelectedAnimation } #chapter-timeline .point-2 .inner { -skrollr-animation-name:timelineItem2SelectedAnimation } #chapter-timeline .point-3 .inner { -skrollr-animation-name:timelineItem3SelectedAnimation } #chapter-timeline .point-4 .inner { -skrollr-animation-name:timelineItem4SelectedAnimation } #chapter-timeline .point-5 .inner { -skrollr-animation-name:timelineItem5SelectedAnimation } #chapter-timeline .point-6 .inner { -skrollr-animation-name:timelineItem6SelectedAnimation } #chapter-timeline .point-7 .inner { -skrollr-animation-name:timelineItem7SelectedAnimation } #chapter-timeline .point-8 .inner { -skrollr-animation-name:timelineItem8SelectedAnimation } @-skrollr-keyframes timelineItem1SelectedAnimation { start { opacity:1; } 10000 { opacity:0; } } @-skrollr-keyframes timelineItem2SelectedAnimation { 62000 { opacity:0; } 72000 { opacity:1; } 82000 { opacity:0; } } @-skrollr-keyframes timelineItem3SelectedAnimation { 134000 { opacity:0 } 144000 { opacity:1 } 154000 { opacity:0 } } @-skrollr-keyframes timelineItem4SelectedAnimation { 206000 { opacity:0 } 216000 { opacity:1 } 226000 { opacity:0 } } @-skrollr-keyframes timelineItem5SelectedAnimation { 278000 { opacity:0 } 288000 { opacity:1 } 298000 { opacity:0 } } @-skrollr-keyframes timelineItem6SelectedAnimation { 350000 { opacity:0 } 360000 { opacity:1 } 370000 { opacity:0 } } @-skrollr-keyframes timelineItem7SelectedAnimation { 422000 { opacity:0 } 432000 { opacity:1 } 442000 { opacity:0 } } @-skrollr-keyframes timelineItem8SelectedAnimation { 494000 { opacity:0 } 504000 { opacity:1 } }