I am using Fullpage.js in my site and would like to use one image for the background for the whole site, where different parts of the image are displayed as different sections and slides are scrolled. So far I have managed to get different parts of the image showing for sections by adding:
<div class="fullpage">
at the top of the body with corresponding CSS:
.fullpage {
background-image: url(../images/background_image.jpg);
background-size: cover;
}
Is there any way to get the image to move sideways as slides are displayed.
Here's a jsfiddle of what I've got so far.
In the end I decided to go a different route and convert the image into tiles. The image tiles are then assigned to the correct slide or section. This allows the image to continue from each slide or section without having to load the whole image at once.
Yep! You'll need to hook into that slider gallery's events.
What plugin are you using? Or did you write it yourself?
Either way, most plugin slide galleries have events like "onSlideStart" or things like that, which you can then use to update your background.
I'd start by writing a script, and setting onSlideStart to a function that calculates what slide the slider is on. Then you simply set your background position (or rather, animate it) to the proper x-value based on what slide you're on (you can figure out the math yourself, yeah?)
Hope this helps! :)
Related
I have recently worked on a site that is effectively a series of long scrolling pages. It has some large background images the make use of a parallax effect as well as some carousels and regular text content. I am using [slick] by ken wheeler for the carousels. 1 I Live demo site here
My question is, is anyone aware of a way to create a carousel of large images (like the one pictured below)that also makes use of a parallax effect? the effect is currently achieved using the Parallax.js plugin (http://pixelcog.github.io/parallax.js/) but I am open to other plugins/approaches. Thanks in advance for any ideas or pointers in the right direction.
Screenshot of current carousel that I wish to add parallax effect scrolling to:
*edit: I have tried creating multiple slides within the carousel using the parallax.js method to add a background image. However this just keeps the first image used as a constant background and does not slide off screen when the arrow is clicked
How does this slider reload new content as the page is resized?
http://www.herschelsupply.com/
I stumbled across this whilst shopping and their slider is a good facsimile of what I want to create for my own site. Their slider loads new content at a certain point when the window is resized. I have had troubles doing that using BxSlider because I am new to JS.
More info
The problems I have had are these:
I can use css media query or jQuery to hide certain slides, but they remain in the DOM so the slider still displays them in the pager and sometimes it just stops rotating/breaks.
If I create two different sliders to be loaded at different widths the change does not occur as the page is resized. Also this seems wasteful.
If I remove and replace elements from the DOM on $(window).resize(), I am not sure how to return them to the DOM if the window is resized back and forth continuously.
Overall I am just asking what approach you would take to do this? Im sorry if this is verging more towards discussion than a specific question, but I'm not sure where else to ask.
The website you showed simply has two completely separate slideshows. One is hidden and another is shown when the window resizes.
<div id="slider-one" class="hide-for-mobile">
/*Slider here*/
</div>
<div id="slider-two" class="show-for-mobile">
/*Slider here*/
</div>
Then in your media query for mobile...
.hide-for-mobile {
display: none;
}
.show-for-mobile {
display: block;
}
Now, as for a solution that's more along the lines of what you were trying to do... What you need to do is get away from HTML <img> tags. Instead, your sliding elements should be <div>'s with a CSS background image. In this way, in your media queries you can change the background image of the <div>'s. I am unsure whether or not the slider you are using can support this, some are dependent on sliding an actual HTML <img> tag. Some can slide whatever you want. You should be able to manage what I've described with Flexslider (a quick google search will get you where you need to be).
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.
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/
Fairly simple, if you use the cycle plugin for jquery and create a slideshow the transition between slides allows what's beneath the slides to show. I want to avoid this and have one slide truly fade into the other rather than kind of fading into the background and then into the next slide.
Is this possible?
Thanks!
Example:
http://www.sonicinteractive.com.au/_WIP/slider_problem/
See how the white line (and background) come through..
Place an image below them but above the page with a neutral colour that blocks out the page background in the region of the image (i.e. create it from the same mask used for the images themselves).
Hi I have solved the problem by removing the background colour of the wrappers containing the slider as well as the "main wrapper". For the latter I only left the backgound-image to do the job.
Hope that this helps