ugly resizing fix
¯\_(ツ)_/¯
This commit is contained in:
Jeppe Ernst
parent
d338956ec1
commit
39fa3d27e1
|
|
@ -2,13 +2,13 @@
|
||||||
<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">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0"">
|
||||||
<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>
|
<body data-env="{{ jekyll.environment }}">
|
||||||
{% 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 }}
|
||||||
|
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
---
|
|
||||||
layout: post
|
|
||||||
title: "Welcome to Jekyll!"
|
|
||||||
date: 2018-01-20 13:10:49 +0100
|
|
||||||
categories: jekyll update
|
|
||||||
---
|
|
||||||
You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
|
|
||||||
|
|
||||||
To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
|
|
||||||
|
|
||||||
Jekyll also offers powerful support for code snippets:
|
|
||||||
|
|
||||||
{% highlight ruby %}
|
|
||||||
def print_hi(name)
|
|
||||||
puts "Hi, #{name}"
|
|
||||||
end
|
|
||||||
print_hi('Tom')
|
|
||||||
#=> prints 'Hi, Tom' to STDOUT.
|
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
|
|
||||||
|
|
||||||
[jekyll-docs]: https://jekyllrb.com/docs/home
|
|
||||||
[jekyll-gh]: https://github.com/jekyll/jekyll
|
|
||||||
[jekyll-talk]: https://talk.jekyllrb.com/
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
#pinContainer {
|
#pinContainer {
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
|
width: 100% !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -15,9 +16,11 @@ section {
|
||||||
//position: relative;
|
//position: relative;
|
||||||
background: $body-bg;
|
background: $body-bg;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
padding: 0 0 3rem;
|
padding-bottom: 30px;
|
||||||
&:first-child {
|
&:first-child {
|
||||||
top: 0;
|
//top: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
&:not(:first-child):before {
|
&:not(:first-child):before {
|
||||||
content: "";
|
content: "";
|
||||||
|
|
@ -38,7 +41,7 @@ section {
|
||||||
|
|
||||||
.paragraphs {
|
.paragraphs {
|
||||||
column-count: 2;
|
column-count: 2;
|
||||||
margin-bottom: 200px;
|
padding: 0 0 3rem;
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
h3, p {
|
h3, p {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
|
|
|
||||||
|
|
@ -1,74 +1,94 @@
|
||||||
var controllerPanes = new ScrollMagic.Controller({
|
//are we running in dev mode?
|
||||||
globalSceneOptions: {
|
var debug = document.body.getAttribute("data-env") === "development" ? true : false;
|
||||||
//triggerHook: 'onLeave'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var controllerAnimations = new ScrollMagic.Controller({
|
|
||||||
globalSceneOptions: {
|
|
||||||
//triggerHook: 'onLeave'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// get all sections
|
var controllerPanes = new ScrollMagic.Controller({
|
||||||
|
globalSceneOptions: {
|
||||||
|
//triggerHook: 'onLeave'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var controllerAnimations = new ScrollMagic.Controller({
|
||||||
|
globalSceneOptions: {
|
||||||
|
//triggerHook: 'onLeave'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function calculateOffset(){
|
||||||
|
var containerHeight = document.getElementById("pinContainer").offsetHeight;
|
||||||
|
var introHeight = document.getElementById("intro").offsetHeight;
|
||||||
|
var initialOffset = (containerHeight / introHeight * 100);
|
||||||
|
if (initialOffset > 100) {
|
||||||
|
return "-100%";
|
||||||
|
} else {
|
||||||
|
return "-" + Math.floor(initialOffset) + "%";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTween(section, duration ,index){
|
||||||
|
if (index === 0) {
|
||||||
|
var startY = calculateOffset();
|
||||||
|
} else {
|
||||||
|
var startY = "-0%";
|
||||||
|
}
|
||||||
|
var tween = TweenMax.fromTo(section, duration, {
|
||||||
|
y: startY,
|
||||||
|
}, {
|
||||||
|
y: "-100%",
|
||||||
|
})
|
||||||
|
return tween;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTweenTimeline(){
|
||||||
var sections = document.querySelectorAll("section");
|
var sections = document.querySelectorAll("section");
|
||||||
var sectionCount = sections.length;
|
var sectionCount = sections.length;
|
||||||
var sectionDurations = [];
|
var sectionDurations = [];
|
||||||
|
|
||||||
var wipeAnimation = new TimelineLite()
|
|
||||||
for (var i = 0; i < sections.length; i++) {
|
for (var i = 0; i < sections.length; i++) {
|
||||||
sectionDurations.push(sections[i].offsetHeight/300);
|
sectionDurations.push(sections[i].offsetHeight/300);
|
||||||
// fromY = i == 0 ? "-100%" : "0";
|
|
||||||
// toY = /*i == sections.length - 1 ? "0" :*/ "-100%";
|
|
||||||
// wipeAnimation = wipeAnimation.fromTo(sections[i], sectionDurations[i], {
|
|
||||||
// y: fromY,
|
|
||||||
// }, {
|
|
||||||
// y: toY,
|
|
||||||
// })
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var wipeAnimation = new TimelineLite()
|
var tweens = [];
|
||||||
.fromTo(sections[0], sectionDurations[0], {
|
var timeline = new TimelineMax();
|
||||||
y: "-0%",
|
for (var i = 0; i < sections.length; i++) {
|
||||||
}, {
|
tweens.push(createTween(sections[i], sectionDurations[i], i));
|
||||||
y: "-100%",
|
timeline.add(tweens[i]);
|
||||||
}).fromTo(sections[1], sectionDurations[1], {
|
}
|
||||||
y: "-0%",
|
return {
|
||||||
}, {
|
timeline: timeline,
|
||||||
y: "-100%",
|
tweens: tweens
|
||||||
}).fromTo(sections[2], sectionDurations[2], {
|
};
|
||||||
y: "-0%",
|
}
|
||||||
}, {
|
|
||||||
y: "-100%",
|
wipeAnimation = createTweenTimeline();
|
||||||
}).fromTo(sections[3], sectionDurations[3], {
|
|
||||||
y: "-0%",
|
|
||||||
}, {
|
|
||||||
y: "-100%",
|
|
||||||
}).fromTo(sections[4], sectionDurations[4], {
|
|
||||||
y: "-0%",
|
|
||||||
}, {
|
|
||||||
y: "-100%",
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// create scene for every slide
|
|
||||||
//for (var i = 0; i < sections.length - 1; i++) {
|
|
||||||
var triggerElement = document.getElementsByClassName("container")[0];
|
|
||||||
new ScrollMagic.Scene({
|
|
||||||
triggerElement: triggerElement,
|
|
||||||
duration: "400%",
|
|
||||||
triggerHook: "onLeave"
|
|
||||||
})
|
|
||||||
.setPin(triggerElement)
|
|
||||||
.setTween(wipeAnimation)
|
|
||||||
.addIndicators() // add indicators (requires plugin)
|
|
||||||
.addTo(controllerPanes);
|
|
||||||
//}
|
|
||||||
|
|
||||||
// for (var i = 0; i < sections.length; i++) {
|
// create scene for every slide
|
||||||
// new ScrollMagic.Scene({
|
//for (var i = 0; i < sections.length - 1; i++) {
|
||||||
// triggerElement: sections[i]
|
var triggerElement = document.getElementsByClassName("container")[0];
|
||||||
// })
|
var panelScene = new ScrollMagic.Scene({
|
||||||
// .setClassToggle(sections[i], "appear")
|
triggerElement: triggerElement,
|
||||||
// .addIndicators({name: "1 - add a class"}) // add indicators (requires plugin)
|
duration: "400%",
|
||||||
// .addTo(controllerAnimations);
|
triggerHook: "onLeave"
|
||||||
// }
|
})
|
||||||
|
.setPin(triggerElement)
|
||||||
|
.setTween(wipeAnimation.timeline)
|
||||||
|
.addTo(controllerPanes);
|
||||||
|
if (debug) {
|
||||||
|
panelScene.addIndicators()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.addEventListener('resize', function(){
|
||||||
|
wipeAnimation.tweens[0].updateTo({startAt: {y: calculateOffset()}}, false)
|
||||||
|
})
|
||||||
|
//}
|
||||||
|
|
||||||
|
// for (var i = 0; i < sections.length; i++) {
|
||||||
|
// new ScrollMagic.Scene({
|
||||||
|
// triggerElement: sections[i]
|
||||||
|
// })
|
||||||
|
// .setClassToggle(sections[i], "appear")
|
||||||
|
// .addIndicators({name: "1 - add a class"}) // add indicators (requires plugin)
|
||||||
|
// .addTo(controllerAnimations);
|
||||||
|
// }
|
||||||
Loading…
Reference in a new issue