I'm using wow.js and animate.css for my homepage.
I read a topic from MDBootstrap and others discussions in which people say that it is bad for SEO.
So I checked in the brwoser and saw that everything with the wow class is in "visibiliy : hidden".
When I use the hack:
jQuery(document).ready(function () {
var scrolled = false;
jQuery(window).on('scroll', function() {
if (!scrolled) {
scrolled = true;
new WOW().init();
}
});
});
The visibility proprety disappear until I scroll.. Everything is working, I guess it's better for the google crawls ??
But the problem is that every wow class on the first screen, for example navigation items, site title, are not working because now I have to scroll to make animations work.
How can I make them work again ?? i tried my own jquery animation (fadeIn etc) but it produces some bugs on the page..
Does someone know how what is the logic to make all wow class work?
MDb contains two animation classes. In my case it was ok to use the same scrolling solution as the wow effects below the first screen and set the animated class to the elements at the top of the page. But this will only work if you know the elements on the viewport after loading the page, otherwise I think you can only handle it your self.
Related
I have a vertical slideshow that scrolls/sticks to the next panel when the user scrolls. Desired effect is https://www.tesla.com but I thought I could achieve this with CSS (example below).
Example 1: https://codepen.io/moy/pen/poNrVdO
The problem is I would like to add a class so I can fade in the text when the next panel becomes 'active' and I'm not sure what the best approach is. Due to the framework this is going into, a non-jQuery solution would be preferable. I tried using http://dbrekalo.github.io/whenInViewport/ but can't get that to play ball at the minute.
import * as whenInViewport from "https://cdn.skypack.dev/when-in-viewport#2.0.4";
var WhenInViewport = window.WhenInViewport;
var elements = Array.prototype.slice.call(
document.getElementsByClassName("slideshow__panel")
);
elements.forEach(function (element) {
new WhenInViewport(element, function (elementInViewport) {
elementInViewport.classList.add("inViewport");
});
});
Update
The JS I was trying to use would only add a class and not toggle (add/remove) when items entered/left the viewport. So I decided to try a few other options. I've used AOS (Animation On Scroll) before but this is also having problems...
Example 2: https://codepen.io/moy/pen/XWNavaO
I think this is done to the overflow-y: auto which is required to get the snap-scroll to work. Can anyone offer an advise on this or would I be better moving away from snap scroll - as it's more hassle than it's worth?
Please, if somebody know, how to build main menu like on that webpage, can you help me?
I really like their menu, namely the fact that when you are scrolling down - it changes . And when you return to top again, its resets to original design. Thanks a lot.
I know how to create menu, edit it, etc. I do not know on what principle works switching of design.
Here we go:
You should do it with jQuery script like this:
This will change the page color to blue when you scroll more than 210px, and will revert back to red if you go back up:
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$("#header_menu").css('background-color', 'blue');
} else {
$("#header_menu").css('background-color', 'red');
}
});
});
Or you can see there code source, open the web page and click right click mouse choose 'Explore'(Prozkoumat in czech language). Here you can watch how works it, it's easy:)
Hope it helps;)
The basic premise of the navigation you reference in your post is scrollTop() ( https://api.jquery.com/scrollTop/ ). The WordPress theme (Avia) used on your reference site has a jQuery function that does the following:
By default, add a class that applies the transparency effect.
'Listen' to the scroll position of the website and, if it is >50px remove the transparency class (allowing the default stylings to take effect). Re-apply the transparency class as needed.
Other than that it's a bit of CSS transition effects to make the change a bit smoother. This particular website relies on jQuery due to it being a WordPress installation, but you can achieve this same effect using any other JavaScript library (or in pure JS if you are so inclined).
How do I slow down the add class event to occur gradually after the hide and show animation in Jquery?
The add class in this instance is read from the CSS file which essentially positions the paragraph. Every occurs sweetly but the add class is too abrupt and fast after the smooth animation.
The js file:
$(".grad").hide().show(3000, function() {
$( this ).addClass("menubar");
});
May be below code useful, without any test I wrote your answer
$(".grad").hide().show(3000, function() {
setTimeout(function(){ $( this ).addClass("menubar"); }, 3000);
});
Nevermind, figured it out myself. switchClass did not accomplish the task that well.
the addClass pointing to class:menubar in css positions the paragraph.
Solution: I renamed grad to menubar in the js file as well as the html file, the same as the class I wanted to introduce after show and hide and shortened everything. In this manner menubar loads gradually from the js as well as from css and animates not only the show and hide but also the css attributes; very cool.
$(".menubar").hide().show(3000);
I've set up a scrolling website (essentially a parallax-styled page, without the parallax effects) where each "page" is just a div that takes up 100% of the screen. But I need some sort of mechanism to 'lock' the scroll into the correct position so that the div will align properly with the user's browser.
If you need an example, Flickr's splash page does this perfectly.
Thanks.
EDIT: Here's a link to the site I'm working on. The code's a bit messy, and some images aren't loading (since they're not hosted yet) but it's there to give you a rough idea of how the site functions.
http://fiddle.jshell.net/99QjJ/
I just tried to build a fast solution: Fiddle
It prevents the normal scrolling and scrolls just to the appropriate offset of the divs:
if(!scrolling) {
scrolling = true;
currentDiv = (scrollDirection == "down" ? currentDiv + 1 : currentDiv - 1)
$("html,body").animate({
"scrollTop":offsets[currentDiv]
},{queue:true,duration:1000,complete:function() {
window.setTimeout(function() {
scrolling = false;
},200);
}});
It's no complete solution but I think this would work.
Another idea would be using one of the thousands of jQuery plugins which make the page scrollable via the arrow keys. I think if each of the divs fits the entire screen size there's no actual need for scrolling "in between".
So you're doing a 'one page' site, correct? Can't you use anchor tags on each element you want to jump to?
You can animate it to make it look pretty with this nice jQuery plugin
I'm working on revamping my website, and the new one can be found on http://beta.namanyayg.com/
There are mainly two things related to scroll on the site:
To check on which 'page' the user is on, by calculating the top offset and scroll position, then adding a class to the page.
To smooth scroll on menu click.
I've written code for both, but there is a lot of lag.
The first one almost always results in lagging. The second one, as a result, lags too. I have included a boolean to check if it's smooth scrolling and disabled the normal scroll events then, but there's not much change.
Do you have any advice on how to improve performance so there is no (or at least, less) lag? Thank you in advance! :)
...Or is it not related to JS at all? I've optimized everything else...
EDIT: Unminified JS at http://beta.namanyayg.com/js/main.js
If you are using underscore, it has an awesome _.debounce function that is excellent for this sort of thing.
To check how much the user has scrolled from the top of the page (i.e. on which 'page' he is at the moment) can be achieved with:
$(window).scroll(function () {
var scrollAmount = $(window).scrollTop(); // in pixels
if(scrollAmount > SOME_AMOUNT)
{
// add required css class
}
});
To scroll smoothly, to some id for example, you could use:
$("html, body").animate({ scrollTop: $("#someID").scrollTop() }, 1000);
These are both jQuery solutions, so you should have jquery library included. There is also a nice jQuery plugin called waypoints that performs these calculations. It might prove useful to you and it has some other nice features and examples.
I have the same problem. I have a scrollable div with thousands of smaller divs. Every time I call scrollTop to get the scroll-position or set it, it sometimes waits at least 1 second.
I read these slides: http://www.slideshare.net/nzakas/high-performance-javascript-2011 (especially slides 138-139) and now I realize that every call to scrollTop, even as a getter, makes javascript relayout the page. This is most likely the cause of delay, but unfortunately I have not found a solution yet, as in a way to call scrollTop without causing relayouts.
Note: I've only been testing on Chrome.
Also read 'Browsers are smart' section of this article: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
I've found an easy solution to the lag with getting scrollTop, just call it inside a scroll-handler and save the result in a variable.
for example in jQuery:
var scrollPos = 0,
element = $('.class');
element.scroll(function(){
scrollPos = element.scrollTop();
});
For the second problem, setting the scrollTop, I reduced the amount of DOM elements by only showing the visible elements. In your case make sure only the visible page(s) are added to the DOM. when scrolling to the next page, in the scroll handler remove the top one (use jQuery .detach) and append the next one to the DOM.