I've looked at loads of different sliders and haven't found anything that accomplishes what the designer would like. The image below should help explain. Note that there is space above and below the slider for header/footer content.
A. Basically the idea is for the next image (2) to be partially visible on the right using a certain amount of screen space, say 10%.
B. The current image (1) floats to the left and fills the height - it may be a wide or narrow image.
C. The amount of space shown in light gray will depend on the user's available screen space. When the images reach full resolution, then the gap will expand as needed.
D. In reverse, as the available space shrinks the gap will shrink, and
E. After the gap has reached a minimum size, the slides shrink.
F. Then the current slide (1) will start to be clipped from the left & right if needed (wide images).
G. For the animation, the next slide (2), slides over to fill the gap and then bumps the current slide (1) out, leaving a gap before pulling the next image partially in.
Is there a slider that already does something similar, or do I need to modify an existing one? If so, what would be a good starting point? I've tried ones like Flexslider, but the JS resizing interferes with getting two on the screen.
No image posting privs yet, so here it is: http://imgur.com/swYtr
Try this one out....
Cool carousel
Check out the examples given more on the Site....it might help out your Query.
here's another one
http://jsfiddle.net/JCQ6Q/15/
All the best.
Vote up if it helps you. :)
Related
I'm looking for directions rather than any specific code (wich I wouldn't spit on neither ;))
I have to code a portfolio for a friend, something like the first following picture (Sorry I only had Paint on the computer I'm asking with) :
The images should either be disposed and able to stay proportional whatever the screen size is or get arranged based on the screen size. So that the screen is always full and no need to scroll in any direction.
Then, as on the second picture of the linked album...
When clicking on a picture on the start screen, I'd like to open the screen in half and display the rest of the project. The rectangle you see up the second screen is supposed to be the same as in the center of the first one, supposed again to be the name of the portfolio. Of course I should be able to close it to get back to the page showcasing all the projects.
The effect I'm looking for is something similar to the about section here, but the other way :
http://www.b--i--g.com/about/
To sum up,
How to dynamically layout images full screen(s).
How to split in half the main screen and display other things in it.
I'm guessing here there is some keys javascripts doing all the magic so, again, any leads on wich scripts to use you know of or wich html/css structure is the best suited to do that kind of things.
I just don't have, this time, the time to start over multiples times (again) and scratch all over my code trying to make a victorian chimney blow white steam.
can you create a http://jsfiddle.net/ or http://plnkr.co/ to start with.
if you have an example webpage then you can just look at its source.
To sum up,
How to dynamically layout images full screen(s). - not clear what that means but, absolute positioning + javascript
How to split in half the main screen and display other things in it. - there are many ways to achieve that effect. in the link you sent, they are being overlapped by the middle content. image is rendered twice on either side and the middle content right half and left half of left and right image respectively.
please post a plunker to have other help you without creating the page from scratch.
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 have two columns.
The left column contains text of dynamic lengths.
The right column is of fixed height and will contain a set of images selected at random per page load.
I am trying to create an effect where while the user scrolls, the Image 2 scrolls above Image 1. When it reaches the top, the Image 1 begins to scroll up until it disappears, then Image 3 comes in and repeats the process.
As this is rather confusing, I made a short video describing the desired effect.
Video - MP4
I have begun trying to get it working in this jsbin but am at a loss for when the user scrolls back down and also when more images are required. I am thinking my current path is not the right direction. I'm thinking that employing something like jQuery waypoints is more the direction I should be pursuing?
I need to make a dynamic jQuery menu for showing products.
There will be one main picture with text and hyperlink on it, taking 60% of the screen, and on the right of it I need three small pictures (one above the other, horizontally) with 20% width of screen (but all together taking same height as the main one).
I need help for the animation. The animation will be next:
the three pictures on the right are sliding up, and the top most disappears, and a new one is appended to the bottom (at the same time as the top most is disapearing). Now, the one that dissapeared becomes the main one.
I've made an easy solution with .slideUp function, but that doesn't actually made the div go up, instead it is just losing it's height until it becomes invisible. It is not the solution I wanted.
Thanks.
EDIT:
I've managed to get some solution with jQuery.sliedUp function, but still I didn't get the effect that the client was asking for.
Now with a little bit more search, I've found that the jQuery UI hide function extension can do the effect I am looking for.
Here's an example: http://jsfiddle.net/WMPRJ/
My problem now is if you click on the top div, while it is sliding up, the bottom div does not follow it up and take its place. I need to do that. Please provide me with a solution.
Append the current main to the bottom of your thumbnails, slide up the top one and remove() it. Take its src attribute and set it to the main image.
Here's some (sorry, not a self-contained example) code that should get you where you're going. If you actually take the time to read it you'll see it does exactly what I described in the first two sentences.
$('.thumb').first().slideUp(function(){
$('#main').attr('src', $(this).attr('src'));
$(this).remove();
});
if this a homework please append homework tag.
I can't provide you with full HTML and javascript, but an idea. You have two blocks. Float the right block;
Left Block - 60%.
Right Block - 20% (float:right)
Define height for Right & Left block and give overflow:hidden for Right Block.
Now define a click function like this.
var nextAnimateImageId = 1;
$("#my_button").click(function{
jQuery("#my_image"+animateImageId).animate({height:'toggle'});
nextAnimateImageId = nextAnimateImageId + 1;
});
My idea is, if you have 5 images, only 3 will be shown becaue of defined height and overflow:hidden property. When you animate the first image to height=0 (which is what toggle does), the 4th image will come up due to the space freed up, giving you a nice scroll up animation.
I am building a new theme for my blog and I need to do it before 1st Jan. Its almost complete but I am encountering a problem:
See this post for example
The last 2 Widgets i.e., FEATURED POSTS and RECENT POSTS in sidebar are set to float (positioned absolute, floating widgets become fixed when user scrolls to it) so that they are always visible when a user scrolls down. But how do i stop floating after reaching the footer? Any help would be really appreciated.
From what I can see you use some javascript that changes the box to position:fixed once your scrollposition is equal to the top of the box. What you need is some sort of check to see if the bottom of the box is less than a given length from the bottom of page. Say for instance is length from bottom is less or equal to 100px you can turn it back to position:absolute and set bottom to 100px. Then of course add a check to see set it back to fixed if the user scrolls up again. Just work a little with the script you got there and you'll have a solution, don't have the ability to test a script from the comp I'm at atm so can't help you with that.