<!--
An illustrative effect showing how user interaction can scale into an illustration.
Pen By Ashley Nolan.
Best viewed in Chrome or IE – bit memory intensive in Firefox and Safari does some weird glitchy animation at the higher scroll points.
Illustrations by Simon Kinslow and Lorena Teruel.
-->
<link href='https://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>
<div class="l-container home">
<div class="illust-container">
<div class="illust-level illust-level--intro">
<div class="illustItem illustItem--bgGrass"></div>
<div class="illustItem illustItem--fencePost illustItem--fencePost--first">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/fencepost.svg" alt="Fence post">
<div class="illustItem illustItem--northpole illustItem--fence-arrow illustItem--fence-arrow-left symbol symbol--northpole">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/fence-arrow-left.svg" alt="Fence post Arrow Left">
<h2 class="symbol-title">North Pole </h2>
</div>
<div class="illustItem illustItem--grotto illustItem--fence-arrow illustItem--fence-arrow-right symbol symbol--grotto">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/fence-arrow-right.svg" alt="Fence post Arrow Right">
<h2 class="symbol-title">Grotto</h2>
</div>
</div>
<div class="illustItem illustItem--holly symbol symbol--holly">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/holly.svg" alt="Holly">
</div>
<div class="illustItem illustItem--fencePost illustItem--fencePost--second">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/fencepost.svg" alt="Fence post">
<div class="illustItem illustItem--lapland illustItem--fence-arrow illustItem--fence-arrow-right symbol symbol--lapland">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/fence-arrow-right.svg" alt="Fence post arrow right">
<h2 class="symbol-title">Lapland</h2>
</div>
</div>
<div class="illustItem illustItem--ivy symbol symbol--ivy">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/ivy.svg" alt="Ivy">
</div>
</div>
</div>
<div class="illust-level--town">
<div class="illustItem illustItem--snowglobe">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/snowglobe.svg" alt="Snow Globe">
</div>
<div class="illustItem illustItem--town">
<img class="svg-town" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/town.svg" alt="Town">
<div class="svg-house">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/house.svg" alt="House">
<img class="svg-lights" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/lights.svg" alt="lights">
</div>
<img class="svg-sleigh" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/sleigh.svg" alt="Sleigh">
<div class="svg-star inactive">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/star.svg" alt="Star">
</div>
<img class="svg-sledge" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/sledge.svg" alt="sledge">
<img class="svg-robins" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/robins.svg" alt="robins">
<img class="svg-peace" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/peace.svg" alt="peace">
<img class="svg-shopping" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/shopping.svg" alt="shopping">
<div class="svg-carollers">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/carolers.svg" alt="carollers">
</div>
<img class="svg-firstfloor" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/firstfloor.svg" alt="firstfloor">
<img class="svg-secondfloor" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/secondfloor.svg" alt="secondfloor">
<img class="svg-nativity" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/nativity.svg" alt="nativity">
<div class="illust-level illust-level--symbolsTown">
<div class="illustItem illustItem--yuletide symbol symbol--yuletide">
<h2 class="symbol-title">Seasons Greetings</h2>
</div>
<div class="symbols--outside">
<div class="illustItem illustItem--carols symbol symbol--carols">
<h2 class="symbol-title">Merry Christmas</h2>
</div>
</div>
<div class="symbols--inside inactive">
<div class="illustItem illustItem--nutcracker symbol symbol--nutcracker">
<h2 class="symbol-title">Tiny Tim</h2>
</div>
<div class="illustItem illustItem--present symbol symbol--present">
<h2 class="symbol-title">Mum</h2>
</div>
<div class="illustItem illustItem--mincepie symbol symbol--mincepie">
<h2 class="symbol-title">Mince Pies</h2>
</div>
<div class="illustItem illustItem--christmascards symbol symbol--christmascards">
<h2 class="symbol-title">Happy Christmas</h2>
</div>
<div class="illustItem illustItem--bingcrosby symbol symbol--bingcrosby">
<h2 class="symbol-title">Bing Crosby</h2>
</div>
<div class="illustItem illustItem--mariahcarey symbol symbol--mariahcarey">
<h2 class="symbol-title">Mariah Carey</h2>
</div>
<div class="illustItem illustItem--endquote">
<h2 class="symbol-title"><span class="symbol-title-sub">Have</span>a Very Merry Jolly Christmas!</h2>
</div>
</div>
</div>
</div>
</div>
<div id="scroll-proxy"></div>
<footer class="page-footer">
<ul class="unstyled page-footer-links">
<li><a class="page-footer-info" href="https://twitter.com/AshNolan_" target="_blank">By AshNolan_</a>
</li>
</ul>
</footer>
</div>
// Generic colours
$blue : #e2f7f6;
$turquoise : #34a8a6;
$red : #e41f44;
$yellow : #f8e32a;
$yellowPale : #f2e397;
$brownLight : #eee0b7;
// Colour Scheme
$color-primary : $turquoise;
// Common colours
$color-text : #444;
$color-bg : #a6e1ee;
// Text Selection
$color-selection : #fff;
$color-selection-bg : $color-primary;
// Links
$color-link-default : $color-primary;
$color-link-hover : darken($color-primary, 20%);
// Buttons
$btn-default-bg : $turquoise;
$btn-default-bg-highlight : darken($btn-default-bg, 10%);
/**
* Typography
* =================================
*/
$font-size-base : 16;
$font-size-base-px : $font-size-base * 1px;
$leading-base : 1.4;
$line-height-base : round($font-size-base * $leading-base); // 20 * 1.4
$baseline : $line-height-base * 1px;
$type-scale : 1.25; // Major third
$type-base : 16;
$font-family-sans : "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif : 'Sancreek', cursive;
$font-family-mono : Menlo, Monaco, "Courier New", monospace;
$font-family-base : $font-family-serif;
$font-family-alt : $font-family-serif;
$font-family-headings : inherit; // using inherit will use $font-family-base for all headings
$font-weight-headings : normal; // instead of browser default, bold
$line-height-headings : 1.2;
/**
* Breakpoints
*/
$bp-narrow : 550; // Set in px
$bp-mid : 768; // Set in px
$bp-wide : 992; // Set in px
$bp-huge : 1600; // Set in px
/*
Min-width media query:
* Equivalent to: @media screen and (min-width: 20em) { ... }
* Usage: @include respond-min(500) { ... };
* Argument is a pixel value WITHOUT a unit of measurement
========================================================================== */
@mixin respond-min($width) {
@media screen and (min-width: $width + px) {
@content;
}
}
/*
Max-width media query:
* Equivalent to: @media screen and (max-width: 20em) { ... }
* Usage: @include respond-max(500) { ... };
* Argument is a pixel value WITHOUT a unit of measurement
========================================================================== */
@mixin respond-max($width) {
// Otherwise, output it using a regular media query
@media screen and (max-width: $width + px) {
@content;
}
}
// Opacity
// @include opacity(50);
@mixin opacity($opacity: 100) {
zoom: 1;
filter: alpha(opacity=$opacity);
opacity: $opacity / 100;
}
/* ==========================================================================
Typography mixins
========================================================================== */
// @include font-size(16);
@mixin font-size($sizeValue: $font-size-base){
font-size: $sizeValue + px;
}
/**
* Typography
*/
* {
box-sizing: border-box;
}
html {
text-size-adjust: 100%;
}
body {
font-family: $font-family-base;
@include font-size($type-base);
line-height: $leading-base;
color: $color-text;
}
/**
* Headings
*/
h2 {
margin: 0;
font-family: $font-family-headings;
font-weight: $font-weight-headings;
line-height: $line-height-headings;
text-rendering: optimizelegibility; // Fix the character spacing for headings
}
h2 {
@include font-size(30);
margin-top: 0;
margin-bottom: $baseline;
}
/**
* Links
*/
a {
& {
color: $color-link-default;
text-decoration: none;
}
&:hover, &:focus {
color: $color-link-hover;
}
}
/**
* Lists
*/
ul {
list-style-type: disc;
}
// Unordered and Ordered lists
// Add a .unstyled class to unordered/ordered lists if you want them to have bullets/numbers
ul {
padding: 0;
margin: 0 0 $baseline $baseline;
}
.unstyled {
margin: 0;
padding: 0;
list-style: none;
list-style-image: none;
}
// Text selection
@mixin text-selection($color-selection, $color-selection-bg) {
::-moz-selection {
color: $color-selection;
background: $color-selection-bg;
text-shadow: none;
}
::selection {
color: $color-selection;
background: $color-selection-bg;
text-shadow: none;
}
}
@include text-selection($color-selection, $color-selection-bg);
.btn {
display:inline-block;
vertical-align:middle;
white-space:nowrap;
font-family:inherit;
font-size:100%;
cursor:pointer;
border:none;
margin:0;
padding-top: 0;
padding-bottom:0;
line-height: 2.5;
height: 2.5em;
padding-right:1.5em;
padding-left: 1.5em;
overflow:visible;
text-align: center;
// You may want to change this
background-color: $btn-default-bg;
color: #fff;
border-radius: 5px;
user-select: none;
&:hover {
background-color: $btn-default-bg-highlight;
}
&,
&:hover {
text-decoration: none;
}
}
/**
* Scrollbar styling (only in webkit)
*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: darken($color-bg, 10%);
}
::-webkit-scrollbar-thumb {
background: darken($color-bg, 40%);
cursor: pointer;
border-radius: 5px;
}
/**
* Global app/site styles
*/
html, body,
.l-container {
@include respond-min($bp-narrow) {
width: 100%;
height: 100%;
}
}
body {
background-color: $color-bg;
color: #333;
//snow
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAASCAYAAACNdSR1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNpiYQCCfW/fKgApEL7gJCz8gQEHYIIqPA/E+4H4PpAvgFMxECcAMUwBiDbAp/gAEh/khAc4FQPdCFLsCMSNQGwI5ONUTBJgopliFnyS6OHPSEDheWhwgkJJEZ8zMMIfn2KM8MepmOLwZxpEkUJs4gcIMADgKCjh4vix/QAAAABJRU5ErkJggg==');
background-repeat: repeat;
background-position: top left;
background-attachment: fixed;
transition: background-color 1000ms;
&.night {
background-color: #0d0f27;
background-image: url('data:image/png;base64,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');
}
}
/**
* Default layout container
*/
.l-container {
padding-left: 0px;
padding-right: 0px;
width: 95%;
max-width: 1000px;
margin: 0 auto;
// perspective: 300px;
@include respond-max($bp-narrow - 1) {
position: relative;
margin-bottom: 150px;
}
}
#scroll-proxy {
height: 10000px;
&.inactive {
display: none;
}
}
//SYMBOL RELATED STUFF
.symbol {
position: relative;
}
.symbol-title {
@include font-size(18);
text-transform: uppercase;
.symbol--carols & {
color: $brownLight;
@include font-size(20);
}
.symbol--mincepie & {
color: $yellowPale;
@include font-size(22);
}
}
.symbol-total {
letter-spacing: 1px;
}
//specific text sizing for certain symbols
.symbol-title,
.symbol-total {
margin-bottom: 0;
//where we want the title and count on one line
.symbol--inline & {
display: inline-block;
@include font-size(18);
}
.symbol--yuletide & {
@include respond-min($bp-narrow) {
@include font-size(20);
}
}
}
//hide symbols until needed
.overlay,
.symbols--inside,
.symbols--outside {
@include opacity(100);
transition: opacity 300ms;
&.inactive {
z-index: -10;
transition: opacity 300ms, z-index 0ms 300ms;
@include opacity(0);
}
}
.symbols--inside,
.symbols--outside {
position: absolute;
width: 100%;
height: 100%;
}
$layerIndex: level-1, level-2, level-3, level-4, level-5;
.illust-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
.illust-level {
position: absolute;
left: 0;
top: 0;
}
.illust-level--intro {
position: relative;
width: 100%;
height: 700px;
max-width: 1400px;
margin: 0 auto;
& svg,
& img {
position: absolute;
z-index: index($layerIndex, level-2);
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.symbol-title {
position: relative;
margin-top: 0;
z-index: index($layerIndex, level-3);
}
}
.illust-level--town {
position: fixed;
top: 50%; left: 50%;
z-index: index($layerIndex, level-2);
width: 350px;
height: 320px;
transform: translate(-50%, -160px);
.csstransforms3d & {
transform: translate3d(-50%, -160px, 0);
backface-visibility: hidden;
}
}
.illust-level--symbolsTown {
z-index: index($layerIndex, level-3);
width: 350px; height: 320px;
transform-origin: left top;
}
// INTRO LEVEL (HOME) ILLUSTRATIONS
// INCLUDES (IN Z-INDEX ORDER:
// BGGRASS
// SNOWGLOBE
// SNOWFLAKE
// DOVES
// HOLLY
// IVY
//every illustration component has this set on it, plus a more precise modifier class with the background
.illustItem {
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.illustItem--bgGrass {
z-index: index($layerIndex, level-2);
top: 490px; left: 50%;
width: 200%; height: 50px;
background-image: url('data:image/png;base64,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');
background-repeat: repeat-x;
background-position: left top;
transform: translate(-50%);
@media screen and (min-height: 750px) { top: 520px; }
&:before {
content: '';
display: block;
margin-top: 50px;
width: 100%;
height: 800px;
background-color: $blue;
}
}
.illustItem--fencePost {
z-index: index($layerIndex, level-1);
width: 25px;
min-height: 252px;
@include respond-min($bp-mid) { width: 49px; }
&.illustItem--fencePost--first {
top: 320px;
left: 12%;
transition: left 300ms;
@include respond-min(820) { left: 15%; }
@include respond-min($bp-wide) { left: 20%; }
@media screen and (min-height: 750px) { top: 350px; }
}
&.illustItem--fencePost--second {
top: 360px;
right: 10%;
transition: right 300ms;
@include respond-min(760) { right: 15%; }
@media screen and (min-height: 750px) { top: 400px; }
}
& .symbol-title {
display: inline-block;
@include font-size(20);
}
}
.illustItem--fence-arrow-left {
z-index: index($layerIndex, level-2);
text-align: right;
width: 130px;
height: 41px;
@include respond-min($bp-mid) { width: 200px; }
.symbol-title {
padding-top: 8px;
padding-right: 25px;
@include respond-max($bp-mid) {
@include font-size(12);
padding-top: 12px;
}
}
}
.illustItem--fence-arrow-right {
z-index: index($layerIndex, level-2);
width: 120px;
height: 32px;
@include respond-min($bp-mid) { width: 158px; }
.symbol-title {
padding-top: 4px;
padding-left: 20px;
@include respond-max($bp-mid) {
@include font-size(12);
padding-top: 8px;
}
}
}
.illustItem--northpole {
top: 45px; left: -70px;
transform: rotate(-4deg);
@include respond-min($bp-mid) { top: 25px; left: -100px; }
}
.illustItem--grotto {
top: 90px; left: -50px;
transform: rotate(4deg);
text-transform: uppercase;
}
.illustItem--lapland {
top: 55px; left: -30px;
transform: rotate(4deg);
@include respond-min($bp-mid) { top: 20px; left: -50px; }
}
.illustItem--holly {
z-index: index($layerIndex, level-3);
top: 540px; left: -260px;
width: 400px; height: 130px;
background-repeat: repeat;
background-position: right center;
transition: left 300ms;
@include respond-min(660) { left: -200px; }
@include respond-min(720) { left: -160px; }
@include respond-min(840) { left: -100px; }
@include respond-min(980) { left: -40px; }
@media screen and (min-height: 750px) { top: 580px; }
}
.illustItem--ivy {
z-index: index($layerIndex, level-3);
top: 540px; right: -200px;
width: 325px; height: 114px;
//spacing for text
padding: 38px 0 0 80px;
transition: right 300ms;
@include respond-min(660) { right: -160px; }
@include respond-min(800) { right: -80px; }
@include respond-min($bp-wide) { right: 0; }
@media screen and (min-height: 750px) { top: 580px; }
}
.illustItem--snowglobe {
z-index: index($layerIndex, level-3);
width: 102%; height: 116%;
top: 0; left: 50%;
transform: translate(-50%);
}
.illustItem--town {
position: relative;
width: 100%; height: 100%;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
}
.svg-town {
width: 100%; height: 100%;
}
.svg-house,
.svg-carollers,
.svg-star {
transition: opacity 300ms;
&.inactive { @include opacity(0); }
& svg,
& img {
width: 100%;
height: 100%;
}
}
.svg-house {
z-index: index($layerIndex, level-3);
position: absolute;
width: 100%; height: 100%;
top: 51%; left: 49.72%;
transform-origin: left top;
transform: scale(0.266) translate(-50%, 0);
}
.svg-lights {
z-index: index($layerIndex, level-4);
position: absolute;
width: 100%; height: 100%;
top: 53.1%; left: 50.5%;
transform-origin: left top;
transform: scale(0.4) translate(-50%, 0);
}
.svg-sleigh {
position: absolute;
width: 100%; height: 100%;
top: 70%; left: 50%;
transform-origin: left top;
transform: scale(0.14) translate(-43%, -245%) rotate(8deg);
&.inactive { @include opacity(0); }
}
.svg-star {
position: absolute;
width: 100%; height: 100%;
top: 38.5%; left: 47%;
background-color: rgb(13, 15, 39);
transform-origin: left top;
transform: scale(0.025) translate(-100%, 0);
}
.svg-sledge {
position: absolute;
width: 100%; height: 100%;
top: 75%; left: 64%;
transform-origin: left top;
transform: scale(0.14) translate(-50%, 0);
}
.svg-carollers {
z-index: index($layerIndex, level-3);
position: absolute;
width: 100%; height: 100%;
top: 72%; left: 58%;
transform-origin: left top;
transform: scale(0.08) translate(-50%, 0);
}
.svg-robins {
z-index: index($layerIndex, level-3);
position: absolute;
width: 100%; height: 100%;
top: 72%; left: 37%;
transform-origin: left top;
transform: scale(0.031) translate(0, 0);
}
.svg-shopping {
z-index: index($layerIndex, level-3);
position: absolute;
width: 100%; height: 100%;
top: 76%; left: 17%;
transform-origin: left top;
transform: scale(0.06) translate(0, 0);
}
.svg-peace {
z-index: index($layerIndex, level-3);
position: absolute;
width: 100%; height: 100%;
top: 68%; left: 69%;
transform-origin: left top;
transform: scale(0.05) translate(0, 0);
}
.svg-nativity {
z-index: index($layerIndex, level-2);
position: absolute;
width: 100%; height: 100%;
top: 54.62%; left: 50%;
transform-origin: left top;
transform: scale(0.11) translate(-50%, 0);
}
.svg-firstfloor {
z-index: index($layerIndex, level-2);
position: absolute;
width: 100%; height: 100%;
top: 66.4%; left: 50%;
transform-origin: left top;
transform: scale(0.1278) translate(-50.12%, 0);
}
.svg-secondfloor {
z-index: index($layerIndex, level-2);
position: absolute;
width: 100%; height: 100%;
top: 60%; left: 50%;
transform-origin: left top;
transform: scale(0.1278) translate(-50.12%, 0);
}
// LABELS
.illustItem--yuletide {
width: 184px; height: 30px;
bottom: -37px; left: 24%;
text-transform: uppercase;
text-align: center;
}
// OUTSIDE LABELS
.illustItem--carols {
width: 212px; height: 41px;
top: 233px; left: 97px;
padding: 8px 0;
transform: scale(0.07) translate(0, 15px);
text-align: center;
}
// INSIDE LABELS
.illustItem--present {
width: 110px; height: 41px;
top: 218px; left: 141px;
transform: scale(0.04) translate(18px, 5px) rotate(-30deg);
text-align: left;
}
.illustItem--nutcracker {
width: 140px; height: 41px;
top: 220px; left: 113px;
transform: scale(0.04) translate(21px, 28px) rotate(14deg);
text-align: left;
}
.illustItem--bingcrosby,
.illustItem--mariahcarey,
.illustItem--wham {
width: 180px; height: 41px;
top: 188px;
text-align: center;
}
.illustItem--bingcrosby {
left: 95px;
transform: scale(0.02) translate(13px, 22px);
}
.illustItem--mariahcarey {
left: 99px;
transform: scale(0.02) translate(16px, 22px);
}
.illustItem--mincepie {
width: 202px; height: 57px;
top: 191px; left: 63px;
padding: 8px 0;
transform: scale(0.025) translate(20px, 5px);
text-align: center;
}
.illustItem--stocking,
.illustItem--fireplace {
width: 202px; height: 57px;
left: 59px;
padding: 8px 0;
text-align: center;
}
.illustItem--fireplace {
top: 187px;
transform: scale(0.031) translate(12px, 0);
}
.illustItem--christmascards {
width: 100px; height: 57px;
top: 186px; left: 124px;
padding: 8px 0;
transform: scale(0.03) translate(28px, 14px);
}
// SLEIGH LABELS
.illustItem--santa {
width: 180px; height: 41px;
top: 126px; left: 105px;
transform: scale(0.03) translate(-10px, 9px) rotate(8deg);
text-align: center;
}
.illustItem--endquote {
width: 120px;
top: 86px; left: 129px;
transform: scale(0.12) translate(20px, 19px) skew(-12deg) rotate(-10deg);
color: #fff;
background-color: rgb(13, 15, 39);
}
.symbol-title-sub {
display: block;
font-size: 80%;
margin-bottom: 2px;
}
.page-footer {
z-index: 100;
position: fixed;
width: 100%;
padding: 0px 5% 16px;
background: #fff;
bottom: 0;
left: 0;
@include respond-min($bp-narrow) {
padding: 10px 20px;
}
@include respond-min($bp-wide) {
padding: 12px 6%;
}
&:before {
content: '';
position: absolute;
bottom: 100%;
left: 0;
display: block;
width: 100%;
height: 44px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA/8AAAAsCAMAAAAEnvh4AAAANlBMVEUAAAD////////////////////////////////////////////////////////////////////xY8b8AAAAEnRSTlMAUI+/7/8AIJ+AEDDP369AcGBXupFFAAAFHUlEQVR4Aezc63brqg4F4BppiruB93/ZfZqevdrs1AQc57Jafb9rxoibiWUBefvrLIYYAJNZ5BZKqTf5q1jH+MQ+iFLqd+Q/ePwHe/kNlNL8x4RLKYhS6sfnPzK+w1GUUj88/5GBXzkBKKX5t4wtOYhSP5nmn7BtlatKNUQ4YSJTi7wQpTT/sfmVMk4SOb9Y+dTQU6SnmIRLyRR5AUpp/m1dGRd4bUFOAqMny6boGFvYRVFK8//k8Cdsoha6j/9+AdAS+lKTp1FK819W9LGzktDn5Dst47rc5CmU0vwXwgCHK1guLRljcpGHU0rzbwkHuYhwWDFuDfJYSmn+PQ7T5NzCmMGLPJBSmv+YcBwvZxxmGTlIqZ6Iv+w0CLKbXTwR3mUyNcpPoTT/FbhX/kPCvBTkZtETLiUTZQfrE86xK/IrxbrSx4TqqhX1A/LvcLf8x4w9cpSbhJqxJRt7TGM01yC/jPX5h90CzX9IuAci8n5h7MNR9rMOfWs5ZlmEm/wmweML/dWHsPiVGO+ITIsyIJYP4eb8l1L8/9AJzmV657z3rZQ4H//n2z8BBIPrnD1mtBTlJdnlzwbuRM4X2bSsefC1qOTOLfg5kab0kSDTrHREcxEcdkt3aEOMP3itdkf+bWneEDGm5NPDuITnx38YW9mlZIzgKiNixhVVXs5iMv6LqpVvRML/uSB9DU8/9B1K856IEv6ViMj7VuzWBd4RnZ9j6WgrzqQaJjezsrFjQ59QG8+/LdVQxo1o9a28fvz3NwE9RrmB8dvsOM9nfR7fXx15+H434JkTQKmO0EOuloGzZnn7Ge15tFBseby07F+Q20D+35OPI2X6dyYkvC6See7QCcbMj7NfLPXjbe78Nc5dFG491s3sr448/DkiOjjIPRVPGJPMIh+syeNHzXp1I/uxv+xcEQnb8tLLf2wu4T6Y/OLwyvyh8Z8PrnvMcmUo1RCjL61+iXJF8Iy+vMinwDhDF6VzwgmRSehZ5W4Wx5iytnC1A0xlos2T7Gx7KcWZ1XWy3+c/+pXxqxWZYw6tMOoD9ivE6jLGkVnCQLOiZw3b81vrNLf64shHNUQ4odEdVNYx5jHhqvU81Gm0F20TBnD7HNqN/vVb/xD+L5SDzFgwyx80mvvaPya8S53v+PD/uFPjXqqTKytlo44PNe/eshnaRymTz2eq0Fbe+EWJjkK4H26diXN7YmSMqVMNNhe+5j+aDDX/BpCPXGSwjAn1I9BpeEUomoT9vouOw6i2eUHrvEN0pe/Oj7ty5SnOxt7/QNrApJ1HK9HIk6PHPF5BfuS/fLlZysq4dtN34M+CORP5ZoVmJ5KyDu8StDXjVusiXwWaPaEVvo1xZezyfZuL7OWuocHtQ5UftcIU0mjRFBnj2tQFHOXtomupSMZlzOOwtZcDcxINbzVYVhyCvZU/CDPa1nRJ2Glj5ZVrTOhK9uLEVsKDrONdoxSmF8sXaRjH8a0RrtEWoC3VOyL6DB45X4sViz0WkZZwZykOrR3Pc3HnEY4msuJInWwM9yNMwoOZ8T6Pmb5j7DGD36C6BYBthrApYQ/v+ZGNDM+YNbKSVXeELuNI6cYyPDrGE5TxsjEuuK9O/rUDEJrL+IutYf7ZP8ZZiZiWBC/DSyE8RxaPQcSa/ydwp/AT/nYpRMJdsE+Yt+Jl5BVPszCeTvPfwaE4/AQZr0cxNP/6H/qnfToWAAAAABjkbz2H3eUQ+A/4D/gP+A/4D2z+A/4D/gP+AwE5/c2oVGcxnwAAAABJRU5ErkJggg==');
@include respond-min($bp-narrow) {
bottom: 90%;
}
}
&:after {
@include respond-min($bp-narrow) {
content: 'SCROLL';
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
display: block;
width: 125px;
height: 57px;
background-image: url('data:image/png;base64,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');
background-position: -4px bottom;
background-repeat: no-repeat;
text-align: center;
}
}
}
.page-footer-links {
text-align: center;
text-transform: uppercase;
@include font-size(18);
@include respond-min($bp-narrow) {
width: 100%;
text-align: right;
margin-top: -10px;
}
li {
display: inline-block;
@include respond-min($bp-mid) {
margin-bottom: 0;
}
@include respond-max($bp-mid) {
display: block;
}
&:first-child {
@include respond-min($bp-narrow) {
float: left;
}
}
&:last-child {
margin-bottom: 0;
}
}
a {
color: black;
}
.page-footer-info {
display: inline-block;
text-decoration: underline;
display: inline-block;
vertical-align: middle;
height: 2.5em;
line-height: 2.5;
@include respond-min($bp-narrow) {
padding-top: 5px;
}
}
.page-footer-site {
color: #333;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAAAjCAMAAAAwoG+IAAAAMFBMVEUAAAAvqaYvqaYvqaYvqaYvqaYvqaYvqaYvqaYvqaYvqaYvqaYvqaYvqaYvqaYvqaaNTsezAAAAEHRSTlMAYK//z4AQACCP7zDfv0Bw2lfhAwAAAIlJREFUeNrt0UEOwyAMRFHIYEygOPe/bbsgyo4dqYzm3+Dph/XFA7+SZB2VMwGoR9R1BV1c+2BUh0Nw17NbV654kg7Ujqfk1nViWvTq6pgmXl3yr1/FlhYxq9qqgmDL6KKLLrroosulq9iF7bosqBq2y5Quuuiiiy666KKLLrrooouu11ytb1fTLwjLejRbyBZNAAAAAElFTkSuQmCC') no-repeat center center;
padding-top: 5px;
@include respond-min($bp-narrow) {
margin-left: 20px;
}
}
}
;(function(KO, $) {
$(function() {
KO.UI.init();
});
KO.UI = {
scrollActive: false,
supports : {
transform3d: false
},
init : function () {
this.handleZooming();
},
handleZooming : function () {
var zoomContent = $('.illust-container');
ZUI = new Zoomer(zoomContent);
//make sure page is at the top when reloaded
window.scrollTo(0, 0);
}
};
// the constructor that will do all the work
function Zoomer( content ) {
this.setLevels = function() {
if (this.docWidth > 1500) {
this.levels = 6.2;
this.verticalTranslate = 3000;
} else if (this.docWidth > 1350) {
this.levels = 6;
this.verticalTranslate = 2750;
} else if (this.docWidth > 1250) {
this.levels = 5.8;
this.verticalTranslate = 2450;
} else if (this.docWidth > 1150) {
this.levels = 5.7;
this.verticalTranslate = 2350;
} else if (this.docWidth > 1050) {
this.levels = 5.5;
this.verticalTranslate = 2100;
} else if (this.docWidth > 950) {
this.levels = 5.35;
this.verticalTranslate = 1900;
} else if (this.docWidth > 850) {
this.levels = 5.15;
this.verticalTranslate = 1700;
} else {
this.levels = 4.9;
this.verticalTranslate = 1520;
}
};
// keep track of DOM
this.content = content;
this.header = $('.page-header');
this.body = $('body');
this.town = $('.illust-level--town');
this.townSymbols = $('.illust-level--symbolsTown');
this.house = $('.svg-house');
this.carollers = $('.svg-carollers');
this.star = $('.svg-star');
// position of vertical scroll
this.scrolled = 0;
var body = document.body,
html = document.documentElement;
// height of document
this.docHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
this.docWidth = html.clientWidth;
// zero-based number of sections
this.setLevels();
// bind Zoomer to scroll event
window.addEventListener( 'scroll', this, false);
}
// enables constructor to be used within event listener
// like obj.addEventListener( eventName, this, false )
Zoomer.prototype.handleEvent = function( event ) {
if ( this[event.type] ) {
this[event.type](event);
}
};
// triggered every time window scrolls
Zoomer.prototype.scroll = function( event ) {
this.recalculatePositions();
};
Zoomer.prototype.recalculatePositions = function () {
//LETS HAVE SOME DEFAULTS HERE
var INITIAL_TOWN_WIDTH = 350,
INITIAL_TOWN_HEIGHT = 320,
TARGET_TOWN_WIDTH = 2800,
TARGET_TOWN_HEIGHT = 2560,
TARGET_BG_ZSCALE = 200,
OFFSET_MARGIN = 80,
TARGET_VERTICAL_TRANSLATE = 2600;
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var yOffset = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
// normalize scroll value from 0 to 1
this.scrolled = yOffset / ( this.docHeight - window.innerHeight );
var transformValue,
townTransform,
symboltransformValue;
this.checkStates();
var scrollFactor = (this.scrolled < 0.5 ? this.scrolled : 0.5);
var scale = Math.pow( 3, scrollFactor * this.levels );
var townHeight = Math.round(scale * INITIAL_TOWN_HEIGHT);
var townWidth = Math.round(scale * INITIAL_TOWN_WIDTH);
var townOffset = Math.round(scale * OFFSET_MARGIN) - OFFSET_MARGIN;
//first half of app is the scale – this zooms into the house
if (scrollFactor < 0.5) {
var townYPos = Math.round(((townHeight / 2) + townOffset));
//if we support translate3d
if (KO.UI.supports.transform3d) {
transformValue = 'translate3d(0, 0, 0) scale(' + scale + ')';
townTransform = 'translate3d(-50%, -' + townYPos + 'px, 0)';
symboltransformValue = 'translate3d(-' + (townWidth / 2) + 'px, -' + townYPos + 'px, 0)' + ' scale(' + scale + ')';
} else {
transformValue = 'translate(0, 0) scale(' + scale + ')';
townTransform = 'translate(-50%, -' + townYPos + 'px)';
symboltransformValue = 'translate(-' + (townWidth / 2) + 'px, -' + townYPos + 'px)' + ' scale(' + scale + ')';
}
//the second half is the translate vertically
} else {
var percentageThroughSection = ((this.scrolled - 0.5) / 0.5); //get the percentage of the amount through the section (on a scale 0-1)
var verticalTranslate = percentageThroughSection * this.verticalTranslate; //gets a scaled amount dependent on the percentage of the section scrolled through
var townYPos = Math.round((townHeight / 2) + townOffset - verticalTranslate);
//if we support translate3d
if (KO.UI.supports.transform3d) {
transformValue = 'translate3d(0, 0, 0) scale(' + scale + ')';
townTransform = 'translate3d(-50%, -' + townYPos + 'px, 0)';
} else {
transformValue = 'translate(0, 0) scale(' + scale + ')';
townTransform = 'translate(-50%, -' + townYPos + 'px)';
}
}
// SETTING OF OUR NEW VALUES
//update width and height of town
this.town[0].style.width = townWidth + 'px';
this.town[0].style.height = townHeight + 'px';
// //update the transformed value for the town
this.town[0].style.WebkitTransform = townTransform;
this.town[0].style.MozTransform = townTransform;
this.town[0].style.msTransform = townTransform;
this.town[0].style.transform = townTransform;
// //update scale factor of the outside illustrations and text
// if(navigator.userAgent.toLowerCase().indexOf('firefox') === -1) {
this.content[0].style.WebkitTransform = transformValue;
this.content[0].style.MozTransform = transformValue;
this.content[0].style.msTransform = transformValue;
this.content[0].style.transform = transformValue;
// }
// //town symbols scaling
this.townSymbols[0].style.WebkitTransform = 'scale(' + scale + ')';
this.townSymbols[0].style.MozTransform = 'scale(' + scale + ')';
this.townSymbols[0].style.msTransform = 'scale(' + scale + ')';
this.townSymbols[0].style.transform = 'scale(' + scale + ')';
};
Zoomer.prototype.checkStates = function () {
if (this.scrolled > 0) {
this.header.addClass('scaled');
} else {
this.header.removeClass('scaled');
}
//do a test whether to switch to night or not (after 0.25 scrolled)
if (this.scrolled > 0.15) {
this.body.addClass('night');
} else {
this.body.removeClass('night');
}
//test between state of movement
if (this.scrolled < 0.5) {
this.house.removeClass('inactive'); //make house visible
this.carollers.removeClass('inactive'); //make carollers invisible
this.star.addClass('inactive'); //make carollers invisible
this.townSymbols.find('.symbols--inside').addClass('inactive'); //make nativity symbols not visible
this.townSymbols.find('.symbols--outside').removeClass('inactive'); //make nativity symbols not visible
} else {
this.house.addClass('inactive'); //make house not visible
this.carollers.addClass('inactive'); //make carollers invisible
this.star.removeClass('inactive'); //make carollers invisible
this.townSymbols.find('.symbols--inside').removeClass('inactive'); //make nativity symbols visible
this.townSymbols.find('.symbols--outside').addClass('inactive'); //make nativity symbols not visible
}
};
})(window.KO = window.KO || {}, jQuery);
Also see: Tab Triggers