graffen/ulovliglogning.dk
1
0
Fork 0
forked from ulovliglogning/ulovliglogning.dk
Code Issues Pull requests Releases Wiki Activity

sorta working #WIP

Browse source
This commit is contained in:
Jeppe Ernst 2018-01-22 16:30:08 +01:00
parent 39fa3d27e1
commit 56e45454d7
7 changed files with 167 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
_layouts/default.html
View file

@ -2,24 +2,26 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0""> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0">
<!-- <meta name="viewport" content="width=700"> -->
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.name }}{% endif %}</title> <title>{% if page.title %}{{ page.title }}{% else %}{{ site.name }}{% endif %}</title>
<link rel="stylesheet" href="{{ site.baseurl }}/assets/style/main.css?{{ site.time | date: '%s' }}"> <link rel="stylesheet" href="{{ site.baseurl }}/assets/style/main.css?{{ site.time | date: '%s' }}">
<link rel="alternate" type="application/rss+xml" title="RSS Feed for {{ site.name }}" href="{{ site.baseurl }}/feed.xml" /> <link rel="alternate" type="application/rss+xml" title="RSS Feed for {{ site.name }}" href="{{ site.baseurl }}/feed.xml" />
{% seo %} {% seo %}
</head> </head>
<body data-env="{{ jekyll.environment }}"> <body data-env="{{ jekyll.environment }}" class="no-js">
{% include security-camera-svgrepo-com.svg %} {% include security-camera-svgrepo-com.svg %}
<div {% if page.containerId %} id="{{ page.containerId }}" {% endif %} class="container"> <div {% if page.containerId %} id="{{ page.containerId }}" {% endif %} class="container">
{{ content }} {{ content }}
</div> </div>
<footer> <!-- <footer>
Last generated at {{ site.time | date_to_rfc822 }} Last generated at {{ site.time | date_to_rfc822 }}
</footer> </footer> -->
<script src="{{ site.baseurl }}/assets/js/vendor/ScrollMagic.min.js"></script> <script src="{{ site.baseurl }}/assets/js/vendor/ScrollMagic.min.js"></script>
<script src="{{ site.baseurl }}/assets/js/vendor/TweenMax.min.js"></script> <script src="{{ site.baseurl }}/assets/js/vendor/TweenMax.min.js"></script>
<script src="{{ site.baseurl }}/assets/js/vendor/animation.gsap.js"></script> <script src="{{ site.baseurl }}/assets/js/vendor/animation.gsap.js"></script>
<script src="{{ site.baseurl }}/assets/js/vendor/debug.addIndicators.min.js"></script> <script src="{{ site.baseurl }}/assets/js/vendor/debug.addIndicators.min.js"></script>
<script src="{{ site.baseurl }}/assets/js/vendor/mobile-detect.min.js"></script>
<script src="{{ site.baseurl }}/assets/js/main.js"></script> <script src="{{ site.baseurl }}/assets/js/main.js"></script>
</body> </body>
</html> </html>

8
_scss/base/_base.scss
View file

