codeImightUse.html

<div class="container">
    <div data-aos="fade-down">
        <h3 class="is-size-3">
            LA NOSTRA CONSULENZA<br/><span class="is-size-1 has-text-light"></span
        ><span class="is-size-1" style="color: #f6b600">PROCESSING</span>
        </h3>
        <p class="has-text-justified">
            Che si tratti di un singolo video o di un piano marketing o gestionale
            completo la nostra dedizione non cambia.<br/>

            Ci teniamo e i impegniamo ad affrontare un percorso di crescita step by
            step<br/>

            <strong>1</strong> Incontro conoscitivo, presentazione azienda<br/>
            <strong>2</strong> Analisi aziendale e di mercato<br/>
            <strong>3</strong> Progettazione della strategie<br/>
            <strong>4</strong> Presentazione piano strategico e obiettivi<br/>
            <strong>5</strong> Implementazione delle fasi strategiche<br/>
            <strong>6</strong> monitorizzazione<br/>
            <strong>7</strong> Ricerca e sviluppo<br/>
        </p>
    </div>
    <div id="video-compare-container">
        <video
                autoplay
                loop
                poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/dirty.jpg"
        >
            <source
                    src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-dirty.mp4>
            <source
                    src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-dirty.webm>
        </video>
        <div id="video-clipper">
            <video
                    autoplay
                    loop
                    poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/clean.jpg"
            >
                <source
                        src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-clean.mp4>
                <source
                        src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-clean.webm>
            </video>
        </div>
    </div>
</div>

<!--
</nav>
<header id="makudaElement">
<div class="makuda-home-link--lavori makuda-home-link-wrap is-loaded" style="top: 100%;">
       
    <div class="makuda-home-link makuda-home-link-lavori is-link ">
               <a>        
        <span id="photoPortofolio">My Photo Portfolio</span>
        <span id="exploreWorks">Explore Works</span>
                </a>
         
    </div>
</div>
</header>
<header id="makudaElement2">
<div class="makuda-home-link--contacts makuda-home-link-wrap is-loaded" style="top: 100%;">
    <div class="makuda-home-link is-link ">
        <a>
            <span id="findMe">How to find me</span>
            <span id="myContacts">My Contacts</span>
        </a>
    </div>
</div>
</header>
-->



<script>
    function trackLocation(e) {
        var rect = videoContainer.getBoundingClientRect(),
            position = ((e.pageX - rect.left) / videoContainer.offsetWidth) * 100;
        if (position <= 100) {
            videoClipper.style.width = position + "%";
            clippedVideo.style.width = (100 / position) * 100 + "%";
            clippedVideo.style.zIndex = 3;
        }
    }

    var videoContainer = document.getElementById("video-compare-container"),
        videoClipper = document.getElementById("video-clipper"),
        clippedVideo = videoClipper.getElementsByTagName("video")[0];
    videoContainer.addEventListener("mousemove", trackLocation, false);
    videoContainer.addEventListener("touchstart", trackLocation, false);
    videoContainer.addEventListener("touchmove", trackLocation, false);
</script>