Agency website POC

HTML

              
                .cursor
    .cursor_point
    .cursor_outer
.portfolio
    .portfolio_home
        %div{:style => 'position: fixed; z-index: -99; width: 2320px; height: 180%; left: 0;top: -38%;'}
            <iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/tz8Puc4W5BM?autoplay=1&controls=0&showinfo=0&autohide=1&mute=1"></iframe>
        .portfolio_home__header
            .hamburger.trigger
                -(1..3).each do
                    .hamburger_part
        .portfolio_home__title
            .logo
                %img.first{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/clogotemp.png'}
                %img.second{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/clogotemp2.png'}
                .page_portfolio
                    .portfolio_home__header
                        .logoMain   
                            %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cagencylogo.png'}
                        .nav
                            %ul
                                %li.active.trigger Our work
                                %li.trigger Our services
                                %li.trigger About us
                                %li.trigger Contact us
                        .number.black 0161 345 3464
                        .hamburger.black.trigger
                            -(1..3).each do
                                .hamburger_part
                    .slider_note
                        Drag through our work
                    .portfolio_home__work
                        .portfolio_home__header.work
                            .back
                                
                                %img.trigger{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowDown.png'}
                            .logoMain   
                                %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/slogowhite.png'}
                            .nav
                                %ul
                                    %li.active.trigger Our work
                                    %li.trigger Our services
                                    %li.trigger About us
                                    %li.trigger Contact us
                            .number.white 0161 345 3464
                            .hamburger.white.trigger
                                -(1..3).each do
                                    .hamburger_part
                        .slideClone
                            .title.f
                                #{'.01'} 
                                %br
                                My Protein
                            .image
                                %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/fud.png', :draggable => 'false'}
                                .overlay
                                .cats ADVERTISING   DESIGN   DIGITAL
                                .title  My protein rebrand and digital campaign
                            
                        .slideClone
                            .title.f
                                #{'.02'} 
                                %br
                                Nike Air Max
                            .image
                                %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/nike.png', :draggable => 'false'}
                                .overlay
                                .cats ADVERTISING   DESIGN   DIGITAL   STRATEGY
                                .title  Nike Air max video campaign 2017
                        .slideClone
                            .title.f
                                #{'.03'} 
                                %br
                                Apple Watch
                            .image
                                %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rpo.jpg', :draggable => 'false'}
                                .overlay
                                .cats ADVERTISING   DIGITAL   STRATEGY
                                .title The new Apple Watch digital campaign 2019
                        .slideClone
                            .title.f
                                #{'.04'} 
                                %br
                                Jade Teriyaki
                            .image
                                %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/orangetyhing.png', :draggable => 'false'}
                                .overlay
                                .cats ADVERTISING   DESIGN   DIGITAL   STRATEGY
                                .title Another agency did this campaign, not us
                        %img.scroll{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowDown.png'}
                    .portfolio_home__slider
                        .slider_inner
                            .slider_inner__slide
                                .title 
                                    #{'.01'} 
                                    %br
                                    My Protein
                                .image
                                    %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/fud.png', :draggable => 'false'}
                                    .overlay
                                    .cats ADVERTISING   DESIGN   DIGITAL
                                    .title My protein rebrand and digital campaign
                                    .button 
                                        View case study
                                        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowbblakc.png'}
                            .slider_inner__slide
                                .title 
                                    #{'.02'} 
                                    %br
                                    Nike Air Max
                                .image
                                    %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/nike.png', :draggable => 'false'}
                                    .overlay
                                    .cats ADVERTISING   DESIGN   DIGITAL   STRATEGY
                                    .title Nike Air max video campaign 2017
                                    .button 
                                        View case study
                                        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowbblakc.png'}
                            .slider_inner__slide
                                .title 
                                    #{'.03'} 
                                    %br
                                    Apple Watch
                                .image
                                    %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rpo.jpg', :draggable => 'false'}
                                    .overlay
                                    .cats ADVERTISING   DIGITAL   STRATEGY
                                    .title The new Apple Watch digital campaign 2019
                                    .button 
                                        View case study
                                        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowbblakc.png'}
                            .slider_inner__slide
                                .title 
                                    #{'.04'} 
                                    %br
                                    Jade Teriyaki
                                .image
                                    %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/orangetyhing.png', :draggable => 'false'}
                                    .overlay
                                    .cats ADVERTISING   DESIGN   DIGITAL   STRATEGY
                                    .title Another agency did this campaign, not us
                                    .button 
                                        View case study
                                        %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowbblakc.png'}
                
            %hr
            %h1 
                We are an Independent 
                %span Creative Advertising 
                &amp; 
                %span Branding Agency
            %img.trigger{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/arrowDown.png'}

CSS

              
                @font-face {
    font-family: 'Hurme';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/HurmeGeometricSans2-Bold.woff2') format('woff2'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/HurmeGeometricSans2-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

.content {
    z-index: 2;
    position: absolute;
    background: red;
    top: 100%;
}


$blue: #07101d;
$yellow: #ffdc25;
$globalPadding: 40px;

.dynamicCursor {
    // transform-origin: 270px 0;
}
* {
    box-sizing: border-box;    
}

body {
    background: $blue;
    background-size: cover !important;
    font-family: 'Hurme';
    font-weight: 500;
    user-select: none;
    margin: 0;
    padding: $globalPadding;
    height: 100vh;
    iframe {
        opacity: 0;
        animation: fadeInVid 1s 1s forwards;

    }

    .portfolio {

        .slider_note {
            width: 100%;
            position: absolute;
            color: black;
            left: 0;
            top: 640px;
            z-index: 2;
            text-align: center;
        }

        .slideClone {
            width: 700px;
            height: 450px;
            margin: 0 auto;
            top: 160px;
            display: none;
            position: fixed;
            left: 0;
            transition: all .5s;
            right: 0;

            .overlay,
            .cats,
            .title {
                opacity: 1 !important;
            }

            .button {
                display: none;
            }

            .title {
                font-weight: 800;
                color: $yellow;
                position: relative;
                z-index: 10;
                font-size: 22px;
                transform-style: preserve-3d;
                left: 0;
            }


            .f {
                position: relative;
                top: 0;
                transition: all .7s .0s cubic-bezier(0.79, -0.01, 0, 0.99);

            }

            .image {
                position: relative;
                margin-top: 10px;
                padding: 94px 94px;
                height: 380px;
                transform-style: preserve-3d;

                img {
                    position: absolute;
                    left: 0;
                    z-index: -1;
                    top: 0;
                    transition: all .8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);
                    height: 100%;
                }

                .overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height:  100%;
                    background: rgba(11, 18, 27, 0.6);
                    z-index: -1;
                    opacity: 0;
                    transition:  opacity .1s, transform .8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);
                }

                .cats {
                    color: $yellow;
                    font-weight: 700;
                    font-size: 12px;
                    transform-style: preserve-3d;
                    opacity: 0;
                    left: 0;position: relative;
                    transition: all .8s .16s cubic-bezier(0.79, -0.01, 0, 0.99);
                }

                .title {
                    font-weight: 800;
                    color: white;
                    width: 350px;
                    font-size: 28px;
                    margin-top: 10px;
                    line-height: 35px;
                    transform-style: preserve-3d;
                    position: relative;
                    transition: all 0.6s .2s;                          
                    margin: 22px 0 16px 0;
                    opacity: 0;
                }

                .button {
                    color: $blue;
                    font-size: 14px;
                    cursor: pointer;
                    margin-top: 14px;
                    background: $yellow;
                    float: left;
                    padding: 12px 20px;
                    transform-style: preserve-3d;
                    position: relative;
                    transition: all .6s .3s;
                    opacity: 0;
                }
            }
        }

        &_home {
            &__work {
                background: transparent;
                padding: 40px;
                position: fixed;
                width: 100%;
                z-index: 3;
                position: fixed;
                height: 100%;
                pointer-events: none;
                opacity: 0;
                top: 0;
                z-index: 4;
                left: 0;
                clip-path: polygon(calc(50% - 353px) 613px, calc(50% + 359px) 613px, calc(50% + 359px) 226px, calc(50% - 353px) 225px);
                transition: opacity .5s .67s, -webkit-clip-path .8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);


                &.expand {
                    clip-path: polygon(0 100%, 100% 100%, 100% 0%, 0 0%);
                    pointer-events: all;
                    opacity: 1;
                    transition: opacity .1s, -webkit-clip-path .8s 0.23s cubic-bezier(0.79, -0.01, 0, 0.99);

                    .scroll {
                        opacity: 1;
                        transition: all 0.8s 0.5s;
                    }
                    .slideClone {
                        img {
                            transition: all .8s 0.23s cubic-bezier(0.79, -0.01, 0, 0.99);
                            transform: scale(2.9)
                        }
                        .overlay {
                            transition:  opacity .1s, transform .8s .23s cubic-bezier(0.79, -0.01, 0, 0.99);
                            transform: scale(2.9)
                        }

                        .title.f {
                            position: relative;
                            top: 72px;
                            left: 0;
                            transition: all .8s .4s cubic-bezier(0.79, -0.01, 0, 0.99);
                        }

                        .cats, .title {
                            left: -93px;
                            position: relative;

                        }

                        .cats {
                            transition: all .8s .16s cubic-bezier(0.79, -0.01, 0, 0.99);
                        }

                        .title {
                            transition: all .8s .19s cubic-bezier(0.79, -0.01, 0, 0.99);
                        }

                    }
                }
            }
            &__slider{
                position: relative;
                transform: translateX(-800px);
                perspective: 900px;
                perspective-origin: 50% 200px;

                & .slider {
                    &_inner {
                        transform: translateY(120px);
                        position: absolute;
                        left: 0;
                        right: 0;
                        width: 30000px;
                        transition: all 0.8s cubic-bezier(0, 0.6, 0.25, 1);
                        transform-style: preserve-3d;
                        pointer-events: none;

                        &.in {
                            pointer-events: all;
                            .slider_inner__slide {
                                animation: sliderIn 1.1s .65s cubic-bezier(0.79,-0.01, 0, 0.99) forwards;
                            }
                        }

                        &__slide {
                            width: 700px;
                            height: 750px;
                            float: left;
                            margin-right: 60px;
                            transition: all .5s;
                            transform-style: preserve-3d;
                            transform: scale(0);

                            .title {
                                font-weight: 800;
                                color: #060608;
                                position: relative;
                                font-size: 22px;
                                transform-style: preserve-3d;
                            }

                            &:nth-of-type(2){
                                .image {
                                    .overlay,
                                    .cats,
                                    .title,
                                    .button {
                                        opacity: 1;
                                    }
                                }
                            }

                            .image {
                                position: relative;
                                margin-top: 10px;
                                padding: 94px 94px;
                                height: 380px;
                                transform-style: preserve-3d;

                                img {
                                    position: absolute;
                                    left: 0;
                                    z-index: -1;
                                    top: 0;
                                    height: 100%;
                                }

                                .overlay {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height:  100%;
                                    background: rgba(11, 18, 27, 0.7);
                                    z-index: -1;
                                    opacity: 0;

                                    transition: opacity .1s, transform .8s .7s cubic-bezier(0.79, -0.01, 0, 0.99);
                                }

                                .cats {
                                    color: $yellow;
                                    font-weight: 700;
                                    font-size: 12px;
                                    left: 0;
                                    transition: all .8s .16s cubic-bezier(0.79, -0.01, 0, 0.99);
                                    transform-style: preserve-3d;
                                    opacity: 0;

                                }

                                .title {
                                    font-weight: 800;
                                    color: white;
                                    width: 350px;
                                    font-size: 28px;
                                    margin-top: 10px;
                                    line-height: 35px;
                                    transform-style: preserve-3d;
                                    position: relative;
                                    transition: all 0.6s .2s;                          
                                    margin: 22px 0 16px 0;
                                    opacity: 0;
                                }

                                .button {
                                    color: $blue;
                                    font-size: 14px;
                                    cursor: pointer;
                                    margin-top: 14px;
                                    background: $yellow;
                                    float: left;
                                    padding: 12px 40px 14px 20px;
                                    transform-style: preserve-3d;
                                    position: relative;
                                    transition: all .6s .3s;
                                    opacity: 0;

                                    img {
                                        width: 14px;
                                        height: auto;
                                        position: absolute;
                                        right: 17px;
                                        left: auto;
                                        top: 16px;
                                    }
                                }
                            }
                        }
                    }
                }  
            }

            &__header {
                float: right;
                width: 100%;

                &.work {
                    position: relative;
                    z-index: 1;

                    ul li {
                        color: #fff;

                        &.active {
                            border-bottom: 2px solid $yellow;
                            color: $yellow;
                        }
                    }
                }

                ul {
                    padding: 0;
                    margin: 0;

                    li {
                        display: inline;
                        margin-right: 10px;

                        &.active {
                            font-size: 20px;
                            border-bottom: 2px solid $blue;
                        }

                        &:hover {
                            border-bottom: 2px solid $blue;
                        }
                    }
                }

                .nav {
                    position: absolute;
                    left: 0;
                    right: 0;
                    margin: auto;
                    width: 400px;
                    padding: 0;
                }

                & .logoMain {
                    float: left;
                    position: relative;
                    top: -3px;
                    width: 280px;

                    img {
                        width: 100% !important;
                        animation: none !important;
                        opacity: 1 !important;
                    }
                }

                & .number {
                    color: white;
                    -webkit-animation: fade 1s 2.3s forwards;
                    animation: fade 1s 2.3s forwards;
                    opacity: 0;
                    float: right;
                    position: relative;
                    margin-right: 80px;
                    top: 5px;

                    &.black {
                        color: $blue;
                        animation: none;
                        opacity: 1;
                    }

                    &.white {
                        color: #fff;
                        animation: none;
                        opacity: 1;
                    }
                }

                & .hamburger {
                    float: right;
                    position: absolute;
                    right: $globalPadding;
                    top: 45px;
                    animation: fade 1s 2.3s forwards;
                    opacity: 0;

                    height: 20px;
                    width: 30px;

                    &.black {
                        opacity: 1 !important;

                        .hamburger_part {
                            background: $blue;
                        }
                    }

                    &.white {
                        opacity: 1 !important;
                        right: 0;
                        top: 5px;
                        .hamburger_part {
                            background: $yellow;
                        }
                    }

                    &_part {

                        $hamburgerPartHeight: 2px;

                        width: 30px;
                        height: $hamburgerPartHeight;
                        position: absolute;
                        background: $yellow;
                        right:0;

                        @for $i from 1 through 3 {
                            &:nth-of-type(#{$i}) {
                                top: ($hamburgerPartHeight + 2) * 2 * ($i - 1);
                            }
                        }

                        &:last-child {
                            width: 20px;

                        }
                    }
                }
            }

            &__title {
                position: absolute;
                bottom: $globalPadding * 2;
                left: $globalPadding * 2;
                max-width: 460px;

                .logo { 
                    margin-bottom: 30px;

                    img.first {
                        margin-right: 0px;
                        position: relative;
                        top: 3px;
                        width: 135px;
                        opacity: 0;
                        -webkit-animation: fade 1s 1s forwards;
                        animation: fade 1s 1s forwards;

                        &.out {
                            animation: fadeOut .4s .6s forwards;
                            opacity: 1;
                        }
                    }

                    img.second {
                        width: 140px;
                        animation: spark 1.3s 1.1s cubic-bezier(0.76, 0.01, 0.21, 1.02) forwards;
                        clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);

                    }
                }

                hr {
                    width: 80px;
                    background: $yellow;
                    height: 2px;
                    border: none;
                    position: absolute;
                    left: 0;
                    width: 0;
                    top: 77px;
                    animation: hr 1.3s 1.4s cubic-bezier(0.76, 0.01, 0.21, 1.02) forwards;

                    &.out {
                        animation: hrOut .4s .4s forwards;
                        width: 70px;
                    }
                }

                .trigger {
                    opacity: 0;
                    animation: fade 1s 2.5s forwards;

                    &.out {
                        animation: fadeOut .4s 0s forwards;
                    }
                }

                h1 {
                    color: white;
                    margin-top: 60px;
                    line-height: 30px;
                    font-weight: normal;
                    font-size: 18px;
                    opacity: 0;
                    margin-bottom: 30px;
                    animation: fade 1s 1.9s forwards;

                    &.out {
                        animation: fadeOut .4s .2s forwards;
                        opacity: 1;
                    }

                    span {
                        color: $yellow;
                    }
                }

                & .page {
                    &_portfolio {
                        background: $yellow;
                        padding: $globalPadding;
                        position: fixed;
                        width: 100%;
                        z-index: 3;
                        position: fixed;
                        height: 100%;
                        opacity: 0;
                        top: 0;
                        left: 0;
                        clip-path: polygon(226px calc(100% - 262px), 359px calc(100% - 262px), 359px calc(100% - 309px), 226px calc(100% - 309px));
                        transition: opacity .6s 0.2s , clip-path 1s .6s cubic-bezier(0.79,-0.01, 0, 0.99);
                    }
                }
            }
        }
    }
}

@keyframes sliderIn {
    from { transform: scale(0);}
    to{ transform: scale(1);}
}
@keyframes fade {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes fadeOut {
    from {opacity: 1}
    to {opacity: 0}
}

@keyframes fadeInVid {
    from {opacity: 0}
    to {opacity: 0.1}
}

@keyframes hr {
    from {width: 0;}
    to {width: 70px;}
}

@keyframes hrOut {
    from {width: 70px;}
    to {width: 0px;}
}

@keyframes spark {
    from {clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);}
    to {clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);}
}

