forked from ulovliglogning/ulovliglogning.dk
Compare commits
3 commits
master
...
scrollmagi
| Author | SHA1 | Date | |
|---|---|---|---|
|
56e45454d7 | ||
|
|
39fa3d27e1 | ||
|
|
d338956ec1 |
1
Gemfile
1
Gemfile
|
|
@ -18,7 +18,6 @@ gem "github-pages", group: :jekyll_plugins
|
||||||
# If you have any plugins, put them here!
|
# If you have any plugins, put them here!
|
||||||
group :jekyll_plugins do
|
group :jekyll_plugins do
|
||||||
gem "jekyll-feed", "~> 0.6"
|
gem "jekyll-feed", "~> 0.6"
|
||||||
gem "jekyll-livereload"
|
|
||||||
end
|
end
|
||||||
|
|
||||||
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
|
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
|
||||||
|
|
|
||||||
27
README.md
27
README.md
|
|
@ -1,27 +0,0 @@
|
||||||
# Jekyll site for ulovliglogning.dk
|
|
||||||
|
|
||||||
## To work on the code, either
|
|
||||||
|
|
||||||
### Use docker
|
|
||||||
You need docker-compose. Simply run
|
|
||||||
`docker-compose up` to launch the site in a docker container with livereload support.
|
|
||||||
|
|
||||||
### Or install Jekyll locally
|
|
||||||
|
|
||||||
#### Install Jekyll and Bundler gems through RubyGems
|
|
||||||
`gem install jekyll bundler`
|
|
||||||
|
|
||||||
#### Install dependencies
|
|
||||||
`bundle install`
|
|
||||||
|
|
||||||
#### Build the site local
|
|
||||||
`bundle exec jekyll serve`
|
|
||||||
|
|
||||||
You can now see the site at [localhost:4000](http://localhost:4000)
|
|
||||||
|
|
||||||
## Deploy
|
|
||||||
|
|
||||||
It's **important** that you build the site with `JEKYLL_ENV=production bundle exec jekyll build` before deploying the contents of the `_site` directory. We're doing some debugging stuff when then project is build in the development env.
|
|
||||||
|
|
||||||
## Structure
|
|
||||||
The contents of the index page is defined in the frontmatter of the file `index.md`
|
|
||||||
|
|
@ -2,19 +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">
|
<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>
|
<body data-env="{{ jekyll.environment }}" class="no-js">
|
||||||
{% include security-camera-svgrepo-com.svg %}
|
{% include security-camera-svgrepo-com.svg %}
|
||||||
<div 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/TweenMax.min.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/mobile-detect.min.js"></script>
|
||||||
|
<script src="{{ site.baseurl }}/assets/js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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 & {
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,6 @@
|
||||||
$body-bg: #2A2A2A;
|
$body-bg: #2A2A2A;
|
||||||
$alternate-bg: #ff5800;
|
$alternate-bg: #ff5800;
|
||||||
|
|
||||||
$color-mine-shaft: #2A2A2A;
|
|
||||||
$color-international-orange: #ff5800;
|
|
||||||
|
|
||||||
$background-primary: $color-mine-shaft;
|
|
||||||
$background-alternative: $color-international-orange;
|
|
||||||
|
|
||||||
/* Size */
|
/* Size */
|
||||||
$screen-xs: 600px !default;
|
$screen-xs: 600px !default;
|
||||||
$screen-xs-min: $screen-xs !default;
|
$screen-xs-min: $screen-xs !default;
|
||||||
|
|
|
||||||
|
|
@ -1,70 +1,105 @@
|
||||||
section {
|
body[data-scrollmagicPanes="enabled"] {
|
||||||
min-height: 100vh;
|
#pinContainer {
|
||||||
position: relative;
|
height: 100% !important;
|
||||||
display: flex;
|
width: 100% !important;
|
||||||
flex-direction: column;
|
overflow: hidden;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: center;
|
section {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
margin-top: 30px;
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
background-color: $background-primary;
|
body.js {
|
||||||
background-image: linear-gradient(
|
h1 {
|
||||||
to left bottom,
|
transition: all .5s linear;
|
||||||
$background-primary 49%,
|
}
|
||||||
$background-alternative 50%
|
#butwhy {
|
||||||
);
|
h1 {
|
||||||
background-size: 100% 30px;
|
opacity: 0;
|
||||||
background-repeat: no-repeat;
|
transform: translateX(-100vw);
|
||||||
background-position: bottom;
|
}
|
||||||
|
&.appear h1 {
|
||||||
&:nth-of-type(even) {
|
opacity: 1;
|
||||||
background-color: $background-alternative;
|
transform: translateX(0);
|
||||||
background-image: linear-gradient(
|
}
|
||||||
to left bottom,
|
|
||||||
$background-alternative 49%,
|
|
||||||
$background-primary 50%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
&:last-of-type {
|
|
||||||
background-image: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
|
||||||
.paragraphs {
|
|
||||||
column-count: 2;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
h3, p {
|
|
||||||
max-width: 300px;
|
|
||||||
font-family: 'Roboto', sans-serif;
|
|
||||||
}
|
|
||||||
p + h3 {
|
|
||||||
margin-top: 50px;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: $screen-phone) {
|
|
||||||
& {
|
|
||||||
column-count: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&#faq {
|
section {
|
||||||
.paragraphs {
|
min-height: 100vh;
|
||||||
column-count: unset;
|
width: 100%;
|
||||||
}
|
position: relative;
|
||||||
ul {
|
//position: -webkit-sticky;
|
||||||
list-style-type: none;
|
//position: sticky;
|
||||||
li {
|
//overflow-y: auto;
|
||||||
display: block;
|
//top: 0px;
|
||||||
margin: 0 300px 0 0;
|
display: flex;
|
||||||
&:nth-child(even) {
|
flex-direction: column;
|
||||||
margin: 0 0 0 300px;
|
align-items: center;
|
||||||
}
|
justify-content: center;
|
||||||
@media screen and (max-width: $screen-phone) {
|
background: $body-bg;
|
||||||
& {
|
padding-bottom: 30px;
|
||||||
margin: 0 !important;
|
&:first-child {
|
||||||
}
|
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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraphs {
|
||||||
|
column-count: 2;
|
||||||
|
padding: 0 0 3rem;
|
||||||
|
margin: 1rem;
|
||||||
|
h3, p {
|
||||||
|
max-width: 300px;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
p + h3 {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $screen-phone) {
|
||||||
|
& {
|
||||||
|
column-count: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&#faq {
|
||||||
|
.paragraphs {
|
||||||
|
column-count: unset;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
li {
|
||||||
|
display: block;
|
||||||
|
margin: 0 300px 0 0;
|
||||||
|
&:nth-child(even) {
|
||||||
|
margin: 0 0 0 300px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $screen-phone) {
|
||||||
|
& {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
document.body.className = "js";
|
||||||
|
//are we running in dev mode?
|
||||||
|
var debug = document.body.getAttribute("data-env") === "development" ? true : false;
|
||||||
|
|
||||||
|
document.body.style.height = document.body.offsetHeight + "px";
|
||||||
|
|
||||||
|
var controllerPanes = new ScrollMagic.Controller({
|
||||||
|
globalSceneOptions: {
|
||||||
|
//triggerHook: 'onLeave'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// var controllerAnimations = new ScrollMagic.Controller({
|
||||||
|
// globalSceneOptions: {
|
||||||
|
// //triggerHook: 'onLeave'
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
var md = new MobileDetect(window.navigator.userAgent);
|
||||||
|
var isDesktop = md.mobile() === null ? true : false;
|
||||||
|
|
||||||
|
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,
|
||||||
|
force3D: true,
|
||||||
|
}, {
|
||||||
|
y: "-100%",
|
||||||
|
force3D: true
|
||||||
|
})
|
||||||
|
return tween;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTweenTimeline(){
|
||||||
|
var sections = document.querySelectorAll("section");
|
||||||
|
var sectionCount = sections.length;
|
||||||
|
var sectionDurations = [];
|
||||||
|
|
||||||
|
for (var i = 0; i < sections.length; i++) {
|
||||||
|
sectionDurations.push(sections[i].offsetHeight/300);
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
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();
|
||||||
|
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
wipeAnimation.tweens[0].updateTo({startAt: {y: calculateOffset()}}, false);
|
||||||
|
|
||||||
|
window.addEventListener('resize', function(){
|
||||||
|
//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);
|
||||||
|
}
|
||||||
|
|
||||||
|
var controllerAnimations = new ScrollMagic.Controller({});
|
||||||
|
var sections = document.querySelectorAll("section");
|
||||||
|
for (var i = 0; i < sections.length; i++) {
|
||||||
|
sectionScene = new ScrollMagic.Scene({
|
||||||
|
triggerElement: sections[i]
|
||||||
|
})
|
||||||
|
.setClassToggle(sections[i], "appear")
|
||||||
|
.addTo(controllerAnimations);
|
||||||
|
if (debug) {
|
||||||
|
sectionScene.addIndicators({name: "1 - add a class"}) // add indicators (requires plugin)
|
||||||
|
}
|
||||||
|
}
|
||||||
2
assets/js/vendor/ScrollMagic.min.js
vendored
Executable file
2
assets/js/vendor/ScrollMagic.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
12
assets/js/vendor/TimelineLite.min.js
vendored
Normal file
12
assets/js/vendor/TimelineLite.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
17
assets/js/vendor/TweenMax.min.js
vendored
Normal file
17
assets/js/vendor/TweenMax.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
306
assets/js/vendor/animation.gsap.js
vendored
Normal file
306
assets/js/vendor/animation.gsap.js
vendored
Normal file
|
|
@ -0,0 +1,306 @@
|
||||||
|
/*!
|
||||||
|
* @file ScrollMagic GSAP Animation Plugin.
|
||||||
|
*
|
||||||
|
* requires: GSAP ~1.14
|
||||||
|
* Powered by the Greensock Animation Platform (GSAP): http://www.greensock.com/js
|
||||||
|
* Greensock License info at http://www.greensock.com/licensing/
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* This plugin is meant to be used in conjunction with the Greensock Animation Plattform.
|
||||||
|
* It offers an easy API to trigger Tweens or synchronize them to the scrollbar movement.
|
||||||
|
*
|
||||||
|
* Both the `lite` and the `max` versions of the GSAP library are supported.
|
||||||
|
* The most basic requirement is `TweenLite`.
|
||||||
|
*
|
||||||
|
* To have access to this extension, please include `plugins/animation.gsap.js`.
|
||||||
|
* @requires {@link http://greensock.com/gsap|GSAP ~1.14.x}
|
||||||
|
* @mixin animation.GSAP
|
||||||
|
*/
|
||||||
|
(function (root, factory) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// AMD. Register as an anonymous module.
|
||||||
|
define(['ScrollMagic', 'TweenMax', 'TimelineMax'], factory);
|
||||||
|
} else if (typeof exports === 'object') {
|
||||||
|
// CommonJS
|
||||||
|
// Loads whole gsap package onto global scope.
|
||||||
|
require('gsap');
|
||||||
|
factory(require('scrollmagic'), TweenMax, TimelineMax);
|
||||||
|
} else {
|
||||||
|
// Browser globals
|
||||||
|
factory(root.ScrollMagic || (root.jQuery && root.jQuery.ScrollMagic), root.TweenMax || root.TweenLite, root.TimelineMax || root.TimelineLite);
|
||||||
|
}
|
||||||
|
}(this, function(ScrollMagic, Tween, Timeline) {
|
||||||
|
"use strict";
|
||||||
|
var NAMESPACE = "animation.gsap";
|
||||||
|
|
||||||
|
// (BUILD) - REMOVE IN MINIFY - START
|
||||||
|
var
|
||||||
|
console = window.console || {},
|
||||||
|
err = Function.prototype.bind.call(console.error || console.log || function() {}, console);
|
||||||
|
if (!ScrollMagic) {
|
||||||
|
err("(" + NAMESPACE + ") -> ERROR: The ScrollMagic main module could not be found. Please make sure it's loaded before this plugin or use an asynchronous loader like requirejs.");
|
||||||
|
}
|
||||||
|
if (!Tween) {
|
||||||
|
err("(" + NAMESPACE + ") -> ERROR: TweenLite or TweenMax could not be found. Please make sure GSAP is loaded before ScrollMagic or use an asynchronous loader like requirejs.");
|
||||||
|
}
|
||||||
|
// (BUILD) - REMOVE IN MINIFY - END
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ----------------------------------------------------------------
|
||||||
|
* Extensions for Scene
|
||||||
|
* ----------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* Every instance of ScrollMagic.Scene now accepts an additional option.
|
||||||
|
* See {@link ScrollMagic.Scene} for a complete list of the standard options.
|
||||||
|
* @memberof! animation.GSAP#
|
||||||
|
* @method new ScrollMagic.Scene(options)
|
||||||
|
* @example
|
||||||
|
* var scene = new ScrollMagic.Scene({tweenChanges: true});
|
||||||
|
*
|
||||||
|
* @param {object} [options] - Options for the Scene. The options can be updated at any time.
|
||||||
|
* @param {boolean} [options.tweenChanges=false] - Tweens Animation to the progress target instead of setting it.
|
||||||
|
Does not affect animations where duration is `0`.
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* **Get** or **Set** the tweenChanges option value.
|
||||||
|
* This only affects scenes with a duration. If `tweenChanges` is `true`, the progress update when scrolling will not be immediate, but instead the animation will smoothly animate to the target state.
|
||||||
|
* For a better understanding, try enabling and disabling this option in the [Scene Manipulation Example](../examples/basic/scene_manipulation.html).
|
||||||
|
* @memberof! animation.GSAP#
|
||||||
|
* @method Scene.tweenChanges
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* // get the current tweenChanges option
|
||||||
|
* var tweenChanges = scene.tweenChanges();
|
||||||
|
*
|
||||||
|
* // set new tweenChanges option
|
||||||
|
* scene.tweenChanges(true);
|
||||||
|
*
|
||||||
|
* @fires {@link Scene.change}, when used as setter
|
||||||
|
* @param {boolean} [newTweenChanges] - The new tweenChanges setting of the scene.
|
||||||
|
* @returns {boolean} `get` - Current tweenChanges option value.
|
||||||
|
* @returns {Scene} `set` - Parent object for chaining.
|
||||||
|
*/
|
||||||
|
// add option (TODO: DOC (private for dev))
|
||||||
|
ScrollMagic.Scene.addOption(
|
||||||
|
"tweenChanges", // name
|
||||||
|
false, // default
|
||||||
|
function (val) { // validation callback
|
||||||
|
return !!val;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// extend scene
|
||||||
|
ScrollMagic.Scene.extend(function () {
|
||||||
|
var Scene = this,
|
||||||
|
_tween;
|
||||||
|
|
||||||
|
// (BUILD) - REMOVE IN MINIFY - START
|
||||||
|
var log = function () {
|
||||||
|
if (Scene._log) { // not available, when main source minified
|
||||||
|
Array.prototype.splice.call(arguments, 1, 0, "(" + NAMESPACE + ")", "->");
|
||||||
|
Scene._log.apply(this, arguments);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// (BUILD) - REMOVE IN MINIFY - END
|
||||||
|
|
||||||
|
// set listeners
|
||||||
|
Scene.on("progress.plugin_gsap", function () {
|
||||||
|
updateTweenProgress();
|
||||||
|
});
|
||||||
|
Scene.on("destroy.plugin_gsap", function (e) {
|
||||||
|
Scene.removeTween(e.reset);
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update the tween progress to current position.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
var updateTweenProgress = function () {
|
||||||
|
if (_tween) {
|
||||||
|
var
|
||||||
|
progress = Scene.progress(),
|
||||||
|
state = Scene.state();
|
||||||
|
if (_tween.repeat && _tween.repeat() === -1) {
|
||||||
|
// infinite loop, so not in relation to progress
|
||||||
|
if (state === 'DURING' && _tween.paused()) {
|
||||||
|
_tween.play();
|
||||||
|
} else if (state !== 'DURING' && !_tween.paused()) {
|
||||||
|
_tween.pause();
|
||||||
|
}
|
||||||
|
} else if (progress != _tween.progress()) { // do we even need to update the progress?
|
||||||
|
// no infinite loop - so should we just play or go to a specific point in time?
|
||||||
|
if (Scene.duration() === 0) {
|
||||||
|
// play the animation
|
||||||
|
if (progress > 0) { // play from 0 to 1
|
||||||
|
_tween.play();
|
||||||
|
} else { // play from 1 to 0
|
||||||
|
_tween.reverse();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// go to a specific point in time
|
||||||
|
if (Scene.tweenChanges() && _tween.tweenTo) {
|
||||||
|
// go smooth
|
||||||
|
_tween.tweenTo(progress * _tween.duration());
|
||||||
|
} else {
|
||||||
|
// just hard set it
|
||||||
|
_tween.progress(progress).pause();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add a tween to the scene.
|
||||||
|
* If you want to add multiple tweens, add them into a GSAP Timeline object and supply it instead (see example below).
|
||||||
|
*
|
||||||
|
* If the scene has a duration, the tween's duration will be projected to the scroll distance of the scene, meaning its progress will be synced to scrollbar movement.
|
||||||
|
* For a scene with a duration of `0`, the tween will be triggered when scrolling forward past the scene's trigger position and reversed, when scrolling back.
|
||||||
|
* To gain better understanding, check out the [Simple Tweening example](../examples/basic/simple_tweening.html).
|
||||||
|
*
|
||||||
|
* Instead of supplying a tween this method can also be used as a shorthand for `TweenMax.to()` (see example below).
|
||||||
|
* @memberof! animation.GSAP#
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* // add a single tween directly
|
||||||
|
* scene.setTween(TweenMax.to("obj"), 1, {x: 100});
|
||||||
|
*
|
||||||
|
* // add a single tween via variable
|
||||||
|
* var tween = TweenMax.to("obj"), 1, {x: 100};
|
||||||
|
* scene.setTween(tween);
|
||||||
|
*
|
||||||
|
* // add multiple tweens, wrapped in a timeline.
|
||||||
|
* var timeline = new TimelineMax();
|
||||||
|
* var tween1 = TweenMax.from("obj1", 1, {x: 100});
|
||||||
|
* var tween2 = TweenMax.to("obj2", 1, {y: 100});
|
||||||
|
* timeline
|
||||||
|
* .add(tween1)
|
||||||
|
* .add(tween2);
|
||||||
|
* scene.addTween(timeline);
|
||||||
|
*
|
||||||
|
* // short hand to add a TweenMax.to() tween
|
||||||
|
* scene.setTween("obj3", 0.5, {y: 100});
|
||||||
|
*
|
||||||
|
* // short hand to add a TweenMax.to() tween for 1 second
|
||||||
|
* // this is useful, when the scene has a duration and the tween duration isn't important anyway
|
||||||
|
* scene.setTween("obj3", {y: 100});
|
||||||
|
*
|
||||||
|
* @param {(object|string)} TweenObject - A TweenMax, TweenLite, TimelineMax or TimelineLite object that should be animated in the scene. Can also be a Dom Element or Selector, when using direct tween definition (see examples).
|
||||||
|
* @param {(number|object)} duration - A duration for the tween, or tween parameters. If an object containing parameters are supplied, a default duration of 1 will be used.
|
||||||
|
* @param {object} params - The parameters for the tween
|
||||||
|
* @returns {Scene} Parent object for chaining.
|
||||||
|
*/
|
||||||
|
Scene.setTween = function (TweenObject, duration, params) {
|
||||||
|
var newTween;
|
||||||
|
if (arguments.length > 1) {
|
||||||
|
if ( arguments.length < 3) {
|
||||||
|
params = duration;
|
||||||
|
duration = 1;
|
||||||
|
}
|
||||||
|
TweenObject = Tween.to(TweenObject, duration, params);
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
// wrap Tween into a Timeline Object if available to include delay and repeats in the duration and standardize methods.
|
||||||
|
if (Timeline) {
|
||||||
|
newTween = new Timeline({smoothChildTiming: true})
|
||||||
|
.add(TweenObject);
|
||||||
|
} else {
|
||||||
|
newTween = TweenObject;
|
||||||
|
}
|
||||||
|
newTween.pause();
|
||||||
|
} catch (e) {
|
||||||
|
log(1, "ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject");
|
||||||
|
return Scene;
|
||||||
|
}
|
||||||
|
if (_tween) { // kill old tween?
|
||||||
|
Scene.removeTween();
|
||||||
|
}
|
||||||
|
_tween = newTween;
|
||||||
|
|
||||||
|
// some properties need to be transferred it to the wrapper, otherwise they would get lost.
|
||||||
|
if (TweenObject.repeat && TweenObject.repeat() === -1) {// TweenMax or TimelineMax Object?
|
||||||
|
_tween.repeat(-1);
|
||||||
|
_tween.yoyo(TweenObject.yoyo());
|
||||||
|
}
|
||||||
|
// (BUILD) - REMOVE IN MINIFY - START
|
||||||
|
// Some tween validations and debugging helpers
|
||||||
|
|
||||||
|
if (Scene.tweenChanges() && !_tween.tweenTo) {
|
||||||
|
log(2, "WARNING: tweenChanges will only work if the TimelineMax object is available for ScrollMagic.");
|
||||||
|
}
|
||||||
|
|
||||||
|
// check if there are position tweens defined for the trigger and warn about it :)
|
||||||
|
if (_tween && Scene.controller() && Scene.triggerElement() && Scene.loglevel() >= 2) {// controller is needed to know scroll direction.
|
||||||
|
var
|
||||||
|
triggerTweens = Tween.getTweensOf(Scene.triggerElement()),
|
||||||
|
vertical = Scene.controller().info("vertical");
|
||||||
|
triggerTweens.forEach(function (value, index) {
|
||||||
|
var
|
||||||
|
tweenvars = value.vars.css || value.vars,
|
||||||
|
condition = vertical ? (tweenvars.top !== undefined || tweenvars.bottom !== undefined) : (tweenvars.left !== undefined || tweenvars.right !== undefined);
|
||||||
|
if (condition) {
|
||||||
|
log(2, "WARNING: Tweening the position of the trigger element affects the scene timing and should be avoided!");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// warn about tween overwrites, when an element is tweened multiple times
|
||||||
|
if (parseFloat(TweenLite.version) >= 1.14) { // onOverwrite only present since GSAP v1.14.0
|
||||||
|
var
|
||||||
|
list = _tween.getChildren ? _tween.getChildren(true, true, false) : [_tween], // get all nested tween objects
|
||||||
|
newCallback = function () {
|
||||||
|
log(2, "WARNING: tween was overwritten by another. To learn how to avoid this issue see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another");
|
||||||
|
};
|
||||||
|
for (var i=0, thisTween, oldCallback; i<list.length; i++) {
|
||||||
|
/*jshint loopfunc: true */
|
||||||
|
thisTween = list[i];
|
||||||
|
if (oldCallback !== newCallback) { // if tweens is added more than once
|
||||||
|
oldCallback = thisTween.vars.onOverwrite;
|
||||||
|
thisTween.vars.onOverwrite = function () {
|
||||||
|
if (oldCallback) {
|
||||||
|
oldCallback.apply(this, arguments);
|
||||||
|
}
|
||||||
|
newCallback.apply(this, arguments);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// (BUILD) - REMOVE IN MINIFY - END
|
||||||
|
log(3, "added tween");
|
||||||
|
|
||||||
|
updateTweenProgress();
|
||||||
|
return Scene;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the tween from the scene.
|
||||||
|
* This will terminate the control of the Scene over the tween.
|
||||||
|
*
|
||||||
|
* Using the reset option you can decide if the tween should remain in the current state or be rewound to set the target elements back to the state they were in before the tween was added to the scene.
|
||||||
|
* @memberof! animation.GSAP#
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* // remove the tween from the scene without resetting it
|
||||||
|
* scene.removeTween();
|
||||||
|
*
|
||||||
|
* // remove the tween from the scene and reset it to initial position
|
||||||
|
* scene.removeTween(true);
|
||||||
|
*
|
||||||
|
* @param {boolean} [reset=false] - If `true` the tween will be reset to its initial values.
|
||||||
|
* @returns {Scene} Parent object for chaining.
|
||||||
|
*/
|
||||||
|
Scene.removeTween = function (reset) {
|
||||||
|
if (_tween) {
|
||||||
|
if (reset) {
|
||||||
|
_tween.progress(0).pause();
|
||||||
|
}
|
||||||
|
_tween.kill();
|
||||||
|
_tween = undefined;
|
||||||
|
log(3, "removed tween (reset: " + (reset ? "true" : "false") + ")");
|
||||||
|
}
|
||||||
|
return Scene;
|
||||||
|
};
|
||||||
|
|
||||||
|
});
|
||||||
|
}));
|
||||||
2
assets/js/vendor/debug.addIndicators.min.js
vendored
Executable file
2
assets/js/vendor/debug.addIndicators.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
3
assets/js/vendor/mobile-detect.min.js
vendored
Normal file
3
assets/js/vendor/mobile-detect.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,9 +0,0 @@
|
||||||
|
|
||||||
jekyll:
|
|
||||||
image: jekyll/jekyll
|
|
||||||
command: jekyll serve --livereload --reload_port 35729
|
|
||||||
ports:
|
|
||||||
- 4000:4000
|
|
||||||
- 35729:35729
|
|
||||||
volumes:
|
|
||||||
- .:/srv/jekyll
|
|
||||||
Loading…
Reference in a new issue