@ -1,12 +1,18 @@
body, html { body, html {
//min-height: 100%; //min-height: 100%;
height: 100%; height: 100%;
height: 100vh;
} }
body { body {
background: #2A2A2A; background: #2A2A2A;
color: #FFF; color: #FFF;
height: 100%; //height: 100%;
//overflow-y: scroll;
//-webkit-overflow-scrolling: touch;
&[data-env="development"] {
background: red;
}
} }
footer { footer {

2
_scss/base/_typography.scss
View file

@ -10,7 +10,7 @@ h1, h2, h3, h4, h5, h6 {
h1 { h1 {
font-size: 4rem; font-size: 4rem;
text-shadow: 4px 3px 0px rgb(90, 85, 81); text-shadow: 4px 3px 0px rgb(90, 85, 81);
margin: 3rem 0; margin: 4rem 0 1rem;
display: block; display: block;
width: 90vw; width: 90vw;
.even & { .even & {

6
_scss/module/_camera.scss
View file

@ -6,19 +6,21 @@
z-index: 1000; z-index: 1000;
pointer-events: none; pointer-events: none;
.redLight { .redLight {
animation: redLigth 1s ease infinite; animation: redLight 1s ease infinite;
} }
.glare { .glare {
transform-origin: 80% 80%; transform-origin: 80% 80%;
transform-box: fill-box;
animation: glare 4s linear infinite; animation: glare 4s linear infinite;
} }
.outerRing { .outerRing {
transform-origin: 50% 50%; transform-origin: 50% 50%;
transform-box: fill-box;
animation: outerRing 4s linear infinite; animation: outerRing 4s linear infinite;
} }
} }
@keyframes redLigth { @keyframes redLight {
0% { 0% {
fill-opacity: 1; fill-opacity: 1;
} }

171
_scss/module/_indexpage.scss
View file

@ -1,80 +1,105 @@
#pinContainer { body[data-scrollmagicPanes="enabled"] {
height: 100% !important; #pinContainer {
width: 100% !important; height: 100% !important;
overflow: hidden; width: 100% !important;
overflow: hidden;
}
section {
position: absolute;
top: 100%;
margin-top: 30px;
&:first-child {
margin-top: 0;
}
}
} }
body.js {
h1 {
transition: all .5s linear;
}
#butwhy {
h1 {
opacity: 0;
transform: translateX(-100vw);
}
&.appear h1 {
opacity: 1;
transform: translateX(0);
}
}
}
section { section {
min-height: 100vh; min-height: 100vh;
width: 100%; width: 100%;
position: absolute; position: relative;
top: 100%; //position: -webkit-sticky;
display: flex; //position: sticky;
flex-direction: column; //overflow-y: auto;
align-items: center; //top: 0px;
justify-content: center; display: flex;
//position: relative; flex-direction: column;
background: $body-bg; align-items: center;
margin-top: 30px; justify-content: center;
padding-bottom: 30px; background: $body-bg;
&:first-child { padding-bottom: 30px;
//top: 0; &:first-child {
margin-top: 0; padding-bottom: 0;
padding-bottom: 0; }
&:not(:first-child):before {
content: "";
width: 100%;
height: 30px;
position: absolute;
top: -30px;
right: 0;
background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$body-bg 50%,$body-bg 100%);
}
&.even {
background: $alternate-bg;
&:before {
background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$alternate-bg 50%,$alternate-bg 100%);
} }
&:not(:first-child):before { }
content: "";
width: 100%;
height: 30px;
position: absolute;
top: -30px;
background: linear-gradient(to left bottom, $alternate-bg 0%,$alternate-bg 49%,$body-bg 50%,$body-bg 100%);
background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$body-bg 50%,$body-bg 100%);
}
&.even {
background: $alternate-bg;
&:before {
background: linear-gradient(to left bottom, $body-bg 0%,$body-bg 49%,$alternate-bg 50%,$alternate-bg 100%);
background: linear-gradient(to left bottom, transparent 0%,transparent 49%,$alternate-bg 50%,$alternate-bg 100%);
}
}
.paragraphs { .paragraphs {
column-count: 2; column-count: 2;
padding: 0 0 3rem; padding: 0 0 3rem;
margin: 1rem; margin: 1rem;
h3, p { h3, p {
max-width: 300px; max-width: 300px;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
p + h3 { p + h3 {
margin-top: 50px; margin-top: 50px;
} }
@media screen and (max-width: $screen-phone) { @media screen and (max-width: $screen-phone) {
& { & {
column-count: unset; column-count: unset;
} }
} }
} }
&#faq { &#faq {
.paragraphs { .paragraphs {
column-count: unset; column-count: unset;
} }
ul { ul {
list-style-type: none; list-style-type: none;
li { li {
display: block; display: block;
margin: 0 300px 0 0; margin: 0 300px 0 0;
&:nth-child(even) { &:nth-child(even) {
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
@media screen and (max-width: $screen-phone) { @media screen and (max-width: $screen-phone) {
& { & {
margin: 0 !important; margin: 0 !important;
} }
} }
} }
} }
} }
} }

68
assets/js/main.js
View file

@ -1,17 +1,21 @@
document.body.className = "js";
//are we running in dev mode? //are we running in dev mode?
var debug = document.body.getAttribute("data-env") === "development" ? true : false; var debug = document.body.getAttribute("data-env") === "development" ? true : false;
document.body.style.height = document.body.offsetHeight + "px";
var controllerPanes = new ScrollMagic.Controller({ var controllerPanes = new ScrollMagic.Controller({
globalSceneOptions: { globalSceneOptions: {
//triggerHook: 'onLeave' //triggerHook: 'onLeave'
} }
}); });
var controllerAnimations = new ScrollMagic.Controller({ // var controllerAnimations = new ScrollMagic.Controller({
globalSceneOptions: { // globalSceneOptions: {
//triggerHook: 'onLeave' // //triggerHook: 'onLeave'
} // }
}); // });
var md = new MobileDetect(window.navigator.userAgent);
var isDesktop = md.mobile() === null ? true : false;
function calculateOffset(){ function calculateOffset(){
var containerHeight = document.getElementById("pinContainer").offsetHeight; var containerHeight = document.getElementById("pinContainer").offsetHeight;
@ -32,8 +36,10 @@ function createTween(section, duration ,index){
} }
var tween = TweenMax.fromTo(section, duration, { var tween = TweenMax.fromTo(section, duration, {
y: startY, y: startY,
force3D: true,
}, { }, {
y: "-100%", y: "-100%",
force3D: true
}) })
return tween; return tween;
} }
@ -59,12 +65,19 @@ function createTweenTimeline(){
}; };
} }
wipeAnimation = createTweenTimeline(); function toggleDataAttr(attribute, toggle){
if (toggle) {
document.body.setAttribute("data-" + attribute, "enabled");
} else {
document.body.setAttribute("data-" + attribute, "disabled");
}
}
//only use the pane animations on desktop
if (isDesktop) {
toggleDataAttr("scrollmagicPanes", true);
wipeAnimation = createTweenTimeline();
// create scene for every slide
//for (var i = 0; i < sections.length - 1; i++) {
var triggerElement = document.getElementsByClassName("container")[0]; var triggerElement = document.getElementsByClassName("container")[0];
var panelScene = new ScrollMagic.Scene({ var panelScene = new ScrollMagic.Scene({
triggerElement: triggerElement, triggerElement: triggerElement,
@ -77,18 +90,31 @@ wipeAnimation = createTweenTimeline();
if (debug) { if (debug) {
panelScene.addIndicators() panelScene.addIndicators()
} }
wipeAnimation.tweens[0].updateTo({startAt: {y: calculateOffset()}}, false);
window.addEventListener('resize', function(){ window.addEventListener('resize', function(){
wipeAnimation.tweens[0].updateTo({startAt: {y: calculateOffset()}}, false) //document.body.style.height = document.body.offsetHeight + "px";
console.log("pinContainer " + document.getElementById("pinContainer").offsetHeight)
console.log("body " + document.body.offsetHeight)
console.log("resize fired!")
// if (document.body.offsetHeight - document.getElementById("pinContainer").offsetHeight > 100) {
// console.log("adjusting offset!");
// wipeAnimation.tweens[0].updateTo({startAt: {y: calculateOffset()}}, false)
// }
}) })
//} } else {
toggleDataAttr("scrollmagicPanes", false);
}
// for (var i = 0; i < sections.length; i++) { var controllerAnimations = new ScrollMagic.Controller({});
// new ScrollMagic.Scene({ var sections = document.querySelectorAll("section");
// triggerElement: sections[i] for (var i = 0; i < sections.length; i++) {
// }) sectionScene = new ScrollMagic.Scene({
// .setClassToggle(sections[i], "appear") triggerElement: sections[i]
// .addIndicators({name: "1 - add a class"}) // add indicators (requires plugin) })
// .addTo(controllerAnimations); .setClassToggle(sections[i], "appear")
// } .addTo(controllerAnimations);
if (debug) {
sectionScene.addIndicators({name: "1 - add a class"}) // add indicators (requires plugin)
}
}

3
assets/js/vendor/mobile-detect.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long