What's up?
I'm looking for a while for a solution or a tutorial to trigger a css3 animation using Jquery.
I know I can add a class to the div to animate it with css3. But I want to add the class only when reaching a div ID ! Not when I reach XX pixels from the top.
Example: Skills bars in http://themes.swiftpsd.com/index.php?theme=flexform
May someone help me or give me a great tutorial?
Btw, you rock guys!
Cheers,
Jhon
This was a fun one, jsFiddle
$(document).scroll(function () {
var y = $(this).scrollTop();
var x = $("#myDiv").position();
if (y > (x.top - 50)) { // -50 so things don't overlap
$(".magic").addClass(
"bounceInRight");
}
else {
$(".magic").removeClass(
"bounceInRight");
}
});
Animation from Animate.CSS
Related
I was trying to change background-image while scrolling using only CSS3 but i failed. I need help how to do it on css3 only, not js.
I need to change background opacity of one image to zero and another to 1 having 5 breakpoints, while scrolling page. But i don't know how to process scrolling.
Will be thankful for help)
jQuery(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('html').addClass('scrolled');
}else{
jQuery('html').removeClass('scrolled');``
}
});
http://jsfiddle.net/pZrCM/
I am looking at websites for inspiration for my new start ups homepage. I saw https://www.pactcoffee.com/ and their home page features a full background image for the header and the nav bar is transparent then it becomes a solid color nav bar as you scroll down. I have only been able to set up the CSS for the site but I don't understand what to do to have the change in nav bar color.
You can do something like this...
http://jsfiddle.net/ojcqbLr2/
Check the Fiddle to see the rest of the code... like the CSS.
This JS will do this.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('.topMenu').fadeIn();
} else {
$('.topMenu').fadeOut();
} });
By the way, I found this info by search.
Show div on scrollDown after 800px
I just made edits to the code so it was at the top and not bottom.
Best of luck.
I have found that you can set two divs. One of which will be display set to none.
$(document).scroll(function () {
var headerHeight = $('header').height(),
s = $('.nav'),
y = $(this).scrollTop();
if (y > headerHeight) {
$('.navLong').fadeIn();
$('.nav').fadeOut();
} else {
$('.navLong').fadeOut();
$('.nav').fadeIn();
}});
This allows one div to disappear when one appears and vice versa. A working example is can be found in the DEMO
I have managed to use the position:fixed setting of CSS/CSS3 before and worked quite well!
I saw this a few days ago and was wondering how did they achieve the effect that happens when you scroll down, where the menu bar is in one position before you scroll and then goes to the top where it locks itself down.
See link - http://www.cssportal.com/ < scroll down on any page and observe the top blue menu.
I have tried to look in the source of the page but I cant make head or tails.
Does anyone know what this effect is called?
It's done with javascript, to add a css class that contains position:fixed and other positioning styles to achieve what you want.
It's not complicated. Here is a jquery plugin: http://stickyjs.com/
This is how I did it a few years ago:
var menu_bar = $("#menu");
var top = menu_bar.offset().top;
var detached = false;
$(window).scroll(function (e) {
if ($(this).scrollTop() >= top) {
if (!detached) {
detached = true;
menu_bar.addClass('fixed');
}
} else {
if (detached) {
detached = false;
menu_bar.removeClass('fixed');
}
}
});
I wrote jsfiddle example for better explanation, so, how to make red bars fill the whole height of .frame? And may be there are any absolutely different better way to make things like this?
Positioned elements are no longer part of the layout, so they have no idea what the dimensions of the parent element are. You need to use JavaScript to do this.
I solve it myself. JSfiddle demo.
var move_bookmark = function(){
var sh = parseInt($(this).css('height').replace('px',''));
var ph = parseInt($(this).parent().css('height').replace('px',''));
if (sh%2==0)//this is for solving [this problem] -
//http://math.stackexchange.com/questions/183018/pixel-rectangle-precise-rotating
{
if(ph%2!=0)
{
ph++;
$(this).parent().css('height',ph+'px');
}
}
else
{
if(ph%2==0)
{
ph++;
$(this).parent().css('height',ph+'px');
}
}
$(this).css('width',ph+'px');
var sw = ph;
var offset = parseInt(ph-sw/2-sh/2)+'px'
console.log(sw+"/"+sh);
$(this).css('top',offset);
$(this).css('left',-sw/2+sh/2+'px');
$(this).parent().css('padding','0px 0px 0px '+sh+'px');
}
$('.bookmark').each(move_bookmark);
See the following post for a picture highlighting my question and a potential solution:
CSS overflow-y:visible, overflow-x:scroll
However, this strategy breaks when you actually move the scrollbar. In the suggested implementation (position: fixed;), the tooltips display next to child div in its position pre-scroll. So, as you scroll new child-divs into view, the tooltips begin falling off the bottom of the page.
See here for a demo of the bug: http://jsfiddle.net/narcV/4/
Any ideas how I can make the tooltips display next to the child div at all times?
I ended up implementing this using javascript, using the getPos function from this question.
The end product looks like:
var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
var hovered = e.srcElement;
var pos = getPos(hovered);
pos.x += hovered.offsetWidth;
pos.y -= scrollPanel.scrollTop;
tooltip.style.setProperty('left', pos.x);
tooltip.style.setProperty('top', pos.y);
}
Basically, I calculate where on the page the node is currently displayed (taking into account the scrollbar position), and manually place the tooltip in the right spot on the page.
Too bad there's no elegant/CSS way to do this, but at least this works.