I am currently using the fullpage.js plugin on a test website I designed with webflow. Everything worked correctly until I included the plugin. Now, the scrolling interactions of webflow don't work anymore.
I think the two javascript files kind of interfere with each other, limiting functions of the other one to work correctly. I would love to fix this but I really don't know how.
This is the site without the fullpage.js included. This is the site with the fullpage.js included. As you can see, in the first example the paragraphs fade in and out on scrolling. In the second example they don't. The paragraphs simply stay in their initial appearance state which is opacity = 0. I really would love to see the fullpage.js working side by side with the webflow interactions.
_
This is the html code:
<body>
<div class="pagewrap">
<div class="section blue01">
<div class="w-container">
<p data-ix="scroll-fade-in"></p>
</div>
</div>
<div class="section blue02">
<div class="w-container">
<p data-ix="scroll-fade-in"></p>
</div>
</div>
<div class="section blue03">
<div class="w-container">
<p data-ix="scroll-fade-in"></p>
</div>
</div>
</div>
</body>
_
This is the javascript code:
<script type="text/javascript" src="js/webflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.pagewrap').fullpage({
'verticalCentered': true,
'css3': true,
'navigation': true,
'navigationPosition': 'right',
});
});
</script>
_
This is the CSS code:
.section.table,
.slide.table {
display: table;
width: 100%;
}
.tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.easing {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.section {
height: 100vh;
}
.section.blue01 {
background-color: #3cb7e8;
}
.section.blue02 {
background-color: #3ccbe8;
}
.section.blue03 {
background-color: #3ce2e8;
}
html.w-mod-js.w-mod-no-ios *[data-ix="scroll-fade-in"] {
opacity: 0;
}
_
This is where you can find the two included javascript files:
jaroquastenberg.de/_x/help/01/js/webflow.js
jaroquastenberg.de/_x/help/01/js/jquery.fullPage.js
_
Is there maybe anyone who is good at javascript and can find out where the two scripts conflict with each other?
Thanks in advance!
Jaro
You'll find the answer in fullPage.js FAQs:
jQuery scroll event doesn't work
Same answer as Parallax doesn't work with fullpage.js
Also, consider using the callbacks provided by fullpage.js such as afterLoad, onLeave, afterSlideLeave and onSlideLeave detailed in the docs or the class added to the body element containing the active section/slide.
And:
Parallax doesn't work with fullpage.js.
Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don't want to use the auto-scrolling feature.
Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.
If you just want your text to fadeIn or out, I would use the CSS class added to the body on page change. But feel free to use the callbacks as well combined with javascript or jQuery to create your effects.
I solved how to run SCROLL animations in WEBFLOWE if you use FULLPAGE.JS. To scroll ANCHOR, after refreshing for each ANCHOR, refresh the scrolla position as follows:
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['01', '02', '03', '04', '05'],
animateAnchor: true,
easing: 'easeInOutCubic',
scrollingSpeed: 600,
scrollOverflow: true,
scrollOverflowReset: true,
//
afterLoad: function(origin, destination, direction){
var loadedSection = this;
//refresh scroll position
$.fn.fullpage.setAutoScrolling(false);
$.fn.fullpage.setAutoScrolling(true);
//
if(origin.anchor == '01'){
}
if(origin.anchor == '02'){
}
if(origin.anchor == '03'){
}
if(origin.anchor == '04'){
}
if(origin.anchor == '05'){
}
}
});
});
Related
I am new to website design and have a question I'd like to ask. I have tried to use velocity.js to achieve this with failure. I am sure there is a rather simple css solution for what i want. I just want the previous div to "fade" and the new div that's scrolled to, to fade in with greater opacity. Open to any jQuery examples as well.
Here is my code for the section in question:
html:
<section id="services">
<h2 class="pb-5">Services We Offer</h2>
<div id="service1">
<h2>Service 1</h2>
</div>
<div id="service2">
<h2>Service 2</h2>
</div>
<div id="service3">
<h2>Service 3</h2>
</div>
</section>
css:
#services{
}
#service1{
height: 100vh;
background-color: rgb(44, 49, 90);
}
#service2{
height: 100vh;
background-color: #267481;
}
#service3{
height: 100vh;
background-color: #373f24;
}
I am sure there is a rather simple css solution for what i want
Unfortunately, that is not the case. CSS can perform animations, but if scrolling is involved in any way, JS is required.
You could use something like animate.css to control your CSS animations and then use wow.js to make them load on scroll.
As before stated by other answers and comments you cannot manipulate the scroll event in css alone but here is a simple jquery example that may help you. You can add and remove classes on scroll and you can add an animation to the css to control the opacity of your div.
$(window).on("scroll", function(){
var scrollTop = $(this).scrollTop();
$('.scrollDiv').each(function(){
var el = $(this);
var offsetTop = el.offset().top;
if(scrollTop > offsetTop){
el.addClass("scrolled");
}else{
el.removeClass("scrolled");
}
});
});
.scrollDiv{
height:100vh;
transition:opacity 500ms ease-in-out;
opacity:0.2;
}
.scrollDiv.scrolled{
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollDiv" style="background:green;"></div>
<div class="scrollDiv" style="background:red;"></div>
<div class="scrollDiv" style="background:blue;"></div>
<div class="scrollDiv" style="background:yellow;"></div>
This is frustrating me to no end. Before I post the code, here's a summary:
The goal, in simple terms: when I double click X, I want it to fade out; when I click Y, I want X to fade in.
The method: I'm using CSS to create the actual fade-in and fade-out "animations." I'm using JavaScript to apply the classes when necessary using a little trickery.
The problem: the fade-in transition doesn't work -- the element just appears instantly. What is driving me insane is the fact that the fade-in, when instantly added back onto a faded-out object, works perfectly. I'll explain this better as a comment in the JS code.
(Yes, I've added opacity: 1 and transition: opacity onto the base elements. It had no effect at all.)
The code:
CSS
*.fade-out {
opacity: 0;
transition: opacity 400ms;
}
*.fade-in {
opacity: 1;
transition: opacity 400ms;
}
*.hide {
display: none;
visibility: hidden;
}
JavaScript
$( '#ArtistEmblem' ).on( 'dblclick', function() {
fadeOut($( '#ArtistEmblem' ));
fadeIn($( '#btnShowLogo' ));
});
$( '#btnShowLogo' ).on( 'click', function() {
fadeOut($( '#btnShowLogo' ));
fadeIn($( '#ArtistEmblem' ));
});
function fadeOut(element) {
element.addClass( 'fade-out' );
setTimeout( function () {
element.addClass( 'hide' );
/*
* I tried immediately adding the 'fade-in' class here
* and it worked -- as soon as the element faded out, it faded
* back in (using the CSS transition). However, outside of this,
* it REFUSES to work; everything appears instantly
*/
console.log('timer triggered');
}, 400);
}
function fadeIn(element) {
element.removeClass( 'hide' );
element.removeClass( 'fade-out' );
element.addClass( 'fade-in' );
}
Relevant HTML
<div id="ArtistEmblem">
<img src="img/logo_artist_2.png" />
</div>
<div id="PopMenu" class="collapse">
<article>
<header>
<b>Debug Menu</b>
</header>
<section>
<button id="btnOpenOverlay">Open Overlay</button>
<button id="btnShowLogo" class="hide">Show Logo</button>
<button id="btnClose">Close Menu</button>
</section>
</article>
</div>
I apologize if this is something obvious but I've wasted far too much time trying to solve it. I am also open to better, faster, or more efficient solutions if that would be the best answer. Thanks in advance!
The problem is that the initial opacity of "hidden" element is 1 by default. You just need to set it to 0. And also remove display: none –
*.hide {
opacity: 0;
}
Also I would do a little refactoring and remove setTimeout:
$('#ArtistEmblem').on('click', function() {
fade($('#btnShowLogo'), $(this));
});
$('#btnShowLogo').on('click', function() {
fade($('#ArtistEmblem'), $(this));
});
function fade(inElement, outElement) {
inElement.removeClass('hide');
inElement.addClass('fade-in');
outElement.removeClass('fade-in');
outElement.addClass('fade-out');
}
If you don't want the hidden element to occupy space and you want it to be displayed-none, then you need to set display: block before starting the fadeOut.
I know you're asking for a JS heavy answer, but I highly recommend toggling a class of "active", "open" or something similar and using CSS with the transition. Less is more here.
Here's an example fiddle of something I've transitions not only the opacity, but also the z-index. That's the key with these transitions if you intend on having any elements below such as buttons that require hovering, clicking, etc.
JS Fiddle
Key parts:
.container {
z-index: -1;
opacity: 0;
transition: z-index .01s 1s, opacity 1s;
}
.container.active {
transition: z-index 0s, opacity 1s;
z-index: 500;
opacity: 1;
}
EDIT
I was just messing around with this type of thing for my own project, and observing how beautiful Stripe handles their navigation bar. Something so simple changes everything, and that's pointer-events. If you're okay with its support, (notable no ie. 10) this is infinitely easier to integrate. Here's another fiddle of the simulation in a nav bar.
The key part is pointer-events: none, as it ignores click events if set to none, almost as if it wasn't there, yet visibly it is. I highly recommend this.
https://jsfiddle.net/joshmoxey/dd2sts7d/1/
Here is an example using Javascript Animate API. Animate API is not supported in IE/Edge though.
var element = document.getElementById("fade-in-out")
var button = document.getElementById("x")
button.addEventListener("click", function(event) {
element.animate([{opacity: 1, visibility: "visible"},{opacity: 0, visibility: "hidden"}], {duration: 2000})
setTimeout(function() { element.remove() }, 2000)
})
button.addEventListener("dblclick", function(event) {
element && element.animate([{opacity: 0}, {opacity: 1}], {duration: 2000})
})
<input id="x" type="button" value="Click here" />
<div id="fade-in-out"> FADE ME </div>
I'll start linking you the website which I'm referring to.
This one instead is an Official website which has this feature already up and working, maybe you'll understand better what I mean hopefully!
I've made 2 sections, and applied a scroll that needs just a single mouse scroll to get automatically to the next section.
But in this page, I have a table in the 2nd section, a long one, so I'd prefer to disable that fixed view of the section and enable the normal scroll in order to see the whole table.
But, I'd like to be able to switch back to the other scroll when I'll scroll up til the end of the second section, ready to go back to the 1st.
This is my JS script:
$(document).ready(function() {
$('#fullpage').fullpage({
css3: true,
scrollingSpeed: 600,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
//Design
controlArrows: true,
verticalCentered: true,
sectionsColor: ['#ccc', '#fff', '#cfc'],
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
});
});
I am using FullPage to do this, maybe some of you already know it.
EDIT:
This is the body setup, 2 sections, #first and #second, each one inside a div of class .section, and both divs inside the div #fullpage:
<div id="fullpage">
<div class="section" id="first">
<p style="color:#fff; margin-bottom: 50px; font-size: 5em; text-align: center;">Staff</p>
</div>
<div class="section" id="second">
<!-- Capo -->
<table>
...
</table>
</div>
</div>
I can't do much more for you, this is a fiddle! with a hack to your problem, more than a solution, but hope it inspire you to find a much better aproach and solution
jQuery:
var sec=0;
$('#first').on('mousewheel', function(event) {
console.log('scroll, '+sec+", "+$("#fullpage").scrollTop());
if(sec == 0 && $("#fullpage").scrollTop()!=0){
$("#first").slideUp(300,function(){
$("#second").show(function(){
$("#second").scrollTop(1);
});
});
}
});
$('#second').on('mousewheel', function(event) {
if(sec==0){
sec=1;
}
console.log($("#second").scrollTop());
if($("#second").scrollTop() == 0){
sec=0;
$("#second").hide();
$("#first").slideDown(300, function(){
$("#fullpage").scrollTop(0);
});
}
});
and the addition to your CSS:
#first{
margin-top:0px;
margin-left:0px;
height:401px;
overflow-y: auto;
}
#second{
display:none;
margin-top:0px;
margin-left:0px;
height:100%;
overflow-y: auto;
}
#fullpage{
height:400px;
overflow: hidden;
overflow-y: auto;
}
I really love programming, but got my own software to develop and maintain ;)
I've got my hover working - but i'm interested in trying to make it more efficient as it does seems to 'lag' when it's finding the .overlay div. I also had the issue where I was animating all .overlay divs on a page, which I consider to be quite a noob mistake.
Anyway, let's learn how to make the below better!
jQuery:
// get aside feature
var aside_feature = $('aside .feature');
// on hover, fade it in
$( aside_feature ).hover(function() {
// get the overlay div
var feature_overlay = $(this).find('.overlay');
$(feature_overlay).stop().fadeIn();
// on hover out, fade it out
}, function() {
$(this).find('.overlay').stop().fadeOut();
});
Markup:
<aside>
<div class="feature">
<div class="overlay">
button
</div><!-- overlay -->
<div class="text">
<p>text</p>
</div><!-- .text-->
<div class="image">
<figure>
<img src="" alt="">
</figure>
</div><!-- .image -->
</div><!-- .feature -->
</aside><!-- aside -->
Fiddle: http://jsfiddle.net/9xRML/5/
Edit - Final Code
Thanks #Shomz, and #Afro.
Final code choices were to use tranisitons, and coupled with modernizr detection for transitions, I changed my hidden overlay div to opacity: 0; *display:none; and javascript as a fallback:
CSS
.overlay {
*display: none;
opacity: 0;
transition: 0.4s all linear;
}
.overlay:hover {
opacity: 1;
}
jQuery
$(function () {
/*=====================================
= Feature overlay =
=====================================*/
if (!Modernizr.csstransitions) {
// get aside feature
var aside_feature = $('aside .feature');
// on hover, fade it in
$( aside_feature ).hover(function() {
$(this).find('.overlay').stop(true, true).fadeIn();
// on hover out, fade it out
}, function() {
$(this).find('.overlay').stop(true, true).fadeOut();
});
}
});
With risking of having my answer out of scope here, if you want to really get performance, you should switch to CSS animations. It's totally possible with your example by setting the default opacity of the overlay to 0 (instead of display: none;) and making it show up on .feature:hover. The trick is to add the transition property like this:
// applies a 4ms transition to any possible property with no easing
transition: all .4s linear;
See the whole example here: http://jsfiddle.net/9xRML/6/
See a nice article about the performance difference (CSS vs. JS) here: http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/ (there are many more, of course)
I think I have solved your issue using the same HTML but changing the following:
JQuery
$('aside .feature').hover(function() {
$(this).find('.overlay').stop(true, true).fadeIn();
}, function() {
$(this).find('.overlay').stop(true, true).fadeOut();
});
CSS
.feature {
background: #ccc;
}
.overlay {
display: none;
}
This means the overlay will only display on hover.
Details on .stop() can be found here.
.stop(true, true)
We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain.
DEMO
I'm trying to create an effect with jQuery where on mouse over of my initials on the page in the header, the div they are in expands (using jQuery animate) and the text of my full name fades in from each initial.
I have tried a variety of things but am not sure what is the best way to do this. I'm a bit stuck. I'm currently trying to get it going by having the initials of my name "OW" in two separate divs and then the remainder of my name to make up "wen" and "illiams" in between those initals. Like so:
<div class="initialF inlinediv">O</div>
<div class="fullF inlinediv">wen</div>
<div class="initialL inlinediv">W</div>
<div class="fullL inlinediv">illiams</div>
I thought it would work to use jQuery slideLeft and .fadeIn to get the text to slide in from the left as well as fading to look like the text is emerging from the initials but the animations was jumpy and would go onto a second line while the div was still expanding. I am using the below jQuery to detect the mouseIn/Out events:
<script>
$(".brand").mouseenter(function() {
$('.brand').animate({width: '160px'});
$('.fullF').fadeIn("slow");
});
$(".brand").mouseout(function() {
$('.brand').animate({width: '36px'});
$('.fullF').fadeOut("slow");
});
</script>
The alternatives I have tried were using jquery.lettering.js to help with it but there seemed to be some issues with that. Any suggestions to push me in the right direction would be useful and my site with a partially working example is here:
http://192.241.203.146/
Here's one using css transitions rather than jquery animate: http://jsfiddle.net/S58Se/2/
<div class='branding'>
<span class='initial'>O</span><span class='hidden nameFull wen'>wen</span>
<span class='initial'>W</span><span class='hidden nameFull illiams'>illiams</span>
</div>
span {
display: inline-block;
overflow: hidden;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
}
.wen { width: 36px; }
.illiams { width: 160px; }
span.hidden {
width: 0px;
opacity: 0;
}
$('.branding').hover(
function() { $('.nameFull').removeClass('hidden'); },
function() { $('.nameFull').addClass('hidden'); }
);
Or you can do away with the javascript altogether with this: http://jsfiddle.net/S58Se/3/
remove the js and add these css statements:
.branding:hover .wen {
width: 36px;
opacity: 1;
}
.branding:hover .illiams {
width: 160px;
opacity: 1;
}
... just because I think it's neat.
A good way to go about this is to just expand the use of your call to the animation method by adding another property to the object you are passing in. So instead of calling an extra method (fadeIn) you just handle it all in one fell swoop:
$('.brand').on({
'mouseenter' : function () {
$('.nameFull').stop().animate({
'width' : '200px',
'opacity' : '1'
}, 500);
},
'mouseleave' : function () {
$('.nameFull').stop().animate({
'width' : '0',
'opacity' : '0'
}, 500);
}
});
You'll notice I'm also using 'on' instead of the 'hover' or 'mouseenter' and 'mouseleave' methods. In most recent versions of jQuery those methods just reference 'on', so it's better to just cut out the middle man and do it all in one place.
I'm not sure if this exactly fits your design, but I made a Codepen to demonstrate the code in action: http://codepen.io/Tristan-zimmerman/pen/lnDGh
Style the hidden divs position:absolute, and when show them:
'show' them first, to set them visible
then position them (next to your 'launching' div), using jQuery.position();
set the animation going.
Essentially you want them 'absolute' to avoid them thunking in/out & changing your existing flow. position() must be called after making the element visible, and then you should have appropriate starting conditions to kick off your animation.
Or you could try using <span>' for the incoming text and/or displaying as inline-block, which may help avoid the "incoming" kicking things down a line. HTH.
I think what you are looking for is something like this: JSFiddle
html:
<div class="brand">
<div>O<span class="full">wen </span>W<span class="full">illiams</span></div>
</div>
jq:
$('.brand').hover(function(){
$(this).stop().animate({width: '160px'},'slow',function(){
$(this).children('div').children('.full').stop().fadeIn('slow');
});
},function(){
$(this).children('div').children('.full').stop().fadeOut('slow',function(){
$(this).parent().parent().stop().animate({width: '36px'},'slow');
});
});
css:
.full{
display: none;
}
note: there is a simple bug that happens in a specific case and I'm working on it.
regards,