How to use jquery to fly in a div based on the current position id

Hi all,

I have searched all over internet (meaning Google and what that lead me to), and I have yet to find an easy way to just fly in a div. Basically if each of my major divs are based on an ID I should be able to modify the css and jquery to “fly in” elements of that div. So for instance on the bootstrap I may have three circle headings which I want to fly in and once I scroll past them fly out until the next ID fly’s in.

I have looked at almost a dozen tutorials and scripts for parallax sites and various jquery animations but I have not found what I want. most of the ones that are useful require a click. If someone will be so kind to point me in the direction where they can show me how its done for one div ID for instance the three circles (marketing section) in bootstrap I think I will be able to do the the other sections.

I prefer something that can be driven through css rather than messing with jquery

Thank you in advance for your time in assistance

Hi saudkazia! I’m not sure what you mean by “fly in”, can you point to an example or describe it another way?

basically one element would come from the left really fast another will come from the right and another from the top really fast. so that it falls in place. and once that div has lost visibility, it would fly out the way it came in.

I think you mean what jQuery calls “sliding”?

https://api.jquery.com/slideToggle/

https://api.jquery.com/slideDown/

https://api.jquery.com/slideUp/

You can achieve this with Jquery slide effect
jq api up/down
http://api.jquery.com/slidedown/

$( "#clickme" ).click(function() {
  $( "#book" ).slideDown( "slow", function() {
    // Animation complete.
  });
});

stack overflow…left/right
http://stackoverflow.com/questions/596608/slide-right-to-left

$("div").click(function () {
          $(this).show("slide", { direction: "left" }, 1000);
    });

this is on click. i need it on div being visible and div not being visible. I will try to find something similar to what i want and post it in a reply if I find it.

Under what conditions is the div visible or not? Scroll right?
maybe something like…

$(window).scroll(function(){
	
var $window = $(window);
var slideOne =$("#myslidediv")

    if ($window.scrollTop() >=35) {
    slideOne.addClass("slideInView")
    }
    else {
    slideOne.removeClass("slideInView")
    }
});

in css
make #myslidediv out of body view…soemthing like

position:absolute;
left:999;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
-webkit-transition:all .8s;
-moz-transition:all .8s;
transition:all .8s;

create a slideInView class and adjust the left accordingly

-moz-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
-webkit-transition:all .8s;
-moz-transition:all .8s;
transition:all .8s;

on scrolling down. parallax style

Did you try along the lines I suggested?

not yet. thanks… will try and let you know

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.