0
Nicht sicher, was ich hier falsch mache.Fullpage.js afterSlideLoad - Animation auf Folien wiederverwenden
Ich möchte meine Folienanimationen für jede Folie wiederverwenden, also muss ich nicht für jeden Index kopieren/einfügen.
Ich kann meine Konsole logs für jede Folie mit Ausnahme von 0 (wie es sollte), aber die Animationen erscheint nur auf der ersten Folie danach (1), Warum?
HTML:
<div class="section section-bg product-development">
<a href="#digital-innovation" class="btn btn-small process-anchor pos-bottom">digital innovation</a>
<div class="slide main-slide">
<div class="slide-svg-container"><img src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h1>PRODUCT DEVELOPMENT PROCESS</h1>
<p>Our product development framework is designed to invent, build and bring digital products to market, using methods from design thinking, service design and lean startup methodology.</p>
<p>Through a carefully constructed route, we will take you all the way from inventing and designing your digital product, to building and testing it and to planning and promoting a successful launch in the market.</p>
<p>
<a class="btn btn-extra-small ghost" href=" #product-development/1">Frame it</a>
<a class="btn btn-extra-small ghost" href=" #product-development/2">Think it</a>
<a class="btn btn-extra-small ghost" href=" #product-development/3">Design it</a>
<a class="btn btn-extra-small ghost" href=" #product-development/4">Build it</a>
<a class="btn btn-extra-small ghost" href=" #product-development/5">Test it</a>
<a class="btn btn-extra-small ghost" href=" #product-development/6">Market it</a>
<a class="btn btn-extra-small ghost" href=" #product-development/7">Tweak it</a></p>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Frame it</h2>
<p class="is-animated">We work strategically to solve every task. But we don’t do it alone. We do it together with our clients. Collectively, we frame your challenges and needs. We explore what the problem is, who we are solving it for. And we define your business strategic and tactical objectives.</p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Think it</h2>
<p class="is-animated">We work conceptually in everything we do. We generate ideas and create concept solutions to solve the challenge and accommodate your objectives. This is done through a customer-centric perspective making sure that the concepts always aim for excellent customer experiences.</p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Design it </h2>
<p class="is-animated">We put the concepts into action, visualizing their look-and-feel, benefits, features, functionality etc. Designing great products is about designing great experiences across touchpoints. It is storytelling and visualization. It is about designing content and designing digital. </p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Build it</h2>
<p class="is-animated">Technical aspects of the digital product are incorporated from the get go to secure the sustainability of our solutions. In the production phase, we transform design into solution through front-end and back-end development. We transform tested prototypes into beta products.</p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Test it</h2>
<p class="is-animated">We make sure that the digital product lives up to its purpose and objectives on a strategic, communicative and technical level. Before the beta launch, we set up analytics and performance metrics in accordance with your business objectives and conduct both user and browser testing.</p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Market it </h2>
<p class="is-animated">The digital product is prepared for external roll-out. We plan the launch of your new digital product with defined routes to the market. This entails a blueprint or game plan, laying out the goals and/or KPIs for the launch. This entails establishing a go-to-market plan and developing campaigns.</p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Tweak it</h2>
<p class="is-animated">We won’t leave you hanging. During product development, we’ve set set up analytics and metrics to measure the performance and impact of the digital product. Thus, we make the necessary improvements when moving from bra til version 1.0.</p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
</div>
JS:
$('#fullpage-process').fullpage({
//Scrolling
scrollingSpeed: 1000,
scrollBar: false,
anchors:['process-home', 'product-development', 'digital-innovation', 'get-in-touch'],
easing: 'easeInOutCubic',
continuousVertical: false,
autoScrolling: true,
css3:false,
responsiveWidth: 768,
//Navigation
slidesNavigation: true,
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
var $slideAnimation = $('.slide .is-animated')
if($('.slide.active').index() > 0){
$slideAnimation.slice(0,6).css({animationTimingFunction: "ease-in-out"}).addClass("animated");
console.log("slide loaded" + slideIndex);
//image
$slideAnimation.eq(0).addClass("fadeInDown").css({
animationDelay: "0.0s",
animationDuration: "0.750s"
});
//h1
$slideAnimation.eq(1).addClass("fadeInUp").css({
animationDelay: "0.0s",
animationDuration: "0.750s"
});
// text
$slideAnimation.eq(2).addClass("fadeInUp").css({
animationDelay: "0.500s",
animationDuration: "0.750s"
});
// btn back
$slideAnimation.eq(3).addClass("fadeIn").css({
animationDelay: "0.750s",
animationDuration: "0.750s"
});
// btn tasks
$slideAnimation.eq(4).addClass("fadeIn").css({
animationDelay: "1.0s",
animationDuration: "0.750s"
});
// btn targets
$slideAnimation.eq(5).addClass("fadeIn").css({
animationDelay: "1.250s",
animationDuration: "0.750s"
});
}
}
});