Next Effect (Slider Version)

index.html

<div class="slider">
        <a href="#" class="arrow arrow-prev">
            <i class="fa fa-chevron-left"></i>
        </a>
        <a href="#" class="arrow arrow-next">
            <i class="fa fa-chevron-right"></i>
        </a>
        <div class="slide-wrapper">
            <div class="slide">
                <h3 class="text">Normal Content Title</h3>
                <p class="text">
                    Mauris quis mi condimentum, porttitor purus ut, luctus leo. Nam id nisl magna. Suspendisse quis condimentum diam. Integer vitae odio mi. Etiam accumsan nisl nunc, id vestibulum elit tincidunt eget. Phasellus in nibh maximus, fringilla justo a, blandit orci.
                </p>
            </div>

            <div class="slide">
                <h3 class="text">Content Title - Large</h3>
                <p class="text">
                    Mauris tempus tincidunt efficitur. Etiam id libero dui. Etiam porta diam venenatis leo eleifend condimentum. Suspendisse blandit efficitur eros non aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Morbi justo est, bibendum in placerat sit amet, tristique ut lorem.
                </p>
            </div>

            <div class="slide">
                <h3 class="text">Hello</h3>
                <p class="text">
                    Etiam urna justo, imperdiet eget vestibulum eu, accumsan in magna. Maecenas id mi tempus, mollis est quis, facilisis sapien. Maecenas cursus massa non tortor cursus dignissim. Aliquam quis ligula fringilla, commodo nibh sed, blandit magna. Etiam feugiat aliquet lacus, nec convallis erat lobortis et.
                </p>
            </div>

        </div>

    </div>

<a class="me" href="https://twitter.com/ozgursagiroglu" target="_blank">@ozgursagiroglu</a>

Next Effect (Slider Version).markdown

Next Effect (Slider Version)

#badUX

Next Effect v1: http://codepen.io/ozgursagiroglu/pen/uajkI

A Pen by Özgür Sağıroğlu on CodePen.

License.

script.js

// http://stackoverflow.com/a/281335
Array.prototype.clean = function(deleteValue) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == deleteValue) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
};

$(function(){
    var $slider = $('.slider'),
        $wrapper = $slider.find('.slide-wrapper'),
        $slides = $slider.find('.slide'),
        slideWidth = $slider.width();

    if(!$slides.filter('.active').length){
        $slides.first().addClass('active');
    }

    var totalWidth = 0;
    $slides.each(function(){
        var $self = $(this),
            width = $self.innerWidth();
        totalWidth += width;

        $self.css('width', width);
    });

    $wrapper.css('width', totalWidth);

    $slider.find('.text').each(function(){
        var $self = $(this),
            text = $self.text(),
            newText = text.split(/[\s,]+/);

        if(newText.length){ newText = newText.clean("") }

        var html = '';
        for(var i in newText){
            var keyword = newText[i];
            if(typeof keyword == 'string'){
                html += '<span class="keyword" data-key="'+ keyword +'">' + keyword + '</span> ';
            }
        }

        $self.html(html);
    });

    $slider.find('.keyword').each(function(){
        var $this = $(this),
            position = $this.position();
        $this.css(position).data('position', position);
    }).promise().done(function(){
        $(this).css('position', 'absolute');
    });


    var blockedClick = false;
    $('.arrow').click(function(e){
        e.preventDefault();

        if(blockedClick == false){
            blockedClick = true;
            slide( $(this).hasClass('arrow-prev') ? 'left' : 'right' );
        }
    });

    var timeout = null;
    var slide = function(direction){

        var $nextSlide, $currentSlide;
        $currentSlide = $slides.filter('.active');

        if(direction == 'right'){
            $nextSlide = $currentSlide.next('.slide');
        }else{
            $nextSlide = $currentSlide.prev('.slide');
        }

        if(!$nextSlide.length){
            blockedClick = false;
            return;
        }

        $currentSlide.removeClass('to-left to-right');

        var translate = slideWidth * ($nextSlide.index());

        $wrapper.css('transform', 'translateX('+ -translate + 'px)');

        var $currentKeywords = $currentSlide.find('.keyword'),
            $nextKeywords = $nextSlide.find('.keyword');

        $nextKeywords.show().each(function(){
            var $next = $(this),
                nextKey = $next.data('key');

            $currentKeywords.each(function(){
                var $current = $(this),
                    currentKey = $current.data('key');

                if(nextKey == currentKey){
                    $current.css($next.position()).css('transform', 'translateX('+ ( direction == 'left' ? -slideWidth : slideWidth) + 'px)');
                }
            });
        }).promise().done(function(){
            var x = 0;

            $currentKeywords.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                ++x;

                if(x == $(this).length){
                    $currentSlide.removeClass('active');
                    $nextSlide.addClass('active');

                    blockedClick = false;

                    clearTimeout(timeout);
                    timeout = setTimeout(function(){
                        $currentKeywords.hide().css('transition', 0).each(function(){
                            var $this = $(this);
                            $this.css($this.data('position')).css('transform', '');
                        }).promise().done(function(){
                            $(this).css('transition', '');
                            blockedClick = false;
                        });
                    },500);
                }
            });
        });

    }

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    margin: 0;
}

body {
    background: #f5f5f5;
}

.slider {
    background: #ffffff;

    overflow: hidden;

    position: absolute;
    top:50%;
    left:50%;

    margin-top: -105px;
    margin-left: -250px;

    width: 550px;
    height: 210px;
    border: solid 1px #eaeaea;
    box-shadow: 0 0 5px rgba(#000, .2);
    border-radius: 3px;

    .slide-wrapper{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;

        transition: all 1s;
    }

    .slide {
        font-family: 'Open Sans';
        font-size: 16px;
        line-height: 1.5;

        padding: 35px;
        //background: #ffffff;
        width: 100%;
        height: 100%;

        position: relative;

        z-index: 1;

        float: left;
        
        > h3 {
            margin-bottom: 5px;
        }

        .keyword{
            opacity: .2;
            transition: all 1s;
        }

        &.active{
            z-index: 2;
            
            .keyword{
                opacity: 1;
            }
        }
    }

    .arrow{
        position: absolute;
        top: 50%;

        z-index: 3;

        width: 30px;
        height: 40px;

        margin-top: -20px;

        color: #222222;
        background: rgba(#f5f5f5, .1);
        font-size: 29px;
        text-align: center;

        > i{
            line-height: 40px;
        }
        
        &.arrow-prev{
            left: -1px;
        }
        
        &.arrow-next{
            right: -1px;
        }
    }
}  

.me{
  display: block;
  padding:15px 0;
  text-align:center;
  
  font-size:15px;
  text-decoration:none;
  
  color:#959595;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" />