<!-- Work In Progress -->
<!-- https://www.svgrepo.com/collection/emojione-mono-emojis/ -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=aktura@400&display=swap" rel="stylesheet">
<body>
<div class="activity"></div>
<div class="vignette"></div>
<h3 class="nav-title _1" ><a href="#hello"></a></h3>
<h3 class="nav-title _2" ><a href="#studio"></a></h3>
<h3 class="nav-title _3" ><a href="#contact"></a></h3>
<div class="cursor"></div>
<div class='btn-fullscreen' id='fullscreen-mode'>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' focusable='false' width='1.4em' height='1.4em' style='-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);' preserveAspectRatio='xMidYMid meet' viewBox='0 0 17 17'>
<g fill='' fill-rule='evenodd'>
<path d='M3 5h12v8H3z'/>
<path d='M3.918 14.938H1v-2.876h1v1.98h1.918v.896z'/>
<path d='M17 14.938h-2.938v-.896H16v-1.984h1v2.88z'/>
<path d='M17 5.917h-1v-1.95h-1.943v-.946H17v2.896z'/>
<path d='M2 5.938H1V3h2.938v.938H2v2z'/>
</g>
</svg>
</div>
<section id="hello">
<div class="section-content">
<h2 class="title"> </h2>
<h3 class="headline centered">ANDREY SUPER DESIGNER</h3>
<svg id="svg-globe" class="" height="400px" width="500px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g> <path class="svg-globe-path" d="M511.878,247.973l-21.488,0.672l21.488-0.68c-2.168-69.219-31.732-131.348-77.876-175.949 C387.882,27.377,324.93-0.004,256.13,0.004c-2.718,0-5.443,0.046-8.176,0.13h0.016C178.743,2.294,116.622,31.858,72.013,78.002 C27.382,124.122,0,187.074,0,255.874c0,2.709,0.046,5.435,0.13,8.16c2.168,69.22,31.732,131.347,77.875,175.949 c46.113,44.632,109.065,72.02,177.865,72.013c2.694,0,5.42-0.038,8.16-0.13c69.227-2.16,131.355-31.724,175.957-77.876 c44.64-46.121,72.021-109.065,72.013-177.857C512,253.416,511.962,250.699,511.878,247.973z M102.921,107.894 c19.64-20.29,43.274-36.647,69.67-47.891c-10.961,15.77-20.336,34.426-28.045,55.304H96.089 C98.303,112.779,100.585,110.306,102.921,107.894z M75.692,142.664h60.112c-8.282,30.212-13.327,63.906-14.365,99.661H43.472 C45.77,205.914,57.243,171.938,75.692,142.664z M75.647,369.344c-18.351-29.121-29.808-63.044-32.144-99.661h78.028 c1.046,35.732,5.954,69.471,14.236,99.661H75.647z M107.898,409.083c-4.091-3.962-7.984-8.114-11.748-12.381h48.442 c4.099,11.091,8.579,21.67,13.594,31.396c4.405,8.518,9.16,16.487,14.252,23.847C148.37,441.654,126.523,427.082,107.898,409.083z M242.329,468.524c-5.931-0.374-11.809-0.946-17.603-1.801c-2.404-1.573-4.809-3.282-7.213-5.236 c-16.381-13.313-31.778-35.831-43.694-64.784h68.51V468.524z M242.329,369.344h-78.15c-8.794-29.411-14.267-63.365-15.381-99.661 h93.531V369.344z M242.329,242.325h-93.448c1.115-36.327,6.618-70.235,15.42-99.661h78.028V242.325z M242.329,115.306h-68.433 c2.71-6.588,5.542-12.954,8.595-18.84c10.298-19.969,22.404-35.647,35.022-45.945c2.366-1.924,4.732-3.604,7.099-5.16 c5.832-0.862,11.74-1.48,17.717-1.863V115.306z M436.369,142.664c18.351,29.128,29.8,63.044,32.136,99.661h-78.02 c-1.046-35.732-5.954-69.471-14.236-99.661H436.369z M404.11,102.917c4.092,3.961,7.985,8.114,11.756,12.389h-48.441 c-4.099-11.092-8.58-21.672-13.596-31.396c-4.412-8.527-9.167-16.496-14.267-23.847C363.63,70.353,385.484,84.918,404.11,102.917z M269.687,43.476c5.924,0.374,11.801,0.954,17.587,1.802c2.412,1.58,4.824,3.282,7.229,5.244 c16.381,13.32,31.778,35.823,43.686,64.784h-68.502V43.476z M269.687,142.664h78.15c8.794,29.411,14.267,63.364,15.381,99.661 h-93.531V142.664z M269.687,269.683h93.448c-1.114,36.327-6.618,70.242-15.42,99.661h-78.028V269.683z M329.525,415.534 c-10.297,19.976-22.412,35.655-35.022,45.953c-2.359,1.924-4.725,3.595-7.091,5.152c-5.832,0.863-11.74,1.481-17.725,1.862v-71.799 h68.426C335.402,403.289,332.57,409.648,329.525,415.534z M409.087,404.106c-19.64,20.29-43.266,36.64-69.655,47.884 c10.962-15.771,20.328-34.419,28.037-55.288h48.449C413.698,399.22,411.423,401.694,409.087,404.106z M436.308,369.344h-60.105 c8.29-30.206,13.336-63.906,14.374-99.661h77.952C466.23,306.086,454.757,340.07,436.308,369.344z"></path> </g> </g></svg> </div>
<div id="img-bkg"></div>
</section>
<section id="contact">
<div class="section-content">
<h2 class="title"></h2>
<h3 class="headline centered"></h3>
</div>
<svg width="0" height="0">
<defs id="defs1">
<filter id="turbulence-effect">
<feTurbulence type="fractalNoise" baseFrequency="0.002" numOctaves="1" seed="1" result="noise">
<animate attributeName="baseFrequency" values="0.002;0.01;0.002" dur="20s" repeatCount="indefinite"/>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="80">
<animate attributeName="scale" values="80; 120; 80" dur="10s" repeatCount="indefinite" />
</feDisplacementMap>
</filter>
<filter id="pixelate-effect" x="0" y="0">
<feFlood x="4" y="4" height="2" width="2"/>
<feComposite width="12" height="16"/>
<feTile x="0" y="0" width="0" height="0" result="c"/>
<feComposite in="SourceGraphic" in2="c" operator="in"/>
<feMorphology operator="dilate" radius="3"/>
<feMorphology operator="dilate" radius="1"/>
</filter>
<filter id="pixelate-effect-sm" x="0" y="0">
<feFlood x="4" y="4" height="1" width="1"/>
<feComposite width="4" height="4"/>
<feTile x="0" y="0" width="108" height="108" result="c"/>
<feComposite in="SourceGraphic" in2="c" operator="in"/>
<feMorphology operator="dilate" radius="1"/>
</filter>
<filter style="color-interpolation-filters:sRGB" id="lines-effect">
<feConvolveMatrix in="SourceGraphic" kernelMatrix="0 250 0 250 -1338 250 0 250 0" order="3 3" result="convolve" id="feConvolveMatrix296" />
<feBlend in="convolve" in2="SourceGraphic" mode="multiply" result="blend" id="feBlend296" />
<feTurbulence
type="turbulence"
baseFrequency="0.25 0.0"
numOctaves="1"
seed="6"
result="turbulence"
id="feTurbulence296">
<animate attributeName="baseFrequency"
values="0.23 0.0; 0.1 0.0; 0.25 0.0; 0.2 0.0';"
dur="1s"
repeatCount="indefinite" />
</feTurbulence>
<feColorMatrix
in="blend"
type="luminanceToAlpha"
result="colormatrix1"
id="feColorMatrix296" />
<feComposite in="turbulence" in2="colormatrix1" k1="5.75851" k2="0.835913" k4="0.0853659" operator="arithmetic" result="composite1" id="feComposite296" k3="0" />
<feColorMatrix in="composite1" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 10 -9 " result="colormatrix2" id="feColorMatrix297" />
<feGaussianBlur stdDeviation="0.0" result="blur" id="feGaussianBlur297" />
<feFlood flood-color="rgb(0,0,0)" flood-opacity="1" result="flood1" id="feFlood297" />
<feComposite in="flood1" in2="blur" operator="out" result="composite2" id="feComposite297" />
<feFlood flood-color="rgb(255,255,255)" flood-opacity="1" result="flood2" id="feFlood298" />
<feComposite in="flood2" in2="blur" operator="in" result="composite3" id="feComposite298" />
<feComposite in="composite3" in2="composite2" k2="1" k3="1" operator="arithmetic" result="composite4" id="feComposite299" k1="0" k4="0"/>
<feComposite in2="SourceGraphic" operator="in" result="composite5" id="feComposite300" /></filter>
</defs></svg>
</section>
</body>:root {
--c0: white;
--c1: #f5f5dc;
--c2: #dcdcc6;
--c3: #c4c4b0;
--c4: #abab9a;
--c5: #939384;
--c6: #7a7a6e;
--c7: #626258;
--c8: #494942;
--c9: #31312c;
--c10: #181816;
--c11: black;
--filter-01:url(#turbulence-effect);
}
:root[data-theme="light"] {
--c11:white;
--c0:black;
--filter-01:url(#pixelate-effect);
}
:root[data-theme="dark"] {
--c11:black;
--c0:white;
--filter-01:url(#turbulence-effect);
}
:root[data-theme="grey"] {
--c11:lightgrey;
--c0:#333;
--filter-01:url(#lines-effect);
}
::-webkit-scrollbar {
width: 8px;
height: 3px;
background-color: var(--c11);
}
::-webkit-scrollbar-thumb {
height: 50px;
background-color: var(--c0);
/*
border-top: solid 4px var(--c1);
border-bottom: solid 4px var(--c1);
*/
border-radius: 0px;
}
::-webkit-scrollbar-button {
background-color: var(--c8);
display: none;
}
::-webkit-scrollbar-track {
background-color: var(--c8);
}
::-webkit-scrollbar-track-piece {
background-color: var(--c8);
}
::-webkit-scrollbar-corner {
background-color: var(--c9);
}
::-webkit-resizer {
background-color: var(--c9);
}
*,
::before,
::after {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: border-box;
}
html {
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
}
body {
overflow-y: scroll;
overflow-x: hidden;
scroll-behavior: smooth;
background: var(--c0);
color: var(--c11);
/*
font-size: min(max(1rem, 4vw), 22px);
*/
font-family: "Inter", sans-serif;
user-select: none;
margin: 0;
padding: 0;
}
.centered {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -40%);
}
footer {
font-size: min(max(0.5rem, 1rem), 1rem);
font-weight: 0;
position: absolute;
width: 100vw;
height: 4em;
left: 0;
bottom: 0;
& #year {
position: absolute;
text-transform: uppercase;
top: 0;
left: 50%;
transform: translate(-50%, 0%);
font-size: min(max(0.5rem, 1rem), 1rem);
text-transform: uppercase;
transition: color 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
font-family: Times,serif;
}
}
section {
scroll-snap-align: start;
position: relative;
display: block;
width: 100vw;
height: 100vh;
min-height: 100vh;
border-top: solid 1px var(--c0);
background: var(--c0);
overflow:hidden;
transition: background 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
#img-bkg {
z-index:63;
position:absolute;
top:0;
left:0;
width:50vw;
height:100vh;
background: var(--c0) url(https://static.tildacdn.com/tild3364-3136-4665-a532-343765653762/photo_2024-10-08_00-.jpg) no-repeat 50% 50% fixed;
background-size: cover;
pointer-events:none;
mix-blend-mode:difference;
transform:scalex(-1);
filter:grayscale(1) contrast(1);
}
section .section-content {
display: block;
position: absolute;
top: 5rem;
bottom: 5rem;
left: 2rem;
right: 2rem;
padding: 0.4rem;
background: var(--c0);
border-radius: 0.7rem;
transition: background 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
section .section-content .title {
position: relative;
transition: color 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
color: var(--c11);
top: 0rem;
left: 1rem;
font-family: Arial, sans-serif;
font-size:12px;
/*
letter-spacing: 0em;
font-family: "Inter", sans-serif;
font-weight: 500;
/*
font-size: min(max(4rem, 8rem), 10rem);
font-optical-sizing: auto;
line-height:1em;
text-align:left;
*/
font-style: normal;
opacity: 1;
z-index: 22;
}
section#hello .section-content .headline {
color: var(--c11);
opacity:1;
}
section#studio {
background: var(--c0);
}
section#studio .section-content {
background: var(--c11);
height:auto;
overflow:hidden;
}
section#studio .section-content .title {
color: var(--c0);
}
section#studio .section-content .subtitle {
color: var(--c0);
left: 1rem;
position: relative;
transition: color 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
/************
Portfolio Grid
*************/
section#studio .cards-container {
width: 100%;
max-width: 90%;
max-height: 80%;
margin: 1rem auto;
overflow-y: scroll;
}
.overflow {
min-height: 100vh;
}
/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */
/* total width
.cards-container::-webkit-scrollbar {
background-color:#fff;
width:16px
}
.cards-container::-webkit-scrollbar-track {
width:2px;
background-color:#fff
}
.cards-container::-webkit-scrollbar-track:hover {
background-color:#f4f4f4
}
.cards-container::-webkit-scrollbar-thumb {
background-color:#babac0;
border-radius:16px;
border:5px solid #fff
}
.cards-container::-webkit-scrollbar-thumb:hover {
background-color:#a0a0a5;
border:1px solid #f4f4f4
}
*/
/* set button(top and bottom of the scrollbar) */
.cards-container::-webkit-scrollbar-button {display:none}
/* div box */
.cards-container {
width: 100%;
max-width: 90%;
height: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 16px;
/* if we want equal height on cards */
grid-auto-rows: 1fr;
overflow-y: scroll
}
section#studio .card {
color:var(--c0);
transition: color 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
padding: 1rem;
border: 1px solid #222;
box-sizing: border-box;
& h2 {
/*
text-decoration:underline;
*/
}
}
section#studio .overlay {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 16px;
grid-auto-rows: 1fr;
overflow:hidden;
}
.btn-more a {
padding-top: 10px;
padding-bottom: 5px;
overflow: hidden;
font-size:12px;
color: var(--c0);
z-index: 13;
padding: 6px;
background-position-y: -0%;
background-image: linear-gradient(180deg, transparent 50%, transparent 50%) !important;
transition: all 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
background-size: 0%;
background-size: auto 190%;
&:hover {
padding: 6px;
background-position-y: 100%;
color: var(--c11);
background-image: linear-gradient(180deg, transparent 50%, var(--c0) 50%) !important;
transition: all 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
/*
filter: var(--filter-01);
*/
}
}
a {
color: var(--c11);
text-decoration: none;
}
.headline{
filter: var(--filter-01);
letter-spacing: -0.11em;
font-family: "Inter", sans-serif;
font-weight: 700;
font-size:7em;
opacity:.035;
text-align:center;
transition: color 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.nav-title {
z-index: 12;
position: fixed;
font-size: min(max(0.5rem, 1rem), 1rem);
text-transform: uppercase;
}
.nav-title a {
padding-top: 10px;
padding-bottom: 5px;
overflow: hidden;
z-index: 13;
background-position-y: -0%;
background-image: linear-gradient(180deg, transparent 50%, transparent 50%) !important;
transition: all 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
background-size: 0%;
background-size: auto 190%;
padding: 6px;
&:hover {
padding: 6px;
background-position-y: 100%;
color: var(--c0);
background-image: linear-gradient(180deg, transparent 50%, var(--c11) 50%) !important;
transition: all 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
}
._1 {
top: 1em;
left: 2em;
}
._2 {
top: 1em;
right: 2em;
}
._3 {
bottom: 1em;
left: 2em;
}
#logo-codepen {
--dim: 30px;
z-index: 12;
bottom: 1.3em;
right: 1.3em;
position: fixed;
height: var(--dim);
width: var(--dim);
text-shadow: 0px 0px 30px #ffdd40;
& svg path {
transition: all 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
fill: none;
stroke:var(--c11);
}
&:hover svg path {
fill: none;
}
}
.font-goth {
font-family: "Aktura", serif;
}
.cursor {
position: absolute;
transition: 0.1s ease;
z-index: 30;
width: 30px;
height: 30px;
border: 3px solid var(--c11);
background:var(--c0);
/*
filter: var(--filter-01);
*/
border-radius: 50%;
opacity: 1;
top: -100px;
left: -100px;
transform: scale(.35);
transition:all 1s cubic-bezier(0.075, 0.820, 0.165, 1.000);
mix-blend-mode:difference;
pointer-events:none;
}
.cursor-fade {
transition:all 1s cubic-bezier(0.075, 0.820, 0.165, 1.000);
transform: scale(2);
border: 1rem solid var(--c0);
background:var(--c0);
animation: rotate 4s infinite linear;
mix-blend-mode:difference;
}
@keyframes rotate {
0% {
transform: scale(3) rotate(0deg);
}
100% {
transform: scale(3) rotate(350deg);
}
}
.timer {
position: fixed;
z-index: 72;
top: 0em;
right: 3em;
letter-spacing: 0em;
font-family: "Inter", sans-serif;
font-weight: 500;
font-size: min(max(0.55rem, .75rem), .75rem);
color:var(--c11);
text-transform: uppercase;
text-align:left;
z-index:72;
opacity:1;
}
.btn-fullscreen svg path{
fill:var(--c11);
fill-opacity: 1;
}
.btn-fullscreen{
top: .4em;
right: .4em;
width:20px;
height:20px;
position: fixed;
z-index: 3200;
transform:scale(.7);
cursor:pointer;
}
#toggle-theme {
z-index: 12;
position: fixed;
top: .4em;
left: .4em;
width:24px;
height:24px;
transform:scale(.6);
cursor:pointer;
& path{
stroke:var(--c11);
}
}
.activity {
pointer-events: none;
position:fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
// visibility:hidden;
background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVQYV2NkQAX/GZH4/xkYGBhhAmAOSBJEwDkgAQCCrgQEjpMcPgAAAABJRU5ErkJggg==
) repeat;
/*
http://www.patternify.com/
*/
z-index:999;
opacity:1;
mix-blend-mode:multiply;
}
.vignette {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 600px rgba(0,0,0,0.6) inset;
z-index:88;
pointer-events:none;
mix-blend-mode:multiply;
display:none;
}
.video-vimeo {
border-radius: 2rem;
width:300px;
padding:2rem;
}
#svg-globe{
display:none;
position:absolute;
transform:scale(3);
& .svg-globe-path{
fill:var(--c11);
fill-opacity:.05;
transition: fill 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
}
/***********************************
Cursor
************************************/
let curs = document.querySelector(".cursor");
document.addEventListener("mousemove", (e) => {
let x = e.pageX;
let y = e.pageY;
curs.style.left = x - 15 + "px";
curs.style.top = y - 15 + "px";
});
let menuEls = document.querySelectorAll(".nav-title a, #logo-codepen");
menuEls.forEach((el) => {
el.addEventListener("mouseenter", () => {
setTimeout(() => {
curs.classList.add("cursor-fade");
}, 300);
});
el.addEventListener("mouseleave", () => {
curs.classList.remove("cursor-fade");
});
});
/***********************************
Timer
************************************/
var h = document.getElementById('h'),
m = document.getElementById('m'),
s = document.getElementById('s'),
textProp = h.textContent !== undefined ? 'textContent' : 'innerText';
function tick() {
var date = new Date(),
hours = date.getHours(),
mins = date.getMinutes(),
secs = date.getSeconds();
h[textProp] = hours < 10 ? '0'+hours : hours;
m[textProp] = mins < 10 ? '0'+mins : mins;
s[textProp] = secs < 10 ? '0'+secs : secs;
}
tick();
setInterval(tick, 1000);
/***********************************
Annime.js filter SVG
************************************/
/*
var timeline = anime.timeline({
duration: 1200,
easing: 'linear',
autoplay: true,
loop:true,
direction:'alternate',
easing:'easeInOutQuad'
});
timeline.add({
targets: ['feTurbulence', 'feMorphology'],
// baseFrequency: ['0.014 0.014', '0.023 0.023'],
radius: [14, 8, 20, 8, 14]
// seed: [4, 8, 20, 8, 4]
});
*/
/***********************************
Year Roman Numerals
************************************/
function convertToRomanNumerals(num) {
const values = [
{ value: 1000, symbol: 'M' },
{ value: 900, symbol: 'CM' },
{ value: 500, symbol: 'D' },
{ value: 400, symbol: 'CD' },
{ value: 100, symbol: 'C' },
{ value: 90, symbol: 'XC' },
{ value: 50, symbol: 'L' },
{ value: 40, symbol: 'XL' },
{ value: 10, symbol: 'X' },
{ value: 9, symbol: 'IX' },
{ value: 5, symbol: 'V' },
{ value: 4, symbol: 'IV' },
{ value: 1, symbol: 'I' }
];
let result = '';
for (const { value, symbol } of values) {
while (num >= value) {
result += symbol;
num -= value;
}
}
return result;
}
function displayYearInRomanNumerals() {
const currentYear = new Date().getFullYear();
const yearInRoman = convertToRomanNumerals(currentYear);
document.getElementById("year").innerHTML = yearInRoman;
}
window.onload = displayYearInRomanNumerals;
//document.getElementById("year").innerHTML = new Date().getFullYear();
/***********************************
Switch CSS Colors
************************************/
const toggleThemeBtn = document.querySelector('#toggle-theme');
toggleThemeBtn.addEventListener('click', function() {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'grey' : currentTheme === 'grey' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
});
/***********************************
Switch Fullscreen
************************************/
function toggleFullscreen(elem) {
elem = elem || document.documentElement;
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
document.getElementById('fullscreen-mode').addEventListener('click', function() {
toggleFullscreen();
});
/***********************************
Activity
************************************/
var timeoutID;
function setup() {
this.addEventListener("mousemove", resetTimer, false);
this.addEventListener("mousedown", resetTimer, false);
this.addEventListener("keypress", resetTimer, false);
this.addEventListener("DOMMouseScroll", resetTimer, false);
this.addEventListener("mousewheel", resetTimer, false);
this.addEventListener("touchmove", resetTimer, false);
this.addEventListener("MSPointerMove", resetTimer, false);
startTimer();
}
setup();
function startTimer() {
timeoutID = window.setTimeout(goInactive, 12000);
}
function resetTimer(e) {
window.clearTimeout(timeoutID);
goActive();
}
function goInactive() {
gsap.to(".activity", {
duration: 5,
autoAlpha: 1,
ease: "power4.out(2)",
delay:0
});
}
function goActive() {
gsap.to(".activity", {
duration: 0,
autoAlpha: 0,
ease: "power4.out(2)",
delay:0
});
startTimer();
}
External CSS
This Pen doesn't use any external CSS resources.