.scroll {
    position: absolute;
    left: calc(50% - 348px);
    top: 458px;
    transition: all 0.8s 0s;
    opacity: 0;
}

.back {
    position: absolute;
    height: 100vh;

    img {
        animation: none !important;
        opacity: 1 !important;
        transform: rotate(90deg);
        bottom: 73px !important;
        position: absolute;
    }
}

JS

              
                $('.trigger').click(function() {
    $('.page_portfolio').css('opacity', '1');
    $('.page_portfolio').css('clip-path', 'polygon(0 100%, 100% 100%, 100% 0%, 0 0%)');
    $('.logo img, .portfolio_home__title h1, .portfolio_home__title hr, .portfolio_home__title img.trigger').addClass('out');
    $('.slider_inner').addClass('in')
    setTimeout(function(){
        $('.slider_inner').click()

    }, 2500)
});

introComplete = false;

setTimeout(function(){
    introComplete = true;
}, 2500)

var scrollPosition = 0;
window.addEventListener('wheel', function(e) {

    if (e.deltaY > 0) {
        scrollPosition += 10;
        $('.content').css('top', -scrollPosition + 'px')
        console.log(e.deltaY)
        if(introComplete) {
            $('.page_portfolio').css('opacity', '1');
            $('.page_portfolio').css('clip-path', 'polygon(0 100%, 100% 100%, 100% 0%, 0 0%)');
            $('.logo img, .portfolio_home__title h1, .portfolio_home__title hr, .portfolio_home__title img.trigger').addClass('out');
            $('.slider_inner').addClass('in')
            setTimeout(function(){
                $('.slider_inner').click()

            }, 2000)
            
            
        }
    } else {
        scrollPosition -= 10;
    }
});

$('.button').click(function(){
    $(this).parent().addClass('clicked')
    $(this).parent().parent().parent().addClass('clicked')
    //$('.portfolio_home__work').css('opacity', 1);
    $('.portfolio_home__work').addClass('expand')

})

// Gross but only a demo

$(window).resize(function(){
    $('.slider_inner').css('left', ($(document).width() / 2) - ($('.slider_inner__slide').width() / 2));
})

$('.slider_inner').css('left', ($(document).width() / 2) - ($('.slider_inner__slide').width() / 2));

var dragging = false;
var endPosition = 0;
var threshold = 100;

$('.slider_inner').click(function() {
    $('.slider_inner__slide').css('animation', 'none')
    $('.slider_inner__slide').css('transform', 'rotateY(0deg) scale(1)')
})
$('.slider_inner').mousedown(function(e) {
    initX = e.clientX;
    dragging = true;
    //$('.slider_inner__slide').css('animation', 'none')
    cursor.style.transition = `transform 0s 0s`;

    console.log(cursor)
})

$('.slider_inner').mousemove(function(e) {

    if(dragging) {
        let mouseX = e.clientX;
        difference = mouseX - initX;


        //$('.slider_inner__slide').css('transform', 'rotateY(' + direction + pps / 110 + 'deg) scale(1)')
        position  = parseInt($('.slider_inner').css('transform').split(',')[4]);
        //console.log('position is ' + position)
        $('.slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .overlay, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .title, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .cats, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .button').css('opacity', 1 -Math.abs(difference / 200))
        
                $('.slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .overlay, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .title, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .cats, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .button').css('transition', 'all .2s')

        $('.slider_inner').css('transform', `translateX(${difference + endPosition}px) translateY(120px)`);


    }
});

