From 39fa3d27e1e04cd86f6bfc6ee043f252f910b983 Mon Sep 17 00:00:00 2001 From: Jeppe Ernst Date: Sun, 21 Jan 2018 13:56:54 +0100 Subject: [PATCH] ugly resizing fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ¯\_(ツ)_/¯ --- _layouts/default.html | 4 +- _posts/2018-01-20-welcome-to-jekyll.markdown | 25 ---- _scss/module/_indexpage.scss | 9 +- assets/js/main.js | 146 +++++++++++-------- 4 files changed, 91 insertions(+), 93 deletions(-) delete mode 100644 _posts/2018-01-20-welcome-to-jekyll.markdown 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