there is probably a super simple solution to this...
I'm trying to create a portfolio page and I want to show a screenshot of a mobile site in context.
So for example, I have a tall screenshot image of the full page and I want to have it masked by an image of a mobile phone where it will only show up on the screen area. As you scroll, I want the phone to have fixed positioning and reveal the screenshot underneath in its "viewport".
Here's a diagram of what I mean:
Any thoughts?
Related
I'm in need of a sliding gallery that spans the width of the page but darks out the other images but highlights the one in the middle on show. Hopefully I explained it enough. I can do a full width slider but I need a full width gallery slider. Thumbnails not so important.
No longer using this. using other methords that seem to work for now.
Thanks anyway
I am working on a project now, and it has a weird bug which I don't understand. Here is what is happening: if I keep clicking on different products on a page to expand and close, after I keep clicking on 4 or 5, the page seems like it scrolls up or down sometimes with a jerk. This effect can also be viewed in this video: https://www.dropbox.com/s/u13hec76kwk1r9e/ghosts%20in%20product%20page.mp4?dl=0 (see at 0:16)
Here is this page: http://protec.bluebeetle.me/html/app/products.php?cat=microphones
And here are the login details:
User : you
Password : awesome
Thank you so much for your help guys.
The issue was the sliding logos after the main hero slider. I am using jQuery.carouFredSel-plugin for them. Because they had different sized images the height of the parent logo slider container was varying weirdly up and down. Fixing the height of the div inside the logos container fixed the issue.
I have looked all over the internet and I still can't find the solution to this question. How would I make a background image in my website that scales to fit the whole display but it scrolls away with the page when you scroll down to view the rest of the webpage content in CSS. I also want text that will be over the image. ex. my name and a picture of me.
The background-attachment CSS property is what you want. set background-attachment to local. That makes it scroll along with its contents!
I got a page which has a background image and some floating images over that. These images are linked to the background image that is why i want to show the floating image on the exact point on background (Will be cleared in screenshot below).
Screenshot
As you can see in above image image named religion is above a temple in background image and so the people and safari but the mail problem is expedition image which on resolution change floats to left and replaced from the top of the mountain peak in background image.
Please help me to get this working on all resolution.
Demo Link
It looks like the expedition image is changing its position in relation to the actual page instead of the background image like all of the other images are. You could try putting all of the images inside a div, so when the page resizes it changes the size of the div (if you are using %'s to define the dimensions of the div). This might keep all of the images placed where you want them to stay.
I am trying to recreate the home page of this site... http://spooz-creation.com/
I want to slide a large div (green) that contains other divs (yellow) left and right in the users window (blue). Upon loading, the content div (green) will be centered in the users window like the example site. There will also be a static header (pink) with nav elements.
I really want the scroll to be hover activated like the example site. Also I would like the content giv (green) height to be flexible based off users window height.
Adding the parallax effect on top of all that would be epic but not totally needed if to complicated.
!!!!! (WIREFRAME EXAMPLE) !!!!!!
http://lpaoriginal.files.wordpress.com/2012/07/desktop.jpg
Please help! I've been trying for days to figure this out!
This JQuery plug-in might just do exactly what you're looking for.
JParallax
Been using it for a project I'm currently working on. Great thing about it is you can limit the plug-in to x-axis only or y-axis only.