verschiedene Animationen mit Skrollr.js für ein Element

Question

Ich habe folgende Struktur meiner Seite:

<div id="skrollr-body"> 
<div class="sections-container" id="sections-portrait"> 
    <div class="section" id="section_1"> 
     Section 1 
     <div class="baloon" 
      data-anchor-target="#section_1 .baloon" 
      data-center-top="bottom: -20%" 
      data-top="bottom: 50%" 
     ></div> 
    </div> 
    <div class="section" id="section_2"> 
     Section 2 
    </div> 
    <div class="section" id="section_3"> 
     Section 3 
    </div> 
    <div class="section" id="section_4"> 
     Section 4 
    </div> 
</div> 
<div class="sections-container" id="sections-landscape"></div> 

Beachten Sie die div mit der Klasse baloon. Ich möchte, dass es von unten nach oben geht (was es gerade tut), und nach einer Weile ein wenig nach unten gehen. Ist es möglich, es mit Skrollr.js zu tun und wenn es ist - wie?

Answer 1

Hier Demo CodePen DEMO
Nun, ich habe nicht Skrollr.js Plugin verwenden, aber versucht, ohne es zu jQuery und Css Wie Abschnitt nach wenigen Sekunden Baloon wird von unten und Mitte auf Scroll

Debounce nach oben bewegt gezeigt wird und webtransitionend src
Funktion von David Walsh: transitionEnd Callback Debounce on wheel

debounce = function(func, wait, immediate) { 
 
    var timeout; 
 
    return function() { 
 
    var context = this, 
 
     args = arguments; 
 
    var later = function() { 
 
     timeout = null; 
 
     if (!immediate) func.apply(context, args); 
 
    }; 
 
    var callNow = immediate && !timeout; 
 
    clearTimeout(timeout); 
 
    timeout = setTimeout(later, wait); 
 
    if (callNow) func.apply(context, args); 
 
    }; 
 
}; 
 

 
// Function from David Walsh: http://davidwalsh.name/css-animation-callback 
 
function whichTransitionEvent() { 
 
    var t, 
 
    el = document.createElement("fakeelement"); 
 

 
    var transitions = { 
 
    "transition": "transitionend", 
 
    "OTransition": "oTransitionEnd", 
 
    "MozTransition": "transitionend", 
 
    "WebkitTransition": "webkitTransitionEnd" 
 
    } 
 

 
    for (t in transitions) { 
 
    if (el.style[t] !== undefined) { 
 
     return transitions[t]; 
 
    } 
 
    } 
 
} 
 

 
var transitionEvent = whichTransitionEvent(); 
 

 
var winH = $(window).height(); 
 
$(document).ready(function() { 
 

 
    $('.section').height(winH); 
 
    var updateLay = debounce(function(e) { 
 
    callback(e); 
 
    }, 500); 
 
    $(window).on('wheel DOMMouseScroll', function(e) { 
 
    updateLay(e); 
 

 
    }); 
 
    obj.textTransiton(); 
 
    animLoop(); 
 

 
}) 
 