// 520 -40 -600 -1150

// 560 


var offset = 760;
var margin = 0;

var index = 1;

$('.slider_inner').mouseup(function() {
    cursor.style.transition = `transform ${cursorSettings.transitionTime} ${cursorSettings.transitionEase}, width ${cursorSettings.expandSpeed}s .2s, height ${cursorSettings.expandSpeed}s .2s, opacity 1s .2s`;
    endPosition = parseInt($('.slider_inner').css('transform').split(',')[4]);


    if(difference < -160) {
        console.log('snap to next')
        if(index < 3) {
            index++;
            var threshold = offset - ((offset + margin) * index);
            $('.slider_inner').css('transform', `translateX(${threshold}px) translateY(120px)`);
            endPosition = threshold;

        } else {
            var threshold = offset - ((offset + margin) * index);
            $('.slider_inner').css('transform', `translateX(${threshold}px) translateY(120px)`);
            endPosition = threshold; 

        }

    } else {
        if(difference > 160) {
            if(index > 0) {
                index--;
                var threshold = offset - ((offset + margin) * index);
                $('.slider_inner').css('transform', `translateX(${threshold}px) translateY(120px)`);
                endPosition = threshold;

            } else {
                var threshold = offset - ((offset + margin) * index);
                $('.slider_inner').css('transform', `translateX(${threshold}px) translateY(120px)`);
                endPosition = threshold; 

            }

        } else {
            var threshold = offset - ((offset + margin) * index);
            $('.slider_inner').css('transform', `translateX(${threshold}px) translateY(120px)`);
            endPosition = threshold;

        }
    }

    dragging = false;
    console.log('.slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ')')
    $('.slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .overlay, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .title, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .cats, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .button').css('opacity', 1)
    $('.slider_inner__slide').css('transform', 'rotateY(0deg) scale(1)')
    $('.slideClone').hide();
    $('.slideClone:nth-of-type('  + parseInt(index + 2) +  ')').show();
    difference = 0
})

// https://gist.github.com/ripper234/5757309

function drawMouseSpeedDemo() {
    var mrefreshinterval = 30; // update display every 500ms
    var lastmousex=-1; 
    var lastmousey=-1;
    var lastmousetime;
    var mousetravel = 0;
    var mpoints = [];
    var mpoints_max = 30;
    var direction;

    $('html').mousemove(function(e) {
        var mousex = e.pageX;
        var mousey = e.pageY;
        if (lastmousex > -1) {
            mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
        }
        // console.log(mousex-lastmousex)

        if(mousex-lastmousex > 0) {
            direction = '+'
        } else {
            direction = '-'
        }

        //console.log(direction);

        lastmousex = mousex;
        lastmousey = mousey;
    });
    var mdraw = function() {
        var md = new Date();
        var timenow = md.getTime();
        if (lastmousetime && lastmousetime!=timenow) {
            var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
            mpoints.push(pps);
            if (mpoints.length > mpoints_max)
                mpoints.splice(0,1);
            mousetravel = 0;
            //console.log(pps)
            if(dragging) {
                let velocity = .5 - (pps / 40000);



                $('.slider_inner__slide').css('transform', 'rotateY(' + direction + pps / 110 + 'deg) scale(1)')
                $('.slider_inner__slide').css('transition', 'all ' + velocity + 's');
                //console.log(velocity)
            }

        }
        lastmousetime = timenow;
        setTimeout(mdraw, mrefreshinterval);
    }
    // We could use setInterval instead, but I prefer to do it this way
    setTimeout(mdraw, mrefreshinterval); 
};

drawMouseSpeedDemo()

/* -------------------------------------------------

Dynamic cursor

--------------------------------------------------- */

const cursorSettings = {
    'class' : 'dynamicCursor',
    'size' : '18',
    'expandedSize' : '40',
    'expandSpeed' : 0.4,
    'background' : 'rgba(161, 142, 218, 0.25)',
    'opacity' : '1',
    'transitionTime' : '1.4s',
    'transitionEase' : 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
    'borderWidth' : '0',
    'borderColor' : 'black',
    'iconSize': '11px',
    'iconColor': 'white',
    'triggerElements': {
        'trigger' : {
            'className' : 'trigger',
            'icon' : '<i class="fa fa-plus"></i>'
        },
        'trigger2' : {
            'className' : 'slider_inner',
            'icon' : '<i class="fa fa-arrows-h"></i>'
        }
    }
}


function dynamicCursor(options) {

    document.write('<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">');

    var hold;
    cursor = document.createElement('div');
    let cursorIcon = document.createElement('div');

    cursorIcon.classList.add('cursorIcon');
    cursorIcon.style.position = 'absolute';
    cursorIcon.style.fontFamily = 'Raleway';
    cursorIcon.style.textTransform = 'uppercase';
    cursorIcon.style.fontWeight = '800';
    cursorIcon.style.textAlign = 'center'
    cursorIcon.style.top = '50%';
    cursorIcon.style.width = '100%';
    cursorIcon.style.transform = 'translateY(-50%)';
    cursorIcon.style.color = options.iconColor;
    cursorIcon.style.fontSize = options.iconSize;
    cursorIcon.style.opacity = 0;
    cursorIcon.style.transition = `opacity ${options.expandSpeed}s`;

    cursor.classList.add(options.class);
    cursor.style.boxSizing = 'border-box';
    cursor.style.width = `${options.size}px`;
    cursor.style.height = `${options.size}px`;
    cursor.style.borderRadius = `${options.expandedSize}px`;
    cursor.style.opacity = 0;

    cursor.style.pointerEvents = 'none';
    cursor.style.zIndex = 999;
    cursor.style.transition = `transform ${options.transitionTime} ${options.transitionEase}, width ${options.expandSpeed}s .2s, height ${options.expandSpeed}s .2s, opacity 1s .2s`;
    cursor.style.border = `${options.borderWidth}px solid ${options.borderColor}`;
    cursor.style.position = 'fixed';
    cursor.style.background = options.background;

    cursor.appendChild(cursorIcon);
    document.body.appendChild(cursor);

    setTimeout(function() {
        cursor.style.opacity = options.opacity;
    }, 500)

    var idle;

    document.onmousemove = e => {
        console.log('test')
        x = e.pageX;
        y = e.pageY;

        cursor.style.opacity = options.opacity;
        clearInterval(idle)

        idle = setTimeout(function() {
            cursor.style.opacity = 0;
        }, 4000)

        cursor.style.top = '0';
        cursor.style.left = '0';
        cursor.style.transform = `translateX(calc(${x}px - 50%)) translateY(calc(${y}px - 50%))`;
    }

    for(i in options.triggerElements) {

        let trigger = $(`.${options.triggerElements[i].className}`);

        console.log(trigger);


        let icon = options.triggerElements[i].icon;

        if(!trigger) {
            console.warn('You dont have any triggers');
        } else {
            trigger.each(function(el){

                console.log()
                trigger[el].style.cursor = 'default';
                trigger[el].addEventListener('mouseover', () => {
                    console.log('over')
                    cursor.style.width = `${options.expandedSize}px`;
                    cursor.style.height = `${options.expandedSize}px`;
                    cursorIcon.innerHTML = icon;
                    cursorIcon.style.opacity = 1;


                    console.log($(this))


                })

                trigger[el].addEventListener('mouseout', () => {
                    cursor.style.width = `${options.size}px`;
                    cursor.style.height = `${options.size}px`;
                    cursorIcon.style.opacity = 0;
                })
            })

        }
    }
}

dynamicCursor(cursorSettings);

 $('.back').click(function(){
     $(this).parent().parent().removeClass('expand')
 })

// make go back from page to slider again

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions