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?
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 currently working on an app with a friend and we need to make it so that an image will fall when the image below it disappears. So it needs to like take the images place when it disappears. Any ideas on how to do this?
jQuery would be a good starting point for this. Presumably you're hiding the image with JavaScript to begin with, so add code to the same function that loops through all of the images above it and moves them down to fill the gap (possibly using .animate()).
Are you sure you want to move the images down, though? That will leave an odd blank space at the top of the screen, where there's no image left to fall from above. Images "falling" upwards when the image above them vanishes would make more sense on most HTML pages.
So I have a large jpg, 12000px wide by 1000px height. I am looking to make a site the has the image at 50% size on page load, but when the user clicks on the image once, it zooms in to 100%, then on a second click, it zooms back out to original size.
Since the size of the image is so large, it would need to be draggable at both page load and during zoom state.
I have been playing around with this, but the code is not exactly what I am looking to do.
http://designshack.net/tutorialexamples/jQueryZoom/ZoomTest.html
Instead, I am looking to basically do the same thing as the zoomed in state of this site, minus the step of the click into the zoom state.
http://yogasmoga.com/women/run-jump-n-play-crop-462
If anyone has a plugin they have used, please let me know.
Don't. Easiest -especially if it's for a presentation- is to just use two images. image1.onclick -> show image2; image2.onclick -> show image1. Saves coding, does what you want.
A client has expressed that they really like how Google Play handles their hero slider. I've tried replicating the effect in jQueryCycle to no avail. Can anyone shed some light on the best way to achieve the same effect?
For those unfamiliar: https://play.google.com/store?hl=en - the slider shows a centralized "current slider" as well as a "previous" and "next" slide preview shown behind a screen. It's continuous and you can always see a before and after.
It's not continuous. Stuff on the right doesn't slide in between slides, it just appears. It's not exactly setting the bar high for carousels.
All you really need is any old carousel split into 3 segments with translucent overlays permanently over segments 1 and 3 and one that flips on and off over segment 2. Every time a slide completes, hide the #2 overlay. Every time one begins show it again.
Stuff you'll want to know:
Rooting absolute elements to relative positioned elements with CSS so you can fix absolute panels over the content stuff without affecting layout.
Using callbacks or custom events with jQuery.
How to make transparent/translucent .png images with Photoshop to use as panel backgrounds.
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. :)