.team-section
	.pointer
			.point-1
			.point-2
			.line

	ul.team-list
			-for(var i = 1; i < 15; i++)
					-var name = 'Mahmoud Zohdi '+ i
					-var url = "https://i.pravatar.cc/" + (300 + i)
					li.team-member(data-name=name data-job-title="Front-End Developer")
							img(src=url alt="user image")
							.hover-effect
	.center-area
			.our-team(data-title="Our Team" data-job-title="The Rockstars")
					h4.note The Rockstars
					h2.title Our Team
			.text-center
					.member-info
							h4.job-title
							h3.name
View Compiled
$textGray: #a4abae;
$textBlack: #333;
$yellow: #DC9831;

html,body{
    margin: 0;
    padding: 0;
		height: 100%;
}
body{
    font-family: 'Nunito';
    background-color: #f9f9f9;
		overflow-y: scroll;
}

ul, ol, li{
    list-style: none;
    padding: 0;
    margin: 0;
}


.team-section{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
// pointer styles
.pointer{
    position: absolute;
    transform-origin: 0 0;
    z-index: 50;
    .point-1, .point-2, .line{
        position: absolute;
        background-color: red;
    }
    $pointSize: 10px;
    .point-1, .point-2{
        width: $pointSize;
        height: $pointSize;
        border-radius: 50%;
        top: -$pointSize/2;
        transform-origin: center center;
        transform: scale(0);
    }
    .point-1{
        left: -$pointSize/2;
    }
    .point-2{
        right: -$pointSize/2;
    }
    .line{
        top: 0;
        width: 0;
        height: 1px;
    }
    &.active{
        .point-1, .point-2{
            transition: transform 0.3s;
        }
        .point-1, .point-2{
            transform: scale(1);
        }
        .line{
            width: 100%;
            transition: width 0.3s;
            transition-delay: 0.25s;
        }
        .point-2{
            transition-delay: 0.6s;
        }
    }
}
.center-area{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    min-height: 100px;
    margin-top: -50px;
    text-align: center;
    .title,.name{
        font-size: 50px;
        margin: 0;
    }
    .note, .job-title{
        font-size: 18px;
        margin: 0;
    }
    .our-team{
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -109px;

        
        transform: scale(1);
        opacity: 1;
        transition: transform 0.4s, opacity 0.2s;
    }
    .text-center{
        text-align: center;
    }
    .member-info{
        display: inline-block;

        transform: scale(0.5);
        opacity: 0;
        transition: transform 0.4s, opacity 0.2s;
    }
    &.active{
        .our-team{
            transform: scale(0.5);
            opacity: 0;
        }
        .member-info{
            transform: scale(1);
            opacity: 1;
        }
    }
}


// team list style
$memberSize: 70px;
.team-list{
    position: absolute;
    top: 50%;
    left: 0; //
    // right: 0; 
    // width: 100%; 
    z-index: 10;
    margin-top: -$memberSize/2;
    transition: transform 0.4s;
    transform: translateX(100%);
    .team-member{
        display: inline-block;
        // float: left;
        text-align: center;
        font-size: 16px;
        cursor: default;
        color: #fff;
        width: $memberSize;
        height: $memberSize;
        line-height: $memberSize;
        transition: transform 0.4s;
        .hover-effect{
            border-radius: 50%;
            transition: transform 0.4s;
            position: absolute;
            top: -5%;
            bottom: 0;
            left: -5%;
            right: 0;
            z-index: -1;
            animation: none;
            width: 110%;
            height: 110%;
            // transition: width 0.4s, height 0.4s;
            transition: 0.4s;
            &:before{
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                border-radius: 50%;
                display: inline-block;
                animation: none;
            }
            &:after{
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                border-radius: 50%;
                display: inline-block;
                animation: none;
            }
        }
        $s-min: 10;
        $s-max: 200;
        @for $i from 1 through 15{
            &:nth-child(#{$i}){
                .hover-effect{
                    &, &:before, &:after{
                        background-color: rgba(random(360),$s-min+random($s-max+-$s-min),$s-min+random($s-max+-$s-min), 0.2);
                    }
                }
            }
        }
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            transition: 0.4s;
        }
        &:nth-child(odd){
            transform: translateY(-100%);
        }
        &:nth-child(even){
            transform: translateY(100%);
        }
        &:hover{
            img{
                transform: scale(1.2);
            }
            .hover-effect{
                width: 125%;
                height: 125%;
                top: -12.5%;
                left: -12.5%;

                border-radius: 40%;
                animation: hoverRotation 3s infinite linear;
                &:before{
                    animation: hoverRotation2 3s infinite linear;
                    // top: 5px;
                    // bottom: 5px;
                }
                &:after{
                    animation: hoverRotation3 1.5s infinite linear;
                    // left: 5px;
                    // right: 5px;
                }
            }

        }
    }
    
}
@keyframes hoverRotation{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes hoverRotation2{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}
@keyframes hoverRotation3{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
View Compiled
// inspired from: http://www.cognitev.com/

$(document).ready(function(){
	
	
	function pointerFn(){

    var pointer = $('.pointer');
    var $centerArea
    var centerBoxPosition;
    var centerBoxTop;
    var centerBoxBottom;
    var centerBoxLeft;
    var centerBoxRight;
    var thisPosition;
    var $this;
    var delay;
    var xDistance;
    var yDistance;
    var color;
    function mouseenterCallback(){
        $centerArea = $('.member-info');
        centerBoxPosition = $centerArea.offset();
        centerBoxTop = centerBoxPosition.top;
        centerBoxBottom = centerBoxPosition.top + $centerArea.height();
        centerBoxLeft = centerBoxPosition.left;
        centerBoxRight = centerBoxPosition.left + $centerArea.width();

        pointer.find('.point-1, .point-2, .line').css('background-color', color)

        pointer.addClass('active');
        
        

        // get angle  deg
        var angleDeg = Math.atan2( ( centerBoxTop + ($centerArea.height() / 2) ) - ( thisPosition.top + ($this.height() /2) ), (centerBoxPosition.left + ($centerArea.width() /2)) - (thisPosition.left + ($this.width() /2))) * 180 / Math.PI;
        pointer.css('transform', 'rotate('+angleDeg+'deg)');
        
        
        
        if(Math.abs(angleDeg) > 135 && Math.abs(angleDeg) < 180 ){ // center box on left

            // pointer top position
            pointer.css('top', thisPosition.top + ($this.height()/2));
            // pointer left position
            pointer.css('left', thisPosition.left - 15 );
            
            xDistance = (centerBoxLeft + $centerArea.width() + 15 ) - (thisPosition.left - 15 );
            yDistance = (centerBoxTop + ($centerArea.height() / 2) ) - (thisPosition.top + ($this.height()/2) );

        }else if(angleDeg >= -45 && angleDeg <= 45 ){ // center box on right

            // pointer top position
            pointer.css('top', thisPosition.top + ($this.height()/2));
            // pointer left position
            pointer.css('left', thisPosition.left + $this.width() + 15 );
            
            xDistance = (centerBoxLeft -  15 ) - (thisPosition.left + $this.width() + 15 );
            yDistance = (centerBoxTop + ($centerArea.height() / 2) ) - (thisPosition.top + ($this.height()/2) );

        }else if(angleDeg < -45 && angleDeg >  -135){  // center box on top

            // pointer top position
            pointer.css('top', thisPosition.top - 15);
            // pointer left position
            pointer.css('left', thisPosition.left + ($this.width()/2));
            
            xDistance = (centerBoxLeft +  ($centerArea.width() / 2) ) - (thisPosition.left + ($this.width()/2));
            yDistance = (centerBoxTop + ($centerArea.height() + 15) ) - (thisPosition.top - 15 );

        }else if(angleDeg > 45 && angleDeg <  135 ){ // center box on bottom

            // pointer top position
            pointer.css('top', thisPosition.top + $this.height() + 15);
            // pointer left position
            pointer.css('left', thisPosition.left + ($this.width()/2));
            
            xDistance = (centerBoxLeft +  ($centerArea.width() / 2) ) - (thisPosition.left + ($this.width()/2));
            yDistance = (centerBoxTop - 15 ) - (thisPosition.top + $this.height() + 15 );

        }
        // get line distance
        pointer.width(Math.sqrt( (xDistance * xDistance) + (yDistance * yDistance) ) );
    }
    $('.team-member').mouseenter(function(){



        $this = $(this);
        thisPosition = $this.offset();
        color = $this.find('.hover-effect').css('background-color');
        color = color.split('');
        color[color.length - 4] = 1;
        color[color.length -2] = 0;
        color = color.join('');

        $('.center-area').find('.name').text($this.data('name'));
        $('.center-area').find('.job-title').text($this.data('job-title'));
        $('.center-area').addClass('active');

        delay = setTimeout(mouseenterCallback, 500);

    });
    $('.team-member').mouseleave(function(){

        pointer.removeClass('active');
        
        $('.center-area').removeClass('active');
        clearTimeout(delay);

    });
}pointerFn();
	
	function scrollEvent(){

			var teamList = $('.team-list');
			var centerBoxAreaLeft = $('.center-area .our-team').offset().left;
			var centerBoxAreaRight = centerBoxAreaLeft + $('.center-area .our-team').width();
			var translateX = $('.team-section').width();
			var membersPositionX = [];
			var circlesTopPosition = $('body').height()/2;
			var memberCircleHeight = teamList.find('.team-member').height();
			$('.team-member').each(function(){
					membersPositionX.push($(this).position().left);
			});
			function teamTranslateX(value){

					teamList.css({
							'transform': 'translateX('+value+'px)',
							'-webkit-transform': 'translateX('+value+'px)'
					})
			}
			function memberTranslateY(selector, value){
					var unit = value == 100 || value == -100? '%' : 'px' ;
					selector.css({
							'transform': 'translateY('+value+unit+')',
							'-webkit-transform': 'translateY('+value+unit+')'
					})
			}
			teamTranslateX(translateX);
			$('.team-section').on('mousewheel', function(event) {
					// check mouse wheel direction
					if(event.deltaY > 0){ // up (wheel up)

							translateX = translateX > $('.team-section').width() ? $('.team-section').width() : translateX + 50;
							// check positions
							circlesMove();

					}else{ // down (wheel down)
							translateX = translateX < -($('.team-section').width()) ? -($('.team-section').width()) : translateX - 50;
							// check positions
							circlesMove();
					}

					teamTranslateX(translateX);
			});





			function circlesMove(){ // up (wheel down)
					var beforeEnter = $('body').width() - translateX;
					var afterLeave = translateX - centerBoxAreaLeft;
					var spaceBeforeCenter = $('body').width() - centerBoxAreaRight;
					var move;
					$.each(membersPositionX, function(index, item){
							if(beforeEnter >= item){
									move = ((beforeEnter-item) / spaceBeforeCenter) <= 1? ((beforeEnter-item) / spaceBeforeCenter) : 1;
									move = (move * circlesTopPosition) - memberCircleHeight;
									memberTranslateY(teamList.find('.team-member').eq(index), index%2 == 0?  -( move >= memberCircleHeight? move : memberCircleHeight ) : ( move >= memberCircleHeight? move : memberCircleHeight) );
							}
							if(afterLeave < 0 && Math.abs(afterLeave) >= item){
									move = ((Math.abs(afterLeave)-item) / spaceBeforeCenter) <= 1? ((Math.abs(afterLeave)-item) / spaceBeforeCenter) : 1;
									move = ((1- move) * circlesTopPosition) - memberCircleHeight;
									memberTranslateY(teamList.find('.team-member').eq(index), index%2 == 0?  -( move >= memberCircleHeight? move : memberCircleHeight ) : ( move >= memberCircleHeight? move : memberCircleHeight) );

							}
					});

			}
		
		// prevent body scroll when scroll on this section && continue scroll after finish the section scroll
		$('.team-section').on('mousewheel DOMMouseScroll', function(e) {
        var d = e.originalEvent.wheelDelta || -e.originalEvent.detail,
        dir = d > 0 ? 'up' : 'down',
        stop = (dir == 'up' && translateX <= $('.team-section').width()) || (dir == 'down' && translateX >= -($('.team-section').width()));
        stop && e.preventDefault();
    });

	}scrollEvent();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdn.jsdelivr.net/mousewheel/3.1.13/jquery.mousewheel.min.js