| <html lang="en" class="loading"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Ryan Brown Self Portrait</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" user-scalable="yes"> | |
| </head> | |
| <body> | |
| <div class="mobile-codepen-note">CodePen doesn't seem to support device tilt. Try viewing <a href="http://portraits.ryankbrown.com/self/" target="_blank">here</a></div> | |
| <main> | |
| <section> | |
| <div class="instructions"> | |
| <div class="move-mouse"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/mouse-icon.svg" class="mouse-icon" alt="Mouse Icon" /> | |
| <span>Move Mouse</span> | |
| </div> | |
| <div class="move-device"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/mobile-icon.svg" class="mobile-icon" alt="Mobile Icon" /> | |
| <span>Tilt Device</span> | |
| </div> | |
| </div> | |
| <figure class="description"> | |
| <svg class="signature" xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 510 120.5" viewBox="0 0 510 120.5"> | |
| <defs> | |
| <clipPath id="mask"> | |
| <path id="mask-shape" d="M305.2 48.7c-1.1-.7-1.2-2.3-.1-3.1 10.4-7.6 37.5-11.3 50-22.4 3.7-3.3 3.5-7.2.2-9.8-3.9-3.1-7.8-3.4-27.5-2.8-11.5.3-31.8 3.3-49.3 10.4-3.3 1.3-6.5 3-9.7 4.7-1.3.7-2.2 2.7-1.9 3.7 1.2 3.7 4.7.4 10.4-1.9 14.4-5.8 23.8-8.4 43.3-11.2 19-2.7 30.6-.8 31.5-.3 4.1 2 1.5 4.9-2.6 6.9-8 4-15.7 6.2-24.1 9.2-22.5 8-26.4 10.7-25.9 16.1.7 8 19.7 12.3 32.9 22.6 3 2.4 8 6.7 5.4 9.5-1 1.1-2.2 2.2-3.6 2.8-10.7 5-19.4 6.2-31.2 7.3-16.7 1.6-21.6 2.1-32.7 2.6.9-2.3 2.1-6.7 11.5-23.2 11.8-20.9 16.4-35.8 18.6-38.1.6-.6 1-1.3.7-2-.4-.8-1.1-1.3-2.1-1.3-1.6 0-2.7.9-3.3 2.2-1.4 2.8-2.7 5.6-4 8.4-6.2 13.2-5.5 12.7-14.9 29.3-7.5 13.3-12.6 22.1-15.1 28.5-.6 1.7 1 3.1 2.7 2.6.1 0 88.5-2 77.8-25.1-4.2-10.2-20.9-17.3-37-25.6zM41.1 70.6c-8.3-10.3-15-12.1-12.1-13.4 9.1-4.2 35.1-10.4 54.1-24.5 3.6-2.7 7.3-5.4 10.3-8.8 7.3-8.2 2.3-20-15.7-19.3-3.8.2-7.5.4-11.2.7C46.9 6.7 16.2 24 7 31.2c-7.7 6.1-1.7 10.6.8 8.8 2-1.4-.3-2.9 1.2-4 2.3-1.6 4.5-3.4 7-4.8 39.8-23.6 51.4-20.3 63-21 8.6-.5 16.1 4 11 9.8-8.6 9.8-24 17.5-36 22.6-5.5 2.4-20.6 7.7-23.1 8.2.3-1.4 4.5-10.7 7.2-18.1.3-.9.3-2.1 0-2.9-.2-.6-1.3-1.2-2-1.2-3.1-.2-1.1 3.9-21.2 39.3C12 73 3.1 89.4 6 94.4c.5.8 1.2 1.4 2.2 1.3 2.2-.4 1-2.7 3.6-7.9 1.5-3.1 2.6-6.4 4.2-9.4 2.6-5 5.5-9.9 8.2-14.9.9-1.6.5-.6 15.5 11.8 1.5 1.2 3.2 2.2 4.8 3.3.6.4 1.3.3 1.7-.4.4-.6.1-1.2-.3-1.7-1.6-2-3.2-3.9-4.8-5.9zm110.2 16.8c-16.3-1.3-28.1 1.9-30.8-7-.3-1.1-.7-2.2-1-3.3-.9-2.7-3.3-3.6-6-1.2-10.3 9.1-11.6 11.1-15 10.9-1-.1-1.5-.5-1.4-1.5.4-8.2 4.5-12 6.6-15.9.5-1 0-2-.7-2.7-1.4-1.5-2.7-1-4.7 1.4-3.3 4-7.5 13.9-19.9 25.7-6.5 6.1-7.6 6.9-11 9.1 3.8-5.9 9.8-12.7 16-22.9 7-10.7 3.2-17.3-4.2-11.7C68.3 76.4 65 84.4 62.3 83.4c-.8-.3-1.3-1-1.4-1.9-.2-2.7-.4-5.5-.6-8.2-.3-9.3.7-13-2.2-13.4-1-.1-1.8.4-2.2 1.4-.2.5-.4 1.1-.4 1.7 0 5.9-.1 11.9.1 17.8.2 6.8 6.9 11.1 12.4 5.3 14-15 10.5-11.5 13.3-13.6.1.1.2.1.3.2-.2.6-.4 1.2-.7 1.8-2.3 3.6-4.4 7.3-6.9 10.7-3.5 4.8-7.2 9.3-10.8 14-2.8 3.5-5.6 7-8.2 10.6-.9 1.2-1.6 2.6-2.1 4-.6 1.5.5 3.4 1.8 3.7 1.4.3 2.8.3 4-.6 2.1-1.5 4.3-2.9 6.1-4.6 5-5 12.1-10 17-15.1 2.3-2.5 4.4-5.1 6.6-7.7 1-1.2 2.1-2.4 3.2-3.8.2.6.3.9.3 1.2.2 2.5 1.5 4.3 3.9 4.9 3 .7 5.9.3 8.6-1.4 3.3-2.2 6.3-4.8 8.9-7.8.5-.5 1-1 1.6-1.5.8 1.7 1.2 3.4 2.1 4.8 3.1 5 8.2 6.9 13.6 7 6.3.2 12.7-.4 19.1-.6 1.1 0 2.2-.1 3.2-.5.6-.2 1.2-.9 1.4-1.4.3-1.8-1.9-2.9-3-3zm347-5.2c-9.5 3.5-15.1 5.2-23.7 3.6-2.2-.4-3.9-1.8-5.5-3.1-2.1-1.7-4.3-2.8-7.1-2.8-4.8-.1-12.1 2.6-15.3-.3-.9-.8-1.6-1.9-2.3-2.9-3.7-5.1-7.1-2.2-14.3 1.1-4.9 2.3-2.6.4-3.8-3.4-1.4-4.4-5.3-.1-13.1 4.5-2.2 1.3-.6-2.4-.5-5.8 0-2.2-1.5-4.5-4.4-3.3-.5.2-1 .2-1.5.4-1.7.5-3.3.5-4.7-.9-.6-.6-1.6-.8-2.5-1-1.2-.2-1.4-2.2-2.8-2.8-2.3-.9-4.7-.8-6.7.7-9.4 7.1-6.8 11.4-9.9 10.9-.7-.1-1.4-.3-1.4-1.3-.3-4.3-.7-8.5-4.4-9.5-.9-.2-1.5-.3-2.5-.2.1-.3-.3-2.2-.4-2.5-.3-.5-.7-1.1-1.2-1.3-.3-.1-1.1.2-1.3.5-.7 1.1-3 6.4-3.4 6.8-4 3.6-11 11.3-12.2 16.5-.5 2.1 1.3 4.3 3.1 3.9 3.7-1.1 8.2-7.1 10.5-11.3 1.1-2 2.9-4.9 4-6.9.2-.4 1.3-.8 1.8-.9.3 0 .7.7.9 1.2.4.7-1.3 11 6.5 9.1 2.4-.6.5 2 4 4.4 3.5 2.4 8.7 2.6 12.8 1.6 3.4-.8 6.9-5.3 7.3-10.4.2-2.1.8-1.9 3.1-1.9-.5 4.8-1.4 8.4 2.1 9.3 4.6 1.2 8.3-2.3 12.3-5.2.2 2 .3 4.6 3.4 5 2.3.3 4.6.1 6.6-1.1 8.8-5.1 7.9-4.3 9.3-1.8 3.4 6.1 10.6 6.5 17.1 4.9 6.4-1.5 7.3 2.7 12.4 4.8 5.4 2.3 11.1 2.2 16.7.9 1.8-.4 3.5-1.2 5.3-2 2.6-1.1 5.2-2.2 7.7-3.5 2.3-1.3.5-4.9-2-4zm-102-.2c-.9.6-2.1.7-2.9.9-2-.3-3.6-.5-5.2-.9-1.5-.4-2.1-1.7-1.6-3.4 1-3.8 4.4-7.6 6.8-8.9 1.6-.9.9 1.1 1.7 3.9.4 1.2 1.4 1.5 2.5.9 1.4-.7 1.9-.4 1.9 1.2-.1 2.7-1.1 4.9-3.2 6.3zM245.4 14.2c-11.6 9-3.1 4.1-29.6 22.2-.8.5-1.6 1-2.3 1.5-.1-.1-.2-.1-.2-.2.1-.3.1-.6.2-.9l2.1-6c.9-2.8 1.7-5.6 1.2-8.6-.3-1.5-1.5-2.7-2.7-2.7-1.1.1-2 1.2-2.1 2.7 0 .7.4 3.4-2.2 10.2-3.5 8.9-7.5 15-9.9 20.4-6.1 13.6-17.6 28.3-18.2 34.6-.2 1.7 1 3.6 2.6 4 1 .3 1.8-.1 2.5-.8 1.1-1.1-.2-2 .3-3.1.7-1.7-.1-.5 11.2-20.1.2-.4.5-.6.8-1.1.5 1.1.9 2.1 1.5 2.8 5.7 7.2 8.2 8.2 11.7 14.4.6 1 1.3 3.5 3.6 2.6s1-3.6.9-4c-3.1-13.2-15.6-13.4-12-25.4 1.6-5.2 5.1-9.3 9.3-12.6 9-7 14.8-9 31.2-23.3 1.9-1.6 2.5-3.8 2.3-5.7-.3-1.6-.9-1.9-2.2-.9z"/> | |
| </clipPath> | |
| </defs> | |
| <path clip-path="url(#mask)" class="sig-stroke line-7" d="M502.8 82.5s-19 9-28.2 6.5-8.5-7.1-15.5-6.3c-7 .9-8.3 2.1-12.5.2s-4.7-8.5-7.3-7.1c-16.3 8.7-14.7 6-15.3-1.4-19.1 14.8-14.7 3.5-14.6-2.6-2.8 1.2-5.5 1.8-8.2-.7 3 8-1.3 12.8-5.9 13.7-4.6.9-17.7-1.7-12.4-11.1s12.6-8.1 15.6-2c-4.8-14.1-15 6.6-15 6.6s-4 1.2-6.1-.4 1.9-11.6-3.6-10.1c-10.2 2.7-27.5 30.6-17.3 19.7 10-10.8 14.2-29.5 14.2-29.5"/> | |
| <path clip-path="url(#mask)" class="sig-stroke line-6" d="M298.8 29.6S277.9 74 264.6 96.5c4.3 0 9.4-.2 12.8-.5 29.4-2.5 36.4-3.3 55.4-9.9 9.2-3.2 9.5-7.9 5.9-12.8-3.6-4.9-21.5-16.1-31-20.5-9.4-4.4-6.3-8.6-2.3-10.7 4-2.1 20.2-7.1 40.2-15.2 19.9-8.1 6.2-14.3.4-14.4-5.8-.1-45.5-1-77.2 16.7"/> | |
| <path clip-path="url(#mask)" class="sig-stroke line-5" d="M215.8 86.6c-1-3.1-1.8-8-11.5-17.4-9.7-9.4-1.5-19.1 8.2-27.3s29.4-20.7 35.4-26.4"/> | |
| <path clip-path="url(#mask)" class="sig-stroke line-4" d="M185.8 91.3c-.9-.8-1.8-2.2-1-4.7s6.7-15.8 10.2-21.9c3.6-6.1 13.5-28 16.3-34.7 2.8-6.7.4-13.2.1-13.8"/> | |
| <path clip-path="url(#mask)" class="sig-stroke line-3" d="M151.3 89.5c-31.8 3.1-31.6-4.7-32.2-6.3-1.2-3.1-1.3-7.5-3-6.1-12.2 10.3-16.3 12.7-20 11.3-4.7-1.8-.2-11.2 5.4-21.8-5.3 9.5-12.2 17.1-20.8 27.4s-26.3 21.1-24.9 19c1.4-2.1 20.1-25.2 26.3-36 6.2-10.8-1.5-7.7-5-4.2s-3.5 3.6-9 9.7c-5.4 6.1-9.7 3.3-9.8-1.2s-.2-23.2-.2-23.2"/> | |
| <path clip-path="url(#mask)" class="sig-stroke line-2" d="M45.5 77.7L23.1 57.3C38.1 52 56.2 45.1 69.6 38c16.9-9 27-18.1 24.1-23.3-2.7-4.8-6.6-14-46.8-2-14.2 4.2-25.6 11.9-30.1 14.8-6.6 4.2-9.5 6.6-9.5 6.6-1.7 1.5-.4 5.2 1.6 7.2"/> | |
| <path clip-path="url(#mask)" class="sig-stroke line-1" d="M7.1 100.2c-1.4-2.3.1-10.2 3.7-17.5.8-1.6 3.1-7.7 6-14 2.8-6.1 7.1-13 9.7-18.5 6.8-14.9 11-23.5 11-23.5"/> | |
| </svg> | |
| <!-- <h1>Ryan K. Brown</h1>--> | |
| <p>Art Direction, Graphic Design, UI/UX Design, Creative Code, Animation</p> | |
| </figure> | |
| <div class="container"> | |
| <div class="build-layers"> | |
| <div class="build-1"></div> | |
| <div class="build-2"></div> | |
| <div class="build-3"></div> | |
| <div class="build-4"></div> | |
| <div class="build-5"></div> | |
| </div> | |
| <div class="parallax-layers"> | |
| <div class="face-1"></div> | |
| <div class="face-2"></div> | |
| <div class="face-3"> | |
| <div></div> | |
| </div> | |
| <div class="face-4"></div> | |
| <div class="face-5"></div> | |
| <div class="face-6"></div> | |
| </div> | |
| <div class="splatter"></div> | |
| </div> | |
| </section> | |
| </main> | |
| </body> | |
| </html> |
I drew a self-portrait using a Wacom tablet a few years ago. Here I’m using JS to detect device tilt or mouse movement to create a sense of depth to the drawing. It sort of works like a magic eye. Try it out on your iPhone, iPad, or Mac.
– – –
Tilt on Mobile doesn't seem to work on Codepen, so if you're on a phone try viting http://portraits.ryankbrown.com/self and tilting your phone!
| /* | |
| IF YOU'RE ON A MOBILE PHONE, TRY VIEWING THIS PEN AT http://portraits.ryankbrown.com/self/ AND TILTING YOU'RE DEVICE! UNFORTUNATELY CODEPEN DOESN'T SEEM TO SUPPORT DEVICE TILT. | |
| */ | |
| var isMobile = { | |
| Android: function() { | |
| return navigator.userAgent.match(/Android/i); | |
| }, | |
| BlackBerry: function() { | |
| return navigator.userAgent.match(/BlackBerry/i); | |
| }, | |
| iOS: function() { | |
| return navigator.userAgent.match(/iPhone|iPad|iPod/i); | |
| }, | |
| Opera: function() { | |
| return navigator.userAgent.match(/Opera Mini/i); | |
| }, | |
| Windows: function() { | |
| return navigator.userAgent.match(/IEMobile/i); | |
| }, | |
| any: function() { | |
| return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); | |
| } | |
| }, | |
| //SET VARIABLES | |
| html = $('html'), | |
| container = $(".container"), | |
| instructions = $(".instructions"), | |
| face1 = $(".face-1"), | |
| face2 = $(".face-2"), | |
| face3 = $(".face-3"), | |
| face4 = $(".face-4"), | |
| face5 = $(".face-5"), | |
| face6 = $(".face-6"), | |
| buildLayers = $(".build-layers"), | |
| orientation, | |
| elementOffsetX, | |
| elementOffsetY, | |
| introHasRun = false, | |
| motionDetected = false, | |
| mouseCenterX, | |
| mouseCenterY, | |
| trackAreaX, | |
| trackAreaY, | |
| trackAreaCenterX, | |
| trackAreaCenterY, | |
| trackAreaRangeX, | |
| trackAreaRangeY, | |
| trackElementX, | |
| trackElementY, | |
| mobileTrackRangeX, | |
| mobileTrackRangeY, | |
| parallaxOn = false, | |
| deviceX, | |
| deviceY, | |
| f1_rate = 0.01, | |
| f1_rate_mobile = 0.7, | |
| f1X, | |
| f1Y, | |
| f2_rate = 0.015, | |
| f2_rate_mobile = 0.6, | |
| f2X, | |
| f2Y, | |
| f3_rate = 0.02, | |
| f3_rate_mobile = 0.5, | |
| f3X, | |
| f3Y, | |
| f4_rate = 0.025, | |
| f4_rate_mobile = 0.4, | |
| f4X, | |
| f4Y, | |
| f5_rate = 0.03, | |
| f5_rate_mobile = 0.3, | |
| f5X, | |
| f5Y, | |
| f6_rate = 0.035, | |
| f6_rate_mobile = 0.2, | |
| f6X, | |
| f6Y; | |
| //READ DEVICE ORIENTATION | |
| function readDeviceOrientation() { | |
| switch (window.orientation) { | |
| case 0: | |
| orientation = 'portrait'; | |
| // Portrait | |
| break; | |
| case 180: | |
| orientation = 'portrait-upside-down'; | |
| // Portrait (Upside-down) | |
| break; | |
| case -90: | |
| orientation = 'landscape-clockwise'; | |
| // Landscape (landscape-clockwise) | |
| break; | |
| case 90: | |
| orientation = 'landscape-counter-clockwise'; | |
| // Landscape (Counterlandscape-clockwise) | |
| break; | |
| } | |
| } | |
| //GET SIZES | |
| function getSizes() { | |
| //GET ORIENTATION | |
| readDeviceOrientation(); | |
| elementOffsetX = container.offset().left; | |
| elementOffsetY = container.offset().top; | |
| trackAreaX = container.width(); | |
| trackAreaY = container.height(); | |
| trackAreaCenterX = trackAreaX / 2; | |
| trackAreaCenterY = trackAreaY / 2; | |
| //DESKTOP TRACK RANGE CODE | |
| trackAreaRangeX = (trackAreaX * 69 / 100) / 2; | |
| if (trackAreaX > trackAreaY * 2) { | |
| trackAreaRangeX = (trackAreaX * 45 / 100) / 2; | |
| } | |
| //MATH FOR RESPONSIVELY TRACKING AREA | |
| if (trackAreaX > trackAreaY) { | |
| trackAreaRangeY = (trackAreaY * 90 / 100) / 2; | |
| } else { | |
| trackAreaRangeY = (trackAreaY * 70 / 100) / 2; | |
| if (trackAreaY > trackAreaX * 2) { | |
| trackAreaRangeY = (trackAreaY * 60 / 100) / 2; | |
| } | |
| } | |
| //MOBILE TRACK RANGE CODE | |
| //Check orientation | |
| mobileTrackRangeX = (trackAreaX / 30); | |
| mobileTrackRangeY = (trackAreaY / 40); | |
| } | |
| //MOVE IMAGES | |
| function moveImages() { | |
| if (introHasRun && f1X > 1 || f1Y > 1) { | |
| motionDetected = true; | |
| } | |
| face1.css({ | |
| "transform": "translateZ(0px) translate(" + f1X + "px, " + f1Y + "px)" | |
| }); | |
| face2.css({ | |
| "transform": "translateZ(0px) translate(" + f2X + "px, " + f2Y + "px)" | |
| }); | |
| face3.css({ | |
| "transform": "translateZ(0px) translate(" + f3X + "px, " + f3Y + "px)" | |
| }); | |
| face4.css({ | |
| "transform": "translateZ(0px) translate(" + f4X + "px, " + f4Y + "px)" | |
| }); | |
| face5.css({ | |
| "transform": "translateZ(0px) translate(" + f5X + "px, " + f5Y + "px)" | |
| }); | |
| face6.css({ | |
| "transform": "translateZ(0px) translate(" + f6X + "px, " + f6Y + "px)" | |
| }); | |
| } | |
| //IF ON MOBILE DEVICES | |
| if (isMobile.any()) { | |
| $('.mobile-codepen-note').css({'display':'block'}); | |
| $('.move-mouse').remove(); | |
| window.addEventListener("deviceorientation", function(e) { | |
| if (parallaxOn) { | |
| // Z = The compass direction - will return a value between 0 and 360 | |
| // alpha = Math.round(e.alpha * 100)/100; | |
| // X = Side to side value - will return a value between -180 and 180 | |
| // deviceY= Math.round(e.deviceY* 100)/100 - 30; | |
| // Y = Front to back value - will return a value between -90 and 90 | |
| // gamma = Math.round(e.gamma * 100)/100; | |
| switch (orientation) { | |
| case 'portrait': | |
| // Y = Front to back value - will return a value between -90 and 90 | |
| deviceY = Math.round(e.beta * 100) / 100 - 30; | |
| // X = Side to side value - will return a value between -180 and 180 | |
| deviceX = Math.round(e.gamma * 100) / 100; | |
| break; | |
| case 'portrait-upside-down': | |
| // X = Side to side value - will return a value between -180 and 180 | |
| deviceY = (Math.round(e.beta * 100) / 100 + 30) * -1; | |
| // Y = Front to back value - will return a value between -90 and 90 | |
| deviceX = (Math.round(e.gamma * 100) / 100) * -1; | |
| break; | |
| case 'landscape-clockwise': | |
| deviceX = (Math.round(e.beta * 100) / 100) * -1; | |
| deviceY = Math.round(e.gamma * 100) / 100 - 30; | |
| break; | |
| case 'landscape-counter-clockwise': | |
| deviceX = Math.round(e.beta * 100) / 100; | |
| deviceY = (Math.round(e.gamma * 100) / 100 + 30) * -1; | |
| break; | |
| } | |
| trackElementX = deviceX; | |
| trackElementY = deviceY; | |
| //IF THE DEVICE ORIENTATION DEGREE IS WITHIN THE TRACK RANGE | |
| if (Math.abs(deviceX) < mobileTrackRangeX) { | |
| f6X = f6_rate_mobile * trackElementX; | |
| f5X = f5_rate_mobile * trackElementX; | |
| f4X = f4_rate_mobile * trackElementX; | |
| f3X = f3_rate_mobile * trackElementX; | |
| f2X = f2_rate_mobile * trackElementX; | |
| f1X = f1_rate_mobile * trackElementX; | |
| } | |
| if(Math.abs(deviceY) < mobileTrackRangeY){ | |
| f6Y = f6_rate_mobile * trackElementY; | |
| f5Y = f5_rate_mobile * trackElementY; | |
| f4Y = f4_rate_mobile * trackElementY; | |
| f3Y = f3_rate_mobile * trackElementY; | |
| f2Y = f2_rate_mobile * trackElementY; | |
| f1Y = f1_rate_mobile * trackElementY; | |
| } | |
| // setTimeout(function() { | |
| // window.requestAnimationFrame(moveImages); | |
| // }, 1000 / 60); | |
| window.requestAnimationFrame(moveImages); | |
| } | |
| }, true); | |
| } else { | |
| $('.move-device').remove(); | |
| //IF ON MOUSE DEVICE | |
| container.on('mousemove', function(e) { | |
| if (parallaxOn) { | |
| mouseCenterX = e.pageX - trackAreaCenterX; | |
| mouseCenterY = e.pageY - trackAreaCenterY; | |
| trackElementX = mouseCenterX - elementOffsetX; | |
| trackElementY = mouseCenterY - elementOffsetY; | |
| //IF MOUSE POSITION IS WITHIN THE TRACK RANGE | |
| if (Math.abs(mouseCenterX) < Math.abs(trackAreaRangeX)) { | |
| f1X = f1_rate * trackElementX; | |
| f2X = f2_rate * trackElementX; | |
| f3X = f3_rate * trackElementX; | |
| f4X = f4_rate * trackElementX; | |
| f5X = f5_rate * trackElementX; | |
| f6X = f6_rate * trackElementX; | |
| } | |
| if (Math.abs(mouseCenterY) < Math.abs(trackAreaRangeY)) { | |
| f1Y = f1_rate * trackElementY; | |
| f2Y = f2_rate * trackElementY; | |
| f3Y = f3_rate * trackElementY; | |
| f4Y = f4_rate * trackElementY; | |
| f5Y = f5_rate * trackElementY; | |
| f6Y = f6_rate * trackElementY; | |
| } | |
| // setTimeout(function() { | |
| // window.requestAnimationFrame(moveImages); | |
| // }, 1000 / 60); | |
| window.requestAnimationFrame(moveImages); | |
| } | |
| }); | |
| } | |
| //CHECK IF THERE HAS BEEN MOVEMENT EVERY 2 SECONDS | |
| function hasDeviceMoved() { | |
| setInterval(function() { | |
| if (!motionDetected && parallaxOn) { | |
| instructions.addClass('show'); | |
| // console.log('motion has not been detected.'); | |
| } else { | |
| instructions.removeClass('show'); | |
| motionDetected = true; | |
| } | |
| }, 500); | |
| } | |
| $(window).resize(getSizes); | |
| $(window).on("orientationchange", function() { | |
| getSizes(); | |
| }); | |
| //IF THE LAST ANIMATION HAS RUN START TO CHECK FOR MOVEMENT | |
| $('.description p').one('transitionend', function() { | |
| // console.log('.description has finished animating'); | |
| buildLayers.remove(); | |
| introHasRun = true; | |
| parallaxOn = true; | |
| setTimeout(function() { | |
| hasDeviceMoved(); | |
| }, 2000); | |
| }); | |
| setTimeout(function() { | |
| html.removeClass('loading').addClass('face-build'); | |
| setTimeout(function(){ | |
| $('.preloader-overlay').remove(); | |
| }, 1000); | |
| }, 1000); | |
| getSizes(); | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
| // ORDER | |
| // 01. LOADING | |
| // 02. FACE-BUILD | |
| // 03. FACE-MOVE | |
| // 04. DEVICE-INSTRUCTIONS | |
| //--- SRCSET-LIKE CSS BG MIXINS | |
| @mixin bgImageCreator($image, $file-type) { | |
| background: url( "https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/" + $image + "-med" + $file-type) no-repeat center center; | |
| background-size: contain; | |
| @media (min-width: 940px) { | |
| background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/" + $image + "-large" + $file-type) no-repeat center center; | |
| background-size: contain; | |
| } | |
| @media (-webkit-max-device-pixel-ratio: 1) and (max-width: 500px), (max-resolution: 96dpi) and (max-width: 500px) { | |
| background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/" + $image + "-small" + $file-type) no-repeat center center; | |
| background-size: contain; | |
| } | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| $gold: #a18a67; | |
| //--- PAGE CODE | |
| $background-color: #181818; | |
| html, | |
| body { | |
| // cursor: none; | |
| font-size: 10px; | |
| width: 100%; | |
| height: 100%; | |
| background: $background-color; | |
| font-family: "Helvetica", "Arial", sans-serif; | |
| overflow: hidden; | |
| } | |
| main { | |
| position: relative; | |
| overflow: hidden; | |
| height: 100%; | |
| width: 100%; | |
| min-width: 320px; | |
| min-height: 568px; | |
| } | |
| section { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| //--- PRELOADER CODE | |
| $loader-time: 3s; | |
| $circle-length: 338 - 20; | |
| $preloader-icon-size: 9vh; | |
| .preloader-overlay { | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0; | |
| background: $background-color; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: opacity .25s ease-in-out; | |
| transform: translate3d(0,0,0); | |
| html.loading & { | |
| opacity: 1; | |
| } | |
| } | |
| svg.preloader-icon { | |
| width: $preloader-icon-size; | |
| height: $preloader-icon-size; | |
| html.loading & { | |
| animation-play-state: running; | |
| } | |
| html.hide-preloader { | |
| animation-play-state: paused; | |
| } | |
| @media (orientation: portrait) { | |
| @media (min-height: 800px) { | |
| width: 6vh; | |
| height: 6vh; | |
| } | |
| @media (min-height: 800px) { | |
| width: 6vh; | |
| height: 6vh; | |
| } | |
| @media (min-height: 1100px) { | |
| width: 5vh; | |
| height: 5vh; | |
| } | |
| } | |
| @media (orientation: landscape) { | |
| @media (min-width: 500px) { | |
| width: 10vw; | |
| height: 10vw; | |
| } | |
| @media (min-width: 600px) { | |
| width: 9vw; | |
| height: 9vw; | |
| } | |
| @media (min-width: 800px) { | |
| width: 6vw; | |
| height: 6vw; | |
| } | |
| @media (min-width: 1000px) { | |
| width: 5vw; | |
| height: 5vw; | |
| } | |
| @media (min-width: 1600px) { | |
| width: 2.75vw; | |
| height: 2.75vw; | |
| } | |
| } | |
| } | |
| //--- DEVICE MOVE INSTRUCTIONS CODE | |
| .instructions { | |
| position: absolute; | |
| background: rgba($background-color, .75); | |
| height: 100%; | |
| opacity: 0; | |
| transition: opacity .25s ease-in-out; | |
| width: 100%; | |
| z-index: 12; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| transform-style: preserve-3d; | |
| transform: translate3d(0,0,0); | |
| perspective: 500px; | |
| pointer-events: none; | |
| &.show { | |
| opacity: 1; | |
| transition: opacity .5s ease-in-out; | |
| } | |
| .move-mouse, | |
| .move-device { | |
| text-align: center; | |
| margin-bottom: 3%; | |
| img { | |
| display: block; | |
| height: auto; | |
| margin: 0 auto; | |
| } | |
| span { | |
| // display: none; | |
| color: white; | |
| font-family: Helvetica, Arial, sans-serif; | |
| font-weight: bold; | |
| font-size: 1.4rem; | |
| @media (min-width: 400px){ | |
| font-size: 1.5rem; | |
| } | |
| } | |
| } | |
| .move-mouse { | |
| img { | |
| transform: translateZ(20px); | |
| animation: mouseMoveIcon 2s infinite cubic-bezier(.59, .24, .43, .75); | |
| animation-play-state: paused; | |
| width: 6.5rem; | |
| margin-bottom: 5%; | |
| @media (orientation: landscape) { | |
| @media (min-width: 1400px) { | |
| width: 9rem; | |
| } | |
| } | |
| @media (orientation: portrait) { | |
| width: 6.5rem; | |
| @media (min-width: 700px) { | |
| width: 8.5rem; | |
| } | |
| } | |
| } | |
| } | |
| .move-device { | |
| img { | |
| transform: translateZ(20px); | |
| animation: deviceMoveIcon 1.5s infinite ease-in-out; | |
| animation-play-state: paused; | |
| width: 3.5rem; | |
| margin-bottom: 30%; | |
| @media (orientation: landscape) { | |
| @media (min-width: 1300px) { | |
| width: 3.75rem; | |
| } | |
| } | |
| @media (orientation: portrait) { | |
| width: 3.5rem; | |
| @media (min-width: 700px) { | |
| margin-bottom: 40%; | |
| width: 4.15rem; | |
| } | |
| @media (min-width: 1000px) { | |
| width: 4.5rem; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .instructions.show img { | |
| animation-play-state: running; | |
| } | |
| @keyframes mouseMoveIcon { | |
| #{100/5*1}% { transform: translateZ(20px) translateX(0) } | |
| #{100/5*2}% { transform: translateZ(20px) translateX(10%) } | |
| #{100/5*3 + 7}% { transform: translateZ(20px) translateX(-10%) } | |
| #{100/5*4 + 7}% { transform: translateZ(20px) translateX(0) } | |
| #{100/5*5}% { transform: translateZ(20px) translateX(0) } | |
| } | |
| @keyframes deviceMoveIcon { | |
| 0% { transform: translateZ(20px) rotateY(-20deg) } | |
| 50% { transform: translateZ(20px) rotateY(20deg) } | |
| 100% { transform: translateZ(20px) rotateY(-20deg)} | |
| } | |
| //--- IMAGE LAYER STRUCTURE CODE | |
| .container { | |
| overflow: hidden; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .parallax-layers, .build-layers { | |
| height: 100%; | |
| position: absolute; | |
| transform: translate3d(0, 0, 0) scale(1.45, 1.45) translate(-1%, 2%); | |
| width: 100%; | |
| overflow: hidden; | |
| // PORTRAIT MEDIA QUERIES | |
| @media (orientation: landscape) { | |
| transform: translate3d(0, 0, 0) scale(1.6, 1.6) translate(-1%, 6%); | |
| @media (min-height: 700px) { | |
| transform: translate3d(0, 0, 0) scale(1.25, 1.25) translate(-1%, 6.75%); | |
| } | |
| @media (min-height: 800px) { | |
| transform: translate3d(0, 0, 0) scale(1.15, 1.15) translate(-1%, 7%); | |
| } | |
| @media (min-height: 1080px) { | |
| transform: translate3d(0, 0, 0) scale(1.05, 1.05) translate(-1%, 3.75%); | |
| } | |
| @media (min-height: 1200px) { | |
| transform: translate3d(0, 0, 0) scale(1, 1) translate(-1%, 2%); | |
| } | |
| @media (min-height: 1300px) { | |
| transform: translate3d(0, 0, 0) scale(1, 1) translate(-1%, 1%); | |
| } | |
| } | |
| @media (orientation: portrait) { | |
| transform: translate3d(0, 0, 0) scale(1.45, 1.45) translate(-1%, 2%); | |
| @media (min-width: 500px){ | |
| transform: translate3d(0, 0, 0) scale(1.2, 1.2) translate(-1%, 2%); | |
| } | |
| @media (min-width: 600px){ | |
| transform: translate3d(0, 0, 0) scale(1.1, 1.1) translate(-1%, 2.25%); | |
| } | |
| @media (min-width: 800px){ | |
| transform: translate3d(0, 0, 0) scale(1, 1) translate(-1%, 1.75%); | |
| } | |
| } | |
| div { | |
| height: 100%; | |
| position: absolute; | |
| width: 100%; | |
| } | |
| } | |
| //--- FACE-BUILD ANIMATION | |
| $face-build-total-duration: 7; | |
| $face-build-layer-duration: 1.75; | |
| $face-build-number-of-steps: 6; | |
| $build-ease: cubic-bezier(.35, -0.02, .35, 1); | |
| $trigger-delay-per-layer: $face-build-total-duration/$face-build-number-of-steps; | |
| $final-build: $trigger-delay-per-layer*$face-build-number-of-steps; | |
| $build-completion-delay: $face-build-total-duration + .75; | |
| .build-layers { | |
| // Fade out the build layers once the build is done | |
| opacity: 1; | |
| transition: opacity $face-build-layer-duration + s ease-in-out; | |
| transition-delay: $final-build + s; | |
| html.face-build & { | |
| opacity: 0; | |
| } | |
| [class*='build-0'] { | |
| will-change: opacity; | |
| } | |
| } | |
| @for $i from 1 through $face-build-number-of-steps { | |
| .build-#{$i} { | |
| @include bgImageCreator("build-0#{$i}", ".jpg"); | |
| // background: red; | |
| opacity: 0; | |
| transition: opacity $face-build-layer-duration + s $build-ease; | |
| // Trigger layer animation one after another. | |
| // ($i - 1) makes sure the delay starts immediately | |
| transition-delay: $trigger-delay-per-layer*($i - 1) + s; | |
| html.face-build & { | |
| opacity: 1; | |
| } | |
| } | |
| } | |
| //--- FACE-PARALLAX LAYERS | |
| .parallax-layers { | |
| transition: opacity $face-build-layer-duration + s $build-ease; | |
| // trigger delay makes sure the delay starts immediately | |
| transition-delay: $trigger-delay-per-layer*($face-build-number-of-steps - 1) + s; | |
| opacity: 0; | |
| z-index: 1; | |
| html.face-build & { | |
| opacity: 1; | |
| } | |
| } | |
| // Create the Face Layers | |
| $face-list: 1,2,4,5; | |
| @each $num in $face-list { | |
| .face-#{$num} { | |
| @include bgImageCreator("0#{$num}-face", ".png"); | |
| } | |
| } | |
| // Face 3 excluded to create Eye move | |
| .face-3 { | |
| overflow: hidden; | |
| div { | |
| width: 100%; | |
| height: 100%; | |
| transform-origin: center; | |
| @include bgImageCreator("03-face", ".png"); | |
| html.face-build & { | |
| animation: eyeMoveLarge 8s infinite ease-in-out; | |
| animation-delay: $build-completion-delay - 2.25s; | |
| @media (orientation: landscape) { | |
| @media (min-width: 400px) { | |
| animation-name: eyeMoveSmall; | |
| } | |
| @media (min-width: 1100px) { | |
| animation-name: eyeMoveLarge; | |
| } | |
| @media (max-height: 700px) { | |
| animation-name: eyeMoveExtraSmall; | |
| } | |
| } | |
| @media (orientation: portrait) { | |
| animation-name: eyeMoveLarge; | |
| } | |
| } | |
| } | |
| } | |
| html.face-build .build-1, .build-1 { | |
| opacity: 1; | |
| animation: none; | |
| } | |
| @keyframes eyeMoveExtraSmall { | |
| 0% { transform: translateX(0) } | |
| 80% { transform: translateX(0) } | |
| 90% { transform: translateX(.3%) } | |
| 100% { transform: translateX(0) } | |
| } | |
| @keyframes eyeMoveSmall { | |
| 0% { transform: translateX(0) } | |
| 80% { transform: translateX(0) } | |
| 90% { transform: translateX(.7%) } | |
| 100% { transform: translateX(0) } | |
| } | |
| @keyframes eyeMoveLarge { | |
| 0% { transform: translateX(0) } | |
| 80% { transform: translateX(0) } | |
| 90% { transform: translateX(1%) } | |
| 100% { transform: translateX(0) } | |
| } | |
| .splatter { | |
| height: 100%; | |
| width: 100%; | |
| @include bgImageCreator("splatter", ".jpg"); | |
| opacity: 0; | |
| transition: all $face-build-layer-duration + s; | |
| transition-delay: $build-completion-delay + .1s; | |
| html.face-build & { | |
| opacity: 1; | |
| } | |
| } | |
| //--- DESCRIPTION | |
| .description { | |
| // display: none; | |
| width: 100%; | |
| line-height: 110%; | |
| text-align: center; | |
| background: linear-gradient(to bottom, rgba($background-color, 0), rgba($background-color, 0) 0%); | |
| margin: 0 auto; | |
| opacity: 0; | |
| padding: 10vh 2rem; | |
| padding-bottom: 6vh; | |
| position: absolute; | |
| bottom: 0; | |
| z-index: 11; | |
| transition: all 1s ease-out; | |
| transition-delay: $build-completion-delay + s; | |
| transform: translateY(10%); | |
| pointer-events: none; | |
| @media (min-width: 400px) { | |
| padding-left: 4rem; | |
| padding-right: 4rem; | |
| } | |
| @media (orientation: landscape) { | |
| padding-top: 12vh; | |
| @media (min-height: 700px) { | |
| padding-bottom: 7vh; | |
| } | |
| @media (min-width: 1300px) { | |
| padding-bottom: 9vh; | |
| } | |
| } | |
| @media (orientation: portrait) { | |
| @media (min-height: 1000px) { | |
| padding-bottom: 8.5vh; | |
| } | |
| } | |
| // @media (min-width: 1400px) { | |
| // padding-bottom: 7vh; | |
| // } | |
| html.face-build & { | |
| opacity: 1; | |
| transform: translateY(0); | |
| background: linear-gradient(to bottom, rgba($background-color, 0), rgba($background-color, 0.9) 60%); | |
| // background: rgba(red, .2); | |
| } | |
| //--- SIGNATURE | |
| svg.signature { | |
| height: 5rem; | |
| $translateX: translateX(5%); | |
| @media (orientation: landscape) { | |
| @media (min-height: 400px) { | |
| margin-bottom: .5%; | |
| transform: $translateX scale(1.1); | |
| } | |
| @media (min-height: 600px) { | |
| margin-bottom: 1.30%; | |
| transform: $translateX scale(1.3); | |
| } | |
| @media (min-height: 1000px) { | |
| margin-bottom: 1.25%; | |
| transform: $translateX scale(1.45); | |
| } | |
| @media (min-height: 1100px) { | |
| margin-bottom: 1.25%; | |
| transform: $translateX scale(1.7); | |
| } | |
| } | |
| @media (orientation: portrait) { | |
| @media (min-width: 300px) { | |
| margin-bottom: 3%; | |
| transform: $translateX scale(1.1); | |
| } | |
| @media (min-width: 350px) { | |
| margin-bottom: 4%; | |
| transform: $translateX scale(1.2); | |
| } | |
| @media (min-width: 400px) { | |
| transform: $translateX scale(1.3); | |
| } | |
| @media (min-width: 700px) { | |
| margin-bottom: 3.5%; | |
| transform: $translateX scale(1.4); | |
| } | |
| @media (min-width: 1000px) { | |
| margin-bottom: 4.25%; | |
| transform: $translateX scale(1.7); | |
| } | |
| } | |
| .sig-stroke { | |
| stroke: darken(white, 10%); | |
| stroke: $gold; | |
| fill:none; | |
| stroke-width: 8.2509; | |
| stroke-linecap:round; | |
| stroke-linejoin:round; | |
| stroke-miterlimit:10; | |
| } | |
| $line-lengths: 80, 219, 267, 83, 98, 364, 296; | |
| $num-lines: 7; | |
| $draw-duration: .5; | |
| @for $i from 1 through $num-lines { | |
| .line-#{$i} { | |
| stroke-dashoffset: -1*nth($line-lengths, $i)*2; | |
| stroke-dasharray: nth($line-lengths, $i)*2 10000; | |
| transition: all $draw-duration + s ease-in-out; | |
| transition-delay: ($i - 1)*$draw-duration/2 + $build-completion-delay + s; | |
| html.face-build & { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| } | |
| .line-3 { | |
| transition-duration: $draw-duration*2.75 + s ; | |
| transition-delay: $build-completion-delay + $draw-duration - .5 + s; | |
| } | |
| .line-7 { | |
| transition-duration: $draw-duration*2.75 + s ; | |
| } | |
| .line-4 { | |
| transition-delay: $build-completion-delay + $draw-duration*2.25 + s; | |
| } | |
| .line-5 { | |
| transition-delay: $build-completion-delay + $draw-duration*2.75 + s; | |
| } | |
| .line-6 { | |
| transition-duration: $draw-duration*1.5 + s; | |
| transition-delay: $build-completion-delay + $draw-duration*3.25 + s; | |
| } | |
| .line-7 { | |
| transition-delay: $build-completion-delay + $draw-duration*3.5 + s; | |
| } | |
| } | |
| p { | |
| transition: all 1s ease-out; | |
| transition-delay: $build-completion-delay + 3s; | |
| transform: translateY(50%); | |
| opacity: 0; | |
| color: darken(white, 50%); | |
| font-size: 1.5rem; | |
| line-height: 150%; | |
| @media (orientation: landscape) { | |
| @media (min-height: 600px) { | |
| font-size: 1.6rem; | |
| } | |
| @media (min-height: 1000px) { | |
| font-size: 1.7rem; | |
| } | |
| @media (min-height: 1200px) { | |
| font-size: 1.8rem; | |
| } | |
| } | |
| @media (orientation: portrait) { | |
| @media (min-width: 350px) { | |
| font-size: 1.5rem; | |
| } | |
| @media (min-width: 400px) { | |
| font-size: 1.6rem; | |
| } | |
| @media (min-width: 550px) { | |
| font-size: 1.7rem; | |
| } | |
| @media (min-width: 600px) { | |
| font-size: 1.8rem; | |
| } | |
| @media (min-width: 650px) { | |
| font-size: 1.7rem; | |
| } | |
| @media (min-width: 800px) { | |
| font-size: 1.6rem; | |
| } | |
| @media (min-width: 1000px) { | |
| font-size: 1.8rem; | |
| } | |
| } | |
| html.face-build & { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| } | |
| .mobile-codepen-note { | |
| display: none; | |
| background: rgba(black, .5); | |
| padding: 16px; | |
| color: white; | |
| font-size: 16px; | |
| line-height: 120%; | |
| position: fixed; | |
| z-index: 999; | |
| a { | |
| color: $gold; | |
| } | |
| } |