var globalSetting = { 
 
    y: 0, 
 
    delta: 0, 
 
    maxScroll: 0, 
 
    moved: false 
 
} 
 

 
function callback(event) { 
 
    var delta = Math.sign(event.originalEvent.wheelDelta) || -Math.sign(event.originalEvent.detail); 
 

 
    globalSetting.y += delta * winH; 
 

 
    globalSetting.delta = delta; 
 

 
    obj.move(obj.textTransiton); 
 

 
} 
 

 
function checkScrollExtents() { 
 

 
    if (globalSetting.y > 0) { 
 
    globalSetting.y = 0; 
 
    } else if (Math.abs(globalSetting.y) > globalSetting.maxScroll) { 
 
    globalSetting.y = -globalSetting.maxScroll; 
 

 
    } 
 

 
} 
 

 
function animLoop() { 
 

 
    globalSetting.maxScroll = obj.selector.height() - obj.selector.find('.section:last').height(); 
 
    checkScrollExtents(); 
 
    obj.scrolls(); 
 

 
    window.requestAnimationFrame(animLoop); 
 
} 
 

 
var obj = { 
 
    'selector': $('#skrollr-body'), 
 
    'current': $('.current'), 
 
    scrolls: function() { 
 
    obj.vertical(); 
 
    }, 
 
    vertical: function() { 
 
    obj.selector.css('transform', 'translateY(' + globalSetting.y + 'px)'); 
 

 
    }, 
 
    textTransiton: function() { 
 
    var baloon = obj.current.find('.baloon'); 
 
    baloon.css('transform', 'translateY(-' + winH + 'px)'); 
 
    baloon.one(transitionEvent, function(event) { 
 
     baloon.css('transform', 'translateY(-' + (winH/2) + 'px)'); 
 
    }); 
 
    }, 
 
    move: function(callback) { 
 

 
    if (globalSetting.delta > 0) { 
 
     obj.Prev(callback); 
 
    } else { 
 
     obj.Next(callback); 
 
    } 
 

 
    }, 
 
    Prev: function(c) { 
 
    if (obj.current.prev().length) { 
 
     var currt = obj.current.prev(); 
 
     obj.updateCurrentModule(currt); 
 
     setTimeout(function() { 
 
     c(); 
 
     }, 1000); 
 
    } 
 
    }, 
 
    Next: function(c) { 
 
    if (obj.current.next().length) { 
 
     var currt = obj.current.next(); 
 
     obj.updateCurrentModule(currt); 
 
     setTimeout(function() { 
 
     c(); 
 
     }, 1000); 
 
    } 
 
    }, 
 
    updateCurrentModule: function(currt) { 
 
    obj.current.removeClass('current'); 
 
    obj.current.find('.baloon').css({ 
 
     "-webkit-transform": "translateY(0px)" 
 
    }); 
 
    currt.addClass('current'); 
 
    obj.current = currt; 
 
    }, 
 

 
};

html, 
 
body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    transition: all 600ms ease-in !important; 
 
} 
 

 
.section { 
 
    position: relative; 
 
    color: white; 
 
    background-size: contain; 
 
    min-height: 100%; 
 
    white-space: nowrap; 
 
    position: relative; 
 
    min-width: 100%; 
 
} 
 

 
.baloon { 
 
    font-size: 10em; 
 
    color: #020000; 
 
    text-rendering: optimizeLegibility; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    bottom: 0px; 
 
    position: absolute; 
 
    margin: 0; 
 
    transition: all 1000ms cubic-bezier(0.32, 0.51, 0.78, 0.34) !important; 
 
    border: 1px solid; 
 
    background-color: white; 
 
    mix-blend-mode: exclusion; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="skrollr-body"> 
 
    <div class="sections-container" id="sections-portrait"> 
 
    <div class="section current" id="section_1" style="background-image: url(http://img13.deviantart.net/83ee/i/2014/145/5/e/naruto_negative_space_poster_by_jde_studios-d7jrnhc.jpg);"> 
 

 
     <div class="baloon"> 
 
     Naruto 
 
     </div> 
 
    </div> 
 
    <div class="section" id="section_2" style="background-image: url(http://www.jeffreydavidson.com.au/images/blogs/naruto-negative-space-posters/sasuke-negative-space.jpg);"> 
 
     <div class="baloon"> 
 
     Sasuke 
 
     </div> 
 
    </div> 
 
    <div class="section" id="section_3" style="background-image: url(https://s-media-cache-ak0.pinimg.com/736x/2f/2f/ef/2f2fefdccc4688ab3d640b65cca02d47.jpg);"> 
 
     <div class="baloon"> 
 
     Kakashi 
 
     </div> 
 
    </div> 
 
    <div class="section" id="section_4" style="background-image: url(http://www.jeffreydavidson.com.au/images/blogs/naruto-negative-space-posters/sakura-negative-space.jpg);"> 
 
     <div class="baloon"> 
 
     Sakura 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="sections-container" id="sections-landscape"></div> 
 
</div>