Good Day.
I like all the animation on all elements except <body tag. I believe the time is too long (500ms, maybe?) before the page scrolls up. Until everything loads and then the page scrolls up, there's just a blank page.
Suggestions?
// aos scroll-animation Init
AOS.init({
duration: 50,
once: true,
delay: 50
});
doesn't seem to make any difference.
Related
EDIT: reason for this request. This edit has been added when the solution has been found for the sake of describing my needs. I had a Carousel that showed a logical sequence step 1, step 2, step 3.. That carousel is not a top of page, so I want it to stay stopped / paused until the user sees it and when it will see it, as first, I want the user to see the first slide, step 1. Nevertheless, some users (and they are not few, believe me) don't know about carousels and sliders, so I don't wanna miss their view on the subsequent slides. This is the reason for what follow.
I'm wondering about this
I have a bootstrap 3.1 carousel that is not at top of the home page.
Instead you "reach it" when scrolling down some "bootstrap' rows".
Well I'd like it to keep the carousel stopped / paused until the user will scroll the page down to where the carousel is placed (let's say the carousel height is 500 pixel, when at least the first top 150 pixels are entered in the viewable area)
when those 150 pixel have been scrolled in, the pause / stop should turn to "play" and so, if the pause between each slide is 5000 msec, after 5000 msec the next slide should turn.
According with this solution it is matter of javascript but it is not what I'm seeking for also excuse me but currently I'm not so strong with javascript and jquery, so thank you for any hint with some explanation.
EDIT 01
This script looks to be the correct and also a great solution :-), especially reading the comments at bottom of that page, but as stated above, I miss the knowledge to properly take advantage of it, thank you for any hint.
Here's a method using Intersection Observer API; it will fail silently for IE and other unsupported browsers.
setTimeout(function() {
if (IntersectionObserver === undefined) return;
const carousels = $(".carousel");
if (carousels.length === 0) return;
const RATIO = 0;
// You can set a intersection percentage, such as 0.25 for 25% visible, but
// if you want pixels, I'm using `rootMargin` in the options below
var observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(function(entry) {
jQuery(entry.target).carousel(entry.intersectionRatio < RATIO ? 'pause' : 'cycle');
});
}, {
root: null,
rootMargin: '-150px 0px', // 150px visible on top or bottom of viewport
threshold: RATIO
});
carousels.each(function () {
observer.observe(this);
});
}
});
I went for the long path, self answered myself.
I've tried several plugins, but they were not effective or either they were breaking the Carousel engine.
Researching so much, finally I've landed on this jQuery plugin
http://www.jqueryscript.net/other/jQuery-Plugin-To-Determine-If-An-Element-Is-In-the-Viewport-Viewport-Checker.html
It works pretty fine, straight and as expected and there is a bonus included: the offset I was seeking for!!! (yeeeh!)
Pretty easy to implement
<script src="viewportchecker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel('pause'); /** load page with carousel paused
$('.carousel').viewportChecker({
offset: 200, /** wait for the first 200 pixel of the element
to enter in the viewport
callbackFunction: function(elem){
setTimeout(function(){
$('.carousel').carousel(''); /** remove pause
},500);
}
});
});
</script>
"thank you" to myself :-)
I suppose this would also help the problem when the viewport cuts the carousel in half. ie: With a carousel at the top of the page and you scroll down, forcing the top of browser window to show only the bottom half of carousel.
Currently, when the carousel cycles, the carousel images load to the top of the viewport, not the top of the carousel container.
When you scroll back up, the carousel only displays half the image and the top half is grey. This is very annoying. Will try this to see if it fixes.
I want to have a div with automatic scrolling content when the user scrolls to that point in the website.
It's like this example on JSFiddle
$("#div").animate({ scrollTop: 1000 }, 2000);
With this above example the scrolling happens immediately when the page loads.
My div with the scrolling content is further down on my site, so I want it to automatically scroll when it hits that waypoint. (I'm using jquery-waypoints in my page already).
Assuming you want this scroll animation to happen when #div hits the top of the window:
$('#div').waypoint(function(direction) {
$(this).animate({ scrollTop: 1000 }, 2000);
});
You may want to use that direction parameter to do something different if its value is "up". You may want to use triggerOnce: true to just do the animation once and then never again. It's up to you.
I have a jquery animation set up, the object fades in and slides down from the top of the screen, and then it should keep moving and fade out. Right now it fades in, animates down, then pauses, then completes the animation. I'd really like to get rid of the pause, but I'm not sure how. I have the animation set up as a call back right now. You can see it here:
http://jsbin.com/uniyix/12/edit
thanks for any help I can get on this!
Information can be found here at the Jquery animate() Documentation. More specifically, the easing parameter.
There are two kinds of easing: one is swing (which is default and features an increase of velocity at the beginning of the animation as well as a slow down at the end, which can look like a "pause" if you have multiple animations set) and the other one is linear.
Linear has no slowdown as the speed is constant throughout. The easing parameter can be defined right after the speed parameter.
So this:
$('#example').animate({
'marginLeft' : "+=30",
}, 3000, function() {
});
Would become this:
$('#example').animate({
'marginLeft' : "+=30",
}, 3000, "linear", function() {
});
This should get rid of the pause as the element will be in a constant velocity throughout the entire animation.
I'm using Twitter Bootstrap with fixed layout along with jQuery Masonry on a specific page.
It's working, however starting from the second row the top positions of the divs are miscalculated and are partly covering the elements of the first row.
It looks like the script quits before rearranging the elements.
Strangely, when I open the inspector in Chrome or slightly resize the viewport the divs are jumping to their correct positions. Refreshing the page sometimes helps, sometimes doesn't...
My masonry script:
jQuery(document).ready(function(){
jQuery('.span9').masonry({
itemSelector: '.span3',
columnWidth: function( containerWidth ) {
return containerWidth / 3;
}
});
});
Is this normal behaviour? Should I add window.resize to the above script?
Placing the masonry script in the page itself or in the header, footer doesn't change it's behaviour.
I'm calling masonry.js right after jQuery, before any other Bootstrap js.
Just read the help Section here http://masonry.desandro.com/docs/help.html
The Script runs before all images have been loaded, you have to trigger it after the window loaded
$(window).load(function(){
$('#container').masonry({
// options...
});
});
I am currently building a site which utilises multiple flexsliders. The concept is that when the user clicks a specific button, it shows a flexslider with featured content relevant to the button pressed, which is all pretty simple stuff.
The problem i am having is at the moment, the flexsliders are firing on the click of a button, however whenever a user clicks on a different button, the slider is not reset.
I want to try and make the slider reset to slide 0 on each button click. I have tried using .stop() and some of the callback features within the plugin, but i have had no luck as of yet. Was wondering if anybody else had ever faced this before? (and won..)
the code in the footer.php is pretty standard issue at the moment:
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
});
});
I know it's been long since this question was posted, but it might help somebody.
I actually faced the same problem. After some poking around I managed to get it working using the following code:
// Catch the flexslider context
var slider = $(".flexslider").data("flexslider");
// Unset the animating flag so we can move back to the first slide quickly
slider.animating = false;
// Move to the first slide and stop the slideshow there
slider.flexAnimate(0, true, true);
If you want to return at the first slide, but don't want the animation to stop, just replace the last line with slider.flexAnimate(0);
I believe that the slider.stop() method doesn't unset the animating flag. In my opinion it should, because this flag is used in the flexAnimate() function to check whether to actually slide or not. If the flag is set to false, then the flexAnimate() function will suddenly return.
think the answer might lie in the start callback function. Try something like this (untested)
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
start: function(slider) {
if (slider.currentSlide != 0) {
slider.flexAnimate(0)//move the slider to the first slide (Unless the slider is also already on the first slide);
}
}
});
});
use the new api at line 1056 in flexslider like
' startAt: 0,
//Integer: The slide that the slider should start on. Array notation (0 = first slide)'