gistfile1.txt

<template>
    <!-- :class="{'nav-bar': !topper }" -->
    <header id="header">
        <h2 id='logo-text'>GENERA</h2>
        <div id="wrapper-wrapper">
            <div id="logo-cont-wrapper">
                <div id="logo-cont" @click="clicker">
                    <symbol-positioner v-for="id in ids" :pos="pos[$index]">
                        <div :id="id"></div>
                    </symbol-positioner>

                    <div class="line" id="line1"></div>
                    <div class="line" id="line2"></div>
                    <div class="line" id="line3"></div>
                    <div class="line" id="line4"></div>
                </div>
            </div>
        </div>
    </header>
</template>

<script>
    import _ from 'lodash'
    import SymbolPositioner from './SymbolPositioner.vue'
    export default {
        data: () => ({
            ids: ['triangle', 'circle', 'square'],
            pos: [[1,0],[2,1],[0,2]],
            scrollTop: 0,
            topper: true
        }),
        components: {
            SymbolPositioner
        },
        computed: {
            matrix() {
                const matr = [[0,0,0], [0,0,0], [0,0,0]]
                this.pos.forEach(currentPos => {
                    matr[currentPos[0]][currentPos[1]] = 1;
                });

                return matr;
            },
            isAtTop() {
                return this.scrollTop < 50;
            }
        },
        methods: {
            clicker() {
                this.topper = !this.topper;
                console.log(this.topper);
            },
            changePos() {
                const symbolIndexes = _.shuffle([0,1,2]);
                const possibleMoves = _.shuffle([[1,0], [-1,0], [0,1], [0,-1]]);

                _.forEach(symbolIndexes, (symbolIndex) => {
                    const pos = this.pos[symbolIndex];
                    const possiblePositions = possibleMoves.map(move => [move[0] + pos[0], move[1] + pos[1]]);

                    const allowedPositions = possiblePositions.filter(pos => {
                        const isInside = _.every(pos, v => v >= 0 && v <= 2)
                        return isInside && !this.matrix[pos[0]][pos[1]]
                    })

                    if (allowedPositions.length > 0) {
                        // Moves the selected symbol
                        this.pos.$set(symbolIndex, allowedPositions[0])

                        // Break the _.forEach loop to prevent other symbols from moving
                        return false
                    }
                });
            }
        },
        ready() {
            var timer = () => {
                try {
                    this.changePos();
                    setTimeout(timer, 5000);
                } catch(e) {
                    console.log(e);
                }
            }
            setTimeout(timer, 5000);

            // window.onscroll = () => {
            //     this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //     console.log(this.scrollTop);
            // }


            const headerElement = document.getElementById('header');
            let headerToggled = false;

            window.addEventListener('scroll',function(){
                if ( window.pageYOffset > 100 && headerToggled ) {
                    headerToggled = false;
                    headerElement.classList.add('nav-bar');
                    console.log(headerToggled);
                } else if ( window.pageYOffset < 100 && !headerToggled ) {
                    headerToggled = true;
                    headerElement.classList.remove('nav-bar');
                    console.log(headerToggled);
                }
            }.bind(this));
        }
    }
</script>

<style lang="stylus">
header.nav-bar
    h2#logo-text
        transform translateX(55px) scale(0.9)

    #wrapper-wrapper
        transform translate(10px, 10px)

    #logo-cont-wrapper
        transform translate(0, 0) scale(0.1)

header
    background-color #FFF
    height 100%

    h2#logo-text
        font-weight 700
        font-size 2em
        position fixed
        top 15px
        left 10px
        will-change transform
        transition transform 0.8s ease

    #wrapper-wrapper
        width 100%
        height 100%
        position fixed
        transform translate3d(50%, 50%, 0)
        will-change transform
        transition transform 0.8s ease


    #logo-cont-wrapper
        position fixed
        background-color #000
        height 500px
        width 500px
        display flex
        justify-content center
        transform translate3d(-50%, -50%, 0)
        align-items center
        box-shadow 3px 46px 154px -50px rgba(0,0,0,0.75)
        will-change transform
        transition transform 0.8s ease
        transform-origin 0 0

    #logo-cont
        background-color #000
        position relative
        width 83.673469388%
        height 83.673469388%

        #circle
            border-radius 50%

        #triangle
            background url('../../static/img/triangle-white.svg') repeat no-repeat
            background-size contain
            z-index 100
            position absolute

        #square, #circle, #triangle
            width 19.024390244%
            height 19.024390244%
            transform translate(-50%, -50%)

        .line, #circle, #square
            position absolute
            background-color #FFF

        #line1, #line2
            height 100%
            width 3.9024390244%
            transform translateX(-50%)

        #line3, #line4
            width 100%
            height 3.9024390244%
            transform translateY(-50%)

        #line1
            left 33%

        #line2
            left 66%

        #line3
            top 33%

        #line4
            top 66%

</style>