Next Effect

index.pug

- var pages = []
- pages.push( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in risus quis quam mollis egestas vitae in mi. Sed euismod ut quam eu ultricies. Curabitur id nunc rutrum, ultricies massa vel, tincidunt nisl. Maecenas ac dui ornare, fermentum orci sit amet, ultrices metus. Maecenas ac ullamcorper augue. Proin sapien nunc, condimentum eget blandit at, congue non leo. Curabitur ullamcorper mi eros, id scelerisque quam egestas et. Aliquam egestas, leo ac viverra mollis, elit ipsum egestas justo, id faucibus metus dui sed elit. Pellentesque sed libero nec nibh dignissim tincidunt a vel est. Aenean blandit augue quis turpis ultrices convallis." )
- pages.push( "Quisque tincidunt libero eros, et vulputate tortor sagittis non. Duis ullamcorper tortor ut tortor varius consequat. Vivamus suscipit consectetur fringilla. Etiam tristique porta elit id lacinia. Nam porta viverra adipiscing. Nullam gravida fermentum odio at ultrices. Cras et massa massa. Nam ligula mi, dignissim sit amet lectus eget, accumsan egestas metus. Aenean euismod id neque eget eleifend. Aliquam elementum blandit magna, a dapibus ipsum hendrerit vel. Duis ornare, lectus ut lobortis eleifend, ligula purus varius massa, a dictum tortor nulla eget massa. Sed sed augue a nunc faucibus lacinia sed vitae tortor. Curabitur non congue nisl, ac sodales erat. Morbi purus tortor, viverra vitae diam et, interdum dictum lectus. Donec at lacus est." )
- pages.push( "Suspendisse nec metus adipiscing justo vehicula suscipit. Integer et ultrices erat. Duis id mauris dapibus, vulputate libero at, condimentum urna. Maecenas sed pretium quam. In nec molestie turpis. Donec vel rhoncus diam. Quisque at vehicula eros. Cras turpis nisl, commodo nec tincidunt ac, feugiat vitae risus. Nunc sit amet gravida lectus, quis pellentesque sem.")




section
    div
        h1 Next Effect
        a#next(href="#") Next »
    each page, ind in pages
        article(class="#{ ind == 0 ? 'current':'' }")= page


footer
  a(href="https://twitter.com/ozgursagiroglu") @ozgursagiroglu

next-effect.markdown

Next Effect

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

License.

script.coffeescript

$ ->

    $articles = $('article')
    $articles.each ->
        $self = $ @

        newText = ''
        newText += "<span data-value='#{word}'>#{word}</span> " for word in $self.text().split ' '
        $self.html newText

    $articles.each ->
        $(this).find('span').each ->
            $self = $ @
            $offset = $self.offset()


            $self.css(
                top: $offset.top
                left: $offset.left
                width: $self.width()
                height: $self.height()
            ).attr
                'data-offset-y': $offset.top
                'data-offset-x': $offset.left

        $(this).addClass 'ok'


    $('#next').click (e)->
        $current = $articles.filter '.current'
        $nextPage = `(next = $current.next('article')).length ? next : $articles.eq(0)`

        $current.find('span').addClass 'mute'

        $nextPage.find('span').each ->
            $self = $ @
            $value = $self.data 'value'
            if ($elem = $current.find( "span[data-value='#{$value}']:not(.set)" )).length
                $selfOffset = $self.offset()
                $elem.eq(0).css(
                    top: $selfOffset.top
                    left: $selfOffset.left
                ).addClass('set').removeClass 'mute'


        $current.addClass('mute')
        setTimeout ->
            $current.removeClass 'current'
            $nextPage.addClass 'current'

            setTimeout ->
                $current.removeClass('mute').find('span').removeClass().each ->
                    $self = $ @
                    $self.css
                        left: $self.data 'offset-x'
                        top: $self.data 'offset-y'
            , 1000
        , 1100

        e.preventDefault()

scripts

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

style.scss

@import "compass/css3";

@import "compass/css3";

body{
    background: #f1f1f1;
    font-family:"Open Sans";
}

section{
    width  : 500px;
    margin : 50px auto;
}
h1{
    display : inline-block;
}
#next{
    display : inline-block;
    float : right;
    line-height: 85px;
    
    font-size:20px;
    color:#36c;

    text-decoration: none;
}
article{
    font-size:20px;
    color:#454545;

    @include transition(opacity 1000ms);

    &:not(.current){
        opacity : 0;
    }

    &.ok{
        span{
            position : absolute;
        }
    }

    &.mute{
        span.mute{
            @include opacity(0);
        }
    }

    span{
        display : inline-block;

        @include transition-property(top, left, opacity);
        @include transition-duration(1000ms);

        &.mute{
            @include opacity(.3);
        }
    }
}

footer{
  position:absolute;
  top:550px;
  left:0;
  width:100%;
  text-align:center;
  
  > a{
    font-size:12px;
    color:#a0a0a0;
  }
}

styles

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />