https://www.thorlux.com/assets/scripts/juno-Dz5Swcu.js

1import isScrolledIntoView from './is-scrolled-into-view.js';
2
3import './jquery.js';
4
5$(function () {
6    const introduction = $('#juno-introduction');
7
8    function setElementDefaults() {
9        // if (viewport().width > 1000 && viewport().width < 2099) { // Between 1000 and 2099 initial values
10
11        $(window).bind('scroll', scrollAnimations);
12
13        if (introduction.hasClass('animated')) // Post animation positions
14        {
15            $('#left-slide').css({
16                left: "-80%"
17            });
18            $('#right-slide').css({
19                right: "-90%"
20            });
21            $('#juno-range-title').css({
22                top: "30%"
23            });
24
25        } else { // Pre animation positions
26
27            $('#left-slide').css({
28                left: "-50%"
29            });
30            $('#right-slide').css({
31                right: "-50%"
32            });
33            $('#juno-range-title').css({
34                top: "-400px"
35            });
36        }
37        // }
38    }
39
40    $(window).resize(setElementDefaults);
41
42    $(window).trigger('resize');
43
44    function scrollAnimations() {
45        if (isScrolledIntoView(introduction) && !introduction.hasClass('animated')) {
46            $('#juno-range-title').css({
47                transition: "3s",
48                top: "30%"
49            });
50            $('#left-slide').css({
51                transition: "3s",
52                left: "-80%"
53            });
54            $('#right-slide').css({
55                transition: "3s",
56                right: "-90%"
57            });
58            introduction.addClass('animated');
59        }
60
61        if (isScrolledIntoView(introduction) && !introduction.hasClass('animated') && viewport().width > 2100) {
62            $('#juno-range-title').css({
63                transition: "3s",
64                top: "30%"
65            });
66            $('#left-slide').css({
67                transition: "3s",
68                left: "-70%"
69            });
70            $('#right-slide').css({
71                transition: "3s",
72                right: "-80%"
73            });
74            introduction.addClass('animated');
75        }
76
77        let playing = false;
78
79        $(window).on('scroll', () => {
80            if (isScrolledIntoView($('#video-wrapper'))) {
81                if (playing !== true) {
82                    playing = true;
83                    $('#video-wrapper video').get(0).play();
84                }
85            }
86        });
87
88        // $(function () {
89        //     var explodedPlaying,
90        //         ended = false;
91        //
92        //     $('#exploded-juno-d-section').waypoint(function (direction) {
93        //         if (direction == 'down' && explodedPlaying != true) {
94        //             explodedPlaying = true;
95        //             $('#exploded-juno-d-section video').get(0).play();
96        //         }
97        //     }, {offset: 400});
98        //
99        //     $('#explosion-play').click(function () {
100        //         $('#exploded-juno-d-section video').get(0).play();
101        //         $('#explosion-play').fadeOut(500);
102        //         ended = false;
103        //     });
104        //
105        //     $('#exploded-juno-d-section video').on('ended', function () {
106        //         $('#explosion-play').fadeIn(1000);
107        //         ended = true;
108        //     });
109        // });
110    }
111});