fixed weird bug where text gets stuck if you scroll too fast
This commit is contained in:
parent
c76f7a8f46
commit
2f5f6ae61a
15
style.css
15
style.css
@ -14,6 +14,7 @@ body {
|
|||||||
background: black; }
|
background: black; }
|
||||||
|
|
||||||
#mast {
|
#mast {
|
||||||
|
margin-top: 10px;
|
||||||
background: none;
|
background: none;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
color: white; }
|
color: white; }
|
||||||
@ -27,8 +28,6 @@ body {
|
|||||||
color: #ccc; }
|
color: #ccc; }
|
||||||
#mast img {
|
#mast img {
|
||||||
transition-duration: .2s; }
|
transition-duration: .2s; }
|
||||||
#mast .hideable {
|
|
||||||
transition-duration: .2s; }
|
|
||||||
#mast h2 {
|
#mast h2 {
|
||||||
transition-property: size;
|
transition-property: size;
|
||||||
transition-duration: .2s; }
|
transition-duration: .2s; }
|
||||||
@ -47,12 +46,6 @@ body {
|
|||||||
.large .hideable {
|
.large .hideable {
|
||||||
opacity: 1; }
|
opacity: 1; }
|
||||||
|
|
||||||
.copy h1 {
|
|
||||||
text-decoration: underline;
|
|
||||||
font-style: italic; }
|
|
||||||
.copy h1 a {
|
|
||||||
color: black; }
|
|
||||||
|
|
||||||
.nojs body {
|
.nojs body {
|
||||||
background: white; }
|
background: white; }
|
||||||
.nojs #mast {
|
.nojs #mast {
|
||||||
@ -65,6 +58,12 @@ body {
|
|||||||
/*width wrapping*/
|
/*width wrapping*/
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin: auto; }
|
margin: auto; }
|
||||||
|
.slide p {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: auto; }
|
||||||
|
.slide .cover {
|
||||||
|
height: 500px;
|
||||||
|
background: url("Chuck.jpg"); }
|
||||||
|
|
||||||
.full {
|
.full {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"version": 3,
|
"version": 3,
|
||||||
"mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAIf,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAEpB,IAAI;EACA,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;;AAErB,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EA5BN,OAAO;EA8BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAjCN,IAAI;EAmCP,SAAG;IACC,mBAAmB,EAAE,GAAG;EAE5B,eAAS;IACL,mBAAmB,EAAE,GAAG;EAE5B,QAAE;IACE,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAK5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAG;EACC,SAAS,EAAE,KAAK;AAEpB,SAAE;EACE,SAAS,EAAE,GAAG;;AAItB,UAAI;EACI,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAS;EACL,OAAO,EAAE,CAAC;;AAMd,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;EAClB,UAAE;IACE,KAAK,EAAE,KAAK;;AAMpB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,UAAI;IACA,kBAAkB;IAClB,SAAS,EAjGT,KAAK;IAkGL,MAAM,EAAE,IAAI;;AAIpB,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAEtB,CAAC;EACG,mBAAmB,EAAE,GAAG",
|
"mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAIf,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAEpB,IAAI;EACA,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;;AAErB,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EA7BN,OAAO;EA+BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAlCN,IAAI;EAoCP,SAAG;IACC,mBAAmB,EAAE,GAAG;EAM5B,QAAE;IACE,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAK5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAG;EACC,SAAS,EAAE,KAAK;AAEpB,SAAE;EACE,SAAS,EAAE,GAAG;;AAItB,UAAI;EACI,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAS;EACL,OAAO,EAAE,CAAC;;AAMd,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,UAAI;IACA,kBAAkB;IAClB,SAAS,EAzFT,KAAK;IA0FL,MAAM,EAAE,IAAI;EAEhB,QAAC;IACG,SAAS,EA7FT,KAAK;IA8FL,MAAM,EAAE,IAAI;EAEhB,aAAM;IACF,MAAM,EAAE,KAAK;IACb,UAAU,EAAE,gBAAgB;;AAIpC,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAEtB,CAAC;EACG,mBAAmB,EAAE,GAAG",
|
||||||
"sources": ["style.scss"],
|
"sources": ["style.scss"],
|
||||||
"names": [],
|
"names": [],
|
||||||
"file": "style.css"
|
"file": "style.css"
|
||||||
|
|||||||
22
style.scss
22
style.scss
@ -21,6 +21,7 @@ body {
|
|||||||
background: black;
|
background: black;
|
||||||
}
|
}
|
||||||
#mast {
|
#mast {
|
||||||
|
margin-top: 10px;
|
||||||
background: none;
|
background: none;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
color: white;
|
color: white;
|
||||||
@ -39,7 +40,8 @@ body {
|
|||||||
transition-duration: .2s;
|
transition-duration: .2s;
|
||||||
}
|
}
|
||||||
.hideable{
|
.hideable{
|
||||||
transition-duration: .2s;
|
// transition-property: size;
|
||||||
|
// transition-duration: .2s;
|
||||||
}
|
}
|
||||||
h2{
|
h2{
|
||||||
transition-property: size;
|
transition-property: size;
|
||||||
@ -70,16 +72,6 @@ img {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy {
|
|
||||||
h1 {
|
|
||||||
text-decoration: underline;
|
|
||||||
font-style: italic;
|
|
||||||
a {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nojs {
|
.nojs {
|
||||||
body {
|
body {
|
||||||
background: white;
|
background: white;
|
||||||
@ -99,6 +91,14 @@ img {
|
|||||||
max-width: $width;
|
max-width: $width;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
p{
|
||||||
|
max-width: $width;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.cover{
|
||||||
|
height: 500px;
|
||||||
|
background: url("Chuck.jpg");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.full {
|
.full {
|
||||||
|
|||||||
336
toptest.html
336
toptest.html
@ -9,164 +9,179 @@
|
|||||||
#spaceTakerUpper {
|
#spaceTakerUpper {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="slide" id="top">
|
<div class="slide" id="top">
|
||||||
<div id="mast">
|
<div style="display:table;width:100%;height: 100%">
|
||||||
<h1 style="display:none;">Chuck Dries</h1>
|
<div style="display:table-cell;vertical-align:middle;">
|
||||||
<img src="cd.png" alt="Chuck Dries">
|
<div id="mast">
|
||||||
<h2 id="tagline"><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a> / <a href="#design">Design</a> / <a href="#photography">Photography</a> / <a href="#leadership">Leadership</a></h2>
|
<h1 style="display:none;">Chuck Dries</h1>
|
||||||
<div class="hideable">
|
<img src="cd.png" alt="Chuck Dries">
|
||||||
<p>Digital Developer, <span class="sub">The State Press</span></p>
|
<h2 id="tagline"><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a> / <a href="#design">Design</a> / <a href="#photography">Photography</a> / <a href="#leadership">Leadership</a></h2>
|
||||||
<p>Computer Science Student, <span class="sub">Arizona State University</span></p>
|
<div class="hideable">
|
||||||
<p><a href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / 602.618.0414</p>
|
<p>Digital Developer, <span class="sub">The State Press</span></p>
|
||||||
<p>
|
<p>Computer Science Student, <span class="sub">Arizona State University</span></p>
|
||||||
<a href="http://github.com/chuckdries">Github</a> /
|
<p><a href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / 602.618.0414</p>
|
||||||
<a href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a> /
|
<p>
|
||||||
<a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> /
|
<a href="http://github.com/chuckdries">Github</a> /
|
||||||
<a href="https://medium.com/@chuckdries">Blog</a>
|
<a href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a> /
|
||||||
</p>
|
<a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> /
|
||||||
|
<a href="https://medium.com/@chuckdries">Blog</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="spaceTakerUpper">
|
<div id="spaceTakerUpper">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer risus lorem, pretium non suscipit vel, dapibus non dolor.
|
<div class="slide">
|
||||||
Suspendisse potenti. Phasellus interdum tempus placerat. Vivamus nec interdum mauris. Integer eu neque lacus. Nulla
|
<h1>About Me</h1>
|
||||||
turpis turpis, fermentum in elementum nec, aliquam sed elit. Maecenas fringilla tristique leo quis mattis. In tempor
|
</div>
|
||||||
justo id vehicula porta. Ut metus tortor, laoreet quis iaculis ac, aliquet et metus. Suspendisse potenti. Nullam
|
<div class="slide">
|
||||||
at hendrerit neque. Vestibulum scelerisque turpis felis, et mollis risus suscipit eget. Donec condimentum ornare
|
<h1>Projects</h1>
|
||||||
dictum. Vivamus rhoncus felis nisl, suscipit imperdiet ante tempus sit amet. Nullam lobortis sem ultricies, tempus
|
<div>
|
||||||
felis a, hendrerit lacus. Suspendisse potenti. Suspendisse sollicitudin purus vitae felis molestie placerat. Vivamus
|
<div class="cover">
|
||||||
aliquam tincidunt velit, id cursus purus euismod vitae. Praesent a rhoncus quam, non scelerisque lorem. Aenean mollis
|
<h2>A project</h2>
|
||||||
dapibus odio, ut bibendum arcu mattis vitae. Maecenas id faucibus arcu. Aenean ullamcorper urna id cursus semper.
|
</div>
|
||||||
Sed aliquet, est ut interdum ultrices, arcu libero venenatis lacus, ut viverra ante massa id elit. Mauris molestie
|
</div>
|
||||||
enim sit amet neque viverra, luctus laoreet dolor efficitur. Mauris non mi auctor, tincidunt odio in, ultricies sapien.
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer risus lorem, pretium non suscipit vel, dapibus non
|
||||||
Sed mollis ligula vitae magna malesuada imperdiet. Aliquam quis felis urna. Morbi feugiat metus sed massa finibus
|
dolor. Suspendisse potenti. Phasellus interdum tempus placerat. Vivamus nec interdum mauris. Integer eu neque
|
||||||
dapibus at sed augue. Curabitur in eleifend neque. Sed malesuada rutrum tellus, sit amet tempus enim pretium sed.
|
lacus. Nulla turpis turpis, fermentum in elementum nec, aliquam sed elit. Maecenas fringilla tristique leo quis
|
||||||
Mauris nisi eros, facilisis a ornare sit amet, efficitur vitae mauris. Aliquam in nibh placerat, mollis augue sit
|
mattis. In tempor justo id vehicula porta. Ut metus tortor, laoreet quis iaculis ac, aliquet et metus. Suspendisse
|
||||||
amet, interdum felis. Morbi justo felis, semper ac lorem in, lobortis pharetra purus. Curabitur ut neque vitae magna
|
potenti. Nullam at hendrerit neque. Vestibulum scelerisque turpis felis, et mollis risus suscipit eget. Donec
|
||||||
interdum pulvinar ac vitae dui. Donec consequat est ex, et tincidunt tellus rhoncus nec. Donec a dictum nisi, mollis
|
condimentum ornare dictum. Vivamus rhoncus felis nisl, suscipit imperdiet ante tempus sit amet. Nullam lobortis
|
||||||
egestas lectus. Quisque vel fringilla justo, ultricies pharetra dui. Morbi egestas libero et turpis congue tincidunt.
|
sem ultricies, tempus felis a, hendrerit lacus. Suspendisse potenti. Suspendisse sollicitudin purus vitae felis
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et
|
molestie placerat. Vivamus aliquam tincidunt velit, id cursus purus euismod vitae. Praesent a rhoncus quam, non
|
||||||
ultrices posuere cubilia Curae; Aenean ullamcorper luctus dolor, nec consectetur erat placerat at. Phasellus a metus
|
scelerisque lorem. Aenean mollis dapibus odio, ut bibendum arcu mattis vitae. Maecenas id faucibus arcu. Aenean
|
||||||
sed lorem molestie euismod finibus id turpis. Integer iaculis dignissim eleifend. Ut enim risus, bibendum ac ultricies
|
ullamcorper urna id cursus semper. Sed aliquet, est ut interdum ultrices, arcu libero venenatis lacus, ut viverra
|
||||||
tempus, blandit ut justo. Morbi id nulla tincidunt, aliquet quam et, consectetur purus. Quisque lobortis leo lorem,
|
ante massa id elit. Mauris molestie enim sit amet neque viverra, luctus laoreet dolor efficitur. Mauris non mi
|
||||||
sit amet pellentesque leo eleifend non. Fusce consectetur sapien risus, id sagittis velit ornare vitae. Duis ultricies,
|
auctor, tincidunt odio in, ultricies sapien. Sed mollis ligula vitae magna malesuada imperdiet. Aliquam quis
|
||||||
sem sed facilisis lacinia, ex libero finibus ex, vel egestas ex lacus in dui. Quisque eros nulla, placerat a massa
|
felis urna. Morbi feugiat metus sed massa finibus dapibus at sed augue. Curabitur in eleifend neque. Sed malesuada
|
||||||
et, fringilla feugiat purus. Proin ipsum neque, varius in turpis id, facilisis convallis justo. Donec vulputate sapien
|
rutrum tellus, sit amet tempus enim pretium sed. Mauris nisi eros, facilisis a ornare sit amet, efficitur vitae
|
||||||
pharetra erat blandit semper. Vestibulum mollis, ante sit amet tristique ullamcorper, leo dolor iaculis ligula, eget
|
mauris. Aliquam in nibh placerat, mollis augue sit amet, interdum felis. Morbi justo felis, semper ac lorem in,
|
||||||
dapibus nulla lorem viverra felis. Nulla eleifend fermentum ipsum a posuere. Curabitur sed placerat elit, ac molestie
|
lobortis pharetra purus. Curabitur ut neque vitae magna interdum pulvinar ac vitae dui. Donec consequat est ex,
|
||||||
metus. Pellentesque id eros volutpat, volutpat leo nec, finibus justo. Fusce euismod, mi bibendum ornare tincidunt,
|
et tincidunt tellus rhoncus nec. Donec a dictum nisi, mollis egestas lectus. Quisque vel fringilla justo, ultricies
|
||||||
lorem nisi interdum turpis, vulputate pretium lectus augue eget sem. Nam et nibh purus. Cras volutpat sagittis accumsan.
|
pharetra dui. Morbi egestas libero et turpis congue tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||||
Vestibulum semper dui hendrerit, iaculis nunc at, imperdiet ligula. Cras fringilla nunc eros, non bibendum lorem
|
elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean ullamcorper
|
||||||
cursus non. Quisque scelerisque mauris accumsan risus ultrices maximus. Aenean tristique gravida suscipit. Mauris
|
luctus dolor, nec consectetur erat placerat at. Phasellus a metus sed lorem molestie euismod finibus id turpis.
|
||||||
sit amet varius tellus. Suspendisse interdum dolor sit amet lacinia consequat. Class aptent taciti sociosqu ad litora
|
Integer iaculis dignissim eleifend. Ut enim risus, bibendum ac ultricies tempus, blandit ut justo. Morbi id nulla
|
||||||
torquent per conubia nostra, per inceptos himenaeos. Integer nec mattis nisi. Orci varius natoque penatibus et magnis
|
tincidunt, aliquet quam et, consectetur purus. Quisque lobortis leo lorem, sit amet pellentesque leo eleifend
|
||||||
dis parturient montes, nascetur ridiculus mus. Sed quis enim at sapien scelerisque tristique non et libero.</p>
|
non. Fusce consectetur sapien risus, id sagittis velit ornare vitae. Duis ultricies, sem sed facilisis lacinia,
|
||||||
<br>
|
ex libero finibus ex, vel egestas ex lacus in dui. Quisque eros nulla, placerat a massa et, fringilla feugiat
|
||||||
<br>
|
purus. Proin ipsum neque, varius in turpis id, facilisis convallis justo. Donec vulputate sapien pharetra erat
|
||||||
<br>
|
blandit semper. Vestibulum mollis, ante sit amet tristique ullamcorper, leo dolor iaculis ligula, eget dapibus
|
||||||
<br>
|
nulla lorem viverra felis. Nulla eleifend fermentum ipsum a posuere. Curabitur sed placerat elit, ac molestie
|
||||||
<br>
|
metus. Pellentesque id eros volutpat, volutpat leo nec, finibus justo. Fusce euismod, mi bibendum ornare tincidunt,
|
||||||
<br>
|
lorem nisi interdum turpis, vulputate pretium lectus augue eget sem. Nam et nibh purus. Cras volutpat sagittis
|
||||||
<br>
|
accumsan. Vestibulum semper dui hendrerit, iaculis nunc at, imperdiet ligula. Cras fringilla nunc eros, non bibendum
|
||||||
<br>
|
lorem cursus non. Quisque scelerisque mauris accumsan risus ultrices maximus. Aenean tristique gravida suscipit.
|
||||||
<br>
|
Mauris sit amet varius tellus. Suspendisse interdum dolor sit amet lacinia consequat. Class aptent taciti sociosqu
|
||||||
<br>
|
ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec mattis nisi. Orci varius natoque penatibus
|
||||||
<br>
|
et magnis dis parturient montes, nascetur ridiculus mus. Sed quis enim at sapien scelerisque tristique non et
|
||||||
<br>
|
libero.</p>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
<script>
|
<script>
|
||||||
sc();
|
sc();
|
||||||
document.addEventListener("scroll", sc);
|
document.addEventListener("scroll", sc);
|
||||||
@ -176,19 +191,23 @@
|
|||||||
//top thing
|
//top thing
|
||||||
var topDiv = document.getElementById("top");
|
var topDiv = document.getElementById("top");
|
||||||
var mast = document.getElementById("mast");
|
var mast = document.getElementById("mast");
|
||||||
var topHeight = wheight - ypos;
|
var hcalc = wheight - ypos;
|
||||||
var mastHeight = mast.clientHeight;
|
var topHeight = 100;
|
||||||
var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2));
|
if (hcalc > 100) {
|
||||||
if(topHeight < 300){
|
topHeight = hcalc;
|
||||||
|
} else {
|
||||||
|
topHeight = 100;
|
||||||
|
}
|
||||||
|
// var mastHeight = mast.clientHeight;
|
||||||
|
// var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2));
|
||||||
|
if (topHeight < 300) {
|
||||||
mast.className = "small";
|
mast.className = "small";
|
||||||
console.log("boop!");
|
} else {
|
||||||
}else{
|
|
||||||
mast.className = "large";
|
mast.className = "large";
|
||||||
}
|
}
|
||||||
if (topHeight > 100) {
|
topDiv.style.height = topHeight + "px";
|
||||||
topDiv.style.height = topHeight + "px";
|
console.log("topheight is " + topHeight + " and topDiv.style.height = " + topDiv.style.height);
|
||||||
mast.style.marginTop = halfHeight + "px";
|
// mast.style.marginTop = halfHeight + "px";
|
||||||
}
|
|
||||||
|
|
||||||
//background thing
|
//background thing
|
||||||
var p = ((wheight - ypos) / wheight); //calulate ratio of scroll
|
var p = ((wheight - ypos) / wheight); //calulate ratio of scroll
|
||||||
@ -196,7 +215,6 @@
|
|||||||
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
|
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
|
||||||
var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
|
var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
|
||||||
document.body.style.backgroundColor = colorString;
|
document.body.style.backgroundColor = colorString;
|
||||||
console.log("wheight = " + wheight);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
function bgColor() {
|
function bgColor() {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user