diff --git a/_layouts/default.html b/_layouts/default.html
index 0b28c00..f97691e 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -2,13 +2,13 @@
-
+
{% if page.title %}{{ page.title }}{% else %}{{ site.name }}{% endif %}
{% seo %}
-
+
{% include security-camera-svgrepo-com.svg %}
{{ content }}
diff --git a/_posts/2018-01-20-welcome-to-jekyll.markdown b/_posts/2018-01-20-welcome-to-jekyll.markdown
deleted file mode 100644
index c3e5e17..0000000
--- a/_posts/2018-01-20-welcome-to-jekyll.markdown
+++ /dev/null
@@ -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/
diff --git a/_scss/module/_indexpage.scss b/_scss/module/_indexpage.scss
index 12fe145..0e2b7c0 100644
--- a/_scss/module/_indexpage.scss
+++ b/_scss/module/_indexpage.scss
@@ -1,5 +1,6 @@
#pinContainer {
height: 100% !important;
+ width: 100% !important;
overflow: hidden;
}
@@ -15,9 +16,11 @@ section {
//position: relative;
background: $body-bg;
margin-top: 30px;
- padding: 0 0 3rem;
+ padding-bottom: 30px;
&:first-child {
- top: 0;
+ //top: 0;
+ margin-top: 0;
+ padding-bottom: 0;
}
&:not(:first-child):before {
content: "";
@@ -38,7 +41,7 @@ section {
.paragraphs {
column-count: 2;
- margin-bottom: 200px;
+ padding: 0 0 3rem;
margin: 1rem;
h3, p {
max-width: 300px;
diff --git a/assets/js/main.js b/assets/js/main.js
index b14928c..e4773f0 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,74 +1,94 @@
- var controllerPanes = new ScrollMagic.Controller({
- globalSceneOptions: {
- //triggerHook: 'onLeave'
- }
- });
- var controllerAnimations = new ScrollMagic.Controller({
- globalSceneOptions: {
- //triggerHook: 'onLeave'
- }
- });
+//are we running in dev mode?
+var debug = document.body.getAttribute("data-env") === "development" ? true : false;
- // 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 sectionCount = sections.length;
var sectionDurations = [];
- var wipeAnimation = new TimelineLite()
for (var i = 0; i < sections.length; i++) {
- 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,
- // })
+ sectionDurations.push(sections[i].offsetHeight/300);
}
- var wipeAnimation = new TimelineLite()
- .fromTo(sections[0], sectionDurations[0], {
- y: "-0%",
- }, {
- y: "-100%",
- }).fromTo(sections[1], sectionDurations[1], {
- y: "-0%",
- }, {
- y: "-100%",
- }).fromTo(sections[2], sectionDurations[2], {
- y: "-0%",
- }, {
- y: "-100%",
- }).fromTo(sections[3], sectionDurations[3], {
- y: "-0%",
- }, {
- y: "-100%",
- }).fromTo(sections[4], sectionDurations[4], {
- y: "-0%",
- }, {
- y: "-100%",
- })
+ var tweens = [];
+ var timeline = new TimelineMax();
+ for (var i = 0; i < sections.length; i++) {
+ tweens.push(createTween(sections[i], sectionDurations[i], i));
+ timeline.add(tweens[i]);
+ }
+ return {
+ timeline: timeline,
+ tweens: tweens
+ };
+}
+
+wipeAnimation = createTweenTimeline();
- // 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++) {
- // new ScrollMagic.Scene({
- // triggerElement: sections[i]
- // })
- // .setClassToggle(sections[i], "appear")
- // .addIndicators({name: "1 - add a class"}) // add indicators (requires plugin)
- // .addTo(controllerAnimations);
- // }
\ No newline at end of file
+// create scene for every slide
+//for (var i = 0; i < sections.length - 1; i++) {
+ var triggerElement = document.getElementsByClassName("container")[0];
+ var panelScene = new ScrollMagic.Scene({
+ triggerElement: triggerElement,
+ duration: "400%",
+ 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);
+// }
\ No newline at end of file