I am trying to do a specific way to move an image (just an image, not background) to a certain spot when you scroll. So say I load a page, the page loads then an image slides to the left of the page and when you scroll, the image slides to the middle or bottom or where ever you want when you start scrolling the page. And the image stays they there by a set of texts or info. I have tried many things such as:
stop().animate({"top":(window.scrollY)
I cannot get it to stay there at the spot when scrolling to that specific spot, if you keep scrolling down, the image continues to scroll down when I scroll, and I am not sure how to stop the image after a certain point.
Then I tried this:
if($(window).scrollTop() + $(window).height() == $(document).height()) {
var a = $(window).height() - 100;
$('#scrolling').animate({
However, I cannot get it to work, it doesn't go back up to top when scrolling back to the top.
Any thoughts on how I would get the image to float in to the center or top or even on the sides and then move to a spot when scrolling down? Am I on the right path or am I totally going about this incorrectly? It feels like I am missing something here, and I am not sure what it is.
I thought I could do this in HMTL5 with animation protocols, but I do not think I can acheive that, and I know CSS3 is robust, but it is also very choppy, so I think JQuery or JavaScript is the way to go, and I can get it partially working but not fully. Any thoughts?
I have searched this site and I cannot find what I am looking for. These are the sites I have found that are similar: Animated Scroll Image to a particular position on a window and this: How to make an element fake position:fixed so it acts fixed until a certain scroll height, then attaches?
But I need an image to move to a spot. Are these links in the right direction? Are the example codes I gave somewhere to start with?
Take a look at Skroller, it is a JS library (not jQuery dependant, it needs require js though) that allows you to define certain actions.
Basicly you add some data elements to a div, one that says at what pixel (of scrolling) it should start animating, when it stops, and what it does (goes to the middle of screen for example) dsuring that scroll.
Scrolling back up works well (used it in a project of ours)
Related
So essentially what I am looking to do is have a section that has a solid background at some point on my page, and at the top of that a pair of sunglasses that as you begin to scroll, the reflection of the sunglasses changes from a few different images, as well as some text changes below the sunglasses to match each change in the sunglasses. Then once the final image is scrolled through, you reach a new section with different information. I am not entirely sure what this effect is called or how to achieve it, though I am guessing it will require a significant amount of jquery.
An existing website that demonstrates the effect I am trying to achieve is https://software.dakno.com/ with the phone effect in the second area down the page. (I do not own this site nor am I affiliated with the owners). I used chrome developer tools to figure out how it is working, but didn't get too far.
The site that I am working on is http://zack2171.github.io . This is an example site I am using to practice css and web design. The second section is where I am trying to get this effect to work. If someone could help me out a bit and give me some pointers, that would be great. Thanks
To achieve your goal, your definitely looking towards a mixture of jQuery and css. Most of your time will be dedicated towards the scroll position and at what pixel (Scroll distance) is covered to showing your images/text. I would start to align your image that you want in a position that is either fixed or absolute, to give you a better adjustment. Then start to play around with jQuery's Scroll Position. My personal approach would be to to detect the distance scrolled and after reaching those milestones (Half a page / 3/4 of a page) you would use jQuery to verify the position and then display those extra materials you want to show. I hope this kind of let you onto a good starting path.
Quick example, scroll down within the script below and check the console it logs!
$(window).scroll(function() {
console.log($(window).scrollTop());
})
.box {
background-color:#333;
height:5000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is "split in half", then have the upper part slides up and the bottom part slides down, thus revealing the next page.
I have a small idea, but i dont seem to have the knowledge to get trough:
2 Canvas with display: none, each width width: 100%, height: 50%. - Check
Have the actual display be rendered into said canvas's - I have not the slightest of ideas.
Ajax the next page in a div below both canvas's - Check
Slide the canvas's in the respective directions - Check
Set the canvas's to display: none and restore them to their original positions - Check
Any thoughts? I'm open to use any other framework appart from jQuery, if that's the need. I am also open to change my canvas idea into something else.
EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application's workflow ends at the last screen, as there will be no back button.
I'm pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I'd dump the canvas idea. I don't think that there's an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it's not 100% accurate when it comes to rendering things like this.
As an alternative, I'd recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like "step-wrap" or "step-container"). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.
Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.
Essentially, what you need to do is:
Duplicate the div
Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
Animate the top div up, bottom div down
Here's a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.
Take a look at backbone.js and marionette.js based on backbone.js.
backbone.js is MVC framework where you can define separate views. Marionette is an extension which supports regions and switching views based on whatever you want. Inside switching logic you can easily implement your transitions. Very generic answer but perhaps it will help you to get started.
I want to guide an image through a path. The scroll down of browser should bring the image down the path, and the scroll up of browser should make the image to trace back its path.
Here is an example of what I would like to acheive:
I want to guide that bug down the path as the user scrolls down through the article on the page and make it retrace its path when the user scrolls up (The bug's head will always be in the direction of motion).
How can I achieve this using jQuery and javascript?
You'll need to calculate the path you intend to use, and then bind a function to the scroll event that moves the image based on the distance scrolled, something like :
$(window).on('scroll', function(e) {
var S = $(this).scrollTop(), // scrolled distance
T = 10 + (S/24), // value for Top
L = 10 + Math.abs(Math.sin(S/400)*50); // value for Left
$("img").css({top: T+'%', left: L+'%'}); //set CSS
});
FIDDLE
I don't believe you can directly capture the mouses scroll with javascript or jquery alone. As that works with whats part of the browser, and inside the "window". You can however capture a scroll event. Based on the windows height/width. It takes a little calculation via javascript to build a reliable/stable equation that will work on all browsers in all resolutions. I'm not going to go into details here more so due to the fact that your question is rather vague and doesn't supply a problem to be solved more than it sounds like a demand for an answer.
But the essence of what you may want to do is, get the width/height of the window/body. And through some trickery of smoke and mirrors or in this case HTML and CSS and properly laying out a bunch of layers on top of one another create a page thats a mile long, with a hidden scroll bar, that you have 2 layers on top of one acting as your "path" and the other your image.. Of which when scrolled from point a to point b is tracked via the scrolling event of the page being a mile long under it all. And then use that couples with the width/height found to make adjustments so it doesnt run off screen at any given point (less thats what you want).
The design I've been given to work with is 960px wide by around 7000px tall, cut into five vertically-stacked segments at arbitrary points. There's a fixed-placed sidebar that scrolls to each segment, depending on which navigation link is clicked. Atop this are a bunch of sliders, transparent PNGs, headlines and paragraphs, predominantly positioned in a relative fashion.
I need to ultimately do two things:
Hide the corresponding quick-nav links in the sidebar until its related segment's background image has loaded
Load (and ideally fade in) the transparent PNGs in each section as needed -- the user scrolls between two vertical scroll values and stops for a second, causing that section's transparent PNGs to then load and fade in.
I'm currently using softscroll.js to achieve a smooth scrolling effect for when the sidebar links are clicked (thus scrolling to the related anchors). Thus, lazy loading techniques that begin to load images as you scroll by won't work -- if I click the last link in the sidebar nav and it scrolls me to the bottom, I don't want every image between the bottom segment and the top loading as a result.
While I'll need to figure out point 1 sooner rather than later, I'm more interested in the second question.
How would one use jQuery to load images inside a certain element if and only if the user has paused between two specific vertical scroll values?
Thank you!
(BTW, please don't respond with appelsiini's lazyload jQuery plugin. It's unsupported by the developer and doesn't appear to work in modern browsers. Thanks!)
A slightly more full fat solution to the already great one suggested by Justin is to use jQuery Waypoints to manage the in viewport events.
You may run into issues if you're rewritting the scroll mechanism on mobile browsers using something like iScroll or scrollability. In which case you'll need to use their APIs to investigate a fix.
Check the user's position using scrollTop(). You should be able to do this inside a setInterval() callback.
function loadBackground() {
var userTop = $(window).scrollTop();
var userBtm = userTop + $(window).height();
var elemTop = $('#element').scrollTop();
var elemBtm = elemTop + $('#element').height();
if ((userBtm >= elemTop) && (userTop <= elemBtm))
{
// Load images
}
}
$('document').ready(function(){
setInterval(loadBackground,500);
}
(This is untested code, but you get the idea.)
Edit: Adjusted the conditional so that if any part of the element is in the window it will fire.
Hide the corresponding quick-nav links in the sidebar until its related segment's background image has loaded
Haven't tested it but you should be able to just do this by sticking a couple of <img>s in with the same src as the background (with display: none; of course) and testing the .complete property of each image, on a short setInterval loop, until they're all loaded. Don't use onload, it tends to be unreliable on images.
Load (and ideally fade in) the transparent PNGs in each section as needed -- the user scrolls between two vertical scroll values and stops for a second, causing that section's transparent PNGs to then load and fade in.
Justin's solution should work for detecting when you're in a given section. Just set a flag to false before you do the softscroll, and true once it stops- and then only mark a section as active when the flag is true.
I would "disable" the images by pointing their src attribute to a 1x1 blank gif, and setting their data-src attribute to the real src. Then just do something like:
$('.selected-section img').each(function () {
$(this).attr('src', $(this).data('src'));
});
You'll have to be sure to set the size of the "disabled" images to the size that they'll be once their image has loaded, or else the page will jump around a lot.
You could use the window.onscroll event handler to detect when you're scrolling, but this is generally a bad idea. For discussion on this see: http://ejohn.org/blog/learning-from-twitter/
I don't even know what I want to do would be called
Please take a quick look at this page:
http://www.philsalesses.com/plasma-pong/
You'll see the title Plasma Pong and an image under it, on the left side. When I scroll the article, I'd like it to stay put while the page scrolls. However, you'll notice when you get the bottom of the page, there is a footer and there wouldn't be enough room for the title and image if I just made it completely static.
I'd like that to stay put until the footer hits, then scroll. When you scroll back up the page, it will scroll a little bit, until there is room, then stay put again. The same effect, but in reverse. Any idea what to look up how I could do this?
Set the titles css position to fixed. Then use javascript to detect a scroll event when certain criteria are met reset it to an absolute position so that it stays above the footer. Then when remove the absolute positioning when the page is scrolled away from the footer. To see a working example go to quirksmode.org. In his articles he has the effect you are looking for.