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
Related
I am looking for an effect that I have seen on numerous occasions and that can be seen on the second image on this website:
https://www.daviseyecenter.com/
The effect I am referring to is how the image moves down so that you can see more of the top part of the image. What exactly is this called and how would I go about replicating this effect?
I believe what you are looking for is a parallax effect or more specifically parallax scrolling.
I see you have a jQuery tag, here is a link to a jQuery parallax scrolling plugin. That page has demos of the effect as well as explanations for how to add the effect to your own site.
I'm having trouble getting Slick.js and the Foundation clearing lightbox to play nicely together. The way I have my site set up is that there are three 'pages', but each page is a Slick.js slide, so the site is really only one actual webpage.
In my photography 'slide', I have a basic lightbox setup with Foundation. However, I cannot get the lightbox to open properly when Slick.js is enabled. It works just fine when Slick.js is disabled.
You can see a live example here: www.kcfeatures.com/services.html
Here's a working live example (slick.js is disabled): www.kcfeatures.com/services1.html
For the life of me, I cannot figure out how to get it to work. My guess is that it has to do with the slick-track? Since the slick-track div is so wide it might be messing with how the lightbox is displayed. Lightbox also normally starts at the very top of the viewport, but with slick.js enabled it starts underneath the topbar, where the slider starts.
Any help or guidance would be greatly appreciated!
Even I tried to implement something similar but slick didn't allow my clearing lightbox to work.
Suggestions/Workarounds
Try Foundation 5 Reveal modal.
Have separate divisions for every thumbnail image that would contain the large version of the image. Tweak your code to trigger the reveal modal for every thumbnail displaying the larger version. However this will not allow you to move through other images as clearing lightbox would do. (You can implement a slick slider inside your reveal modal div to make that happen.)
How about using Foundation Tabs ?
I saw your website, except for the slide in effect of photography, videography and web design divs there is no need specific need for slick usage. I believe you can use Foundation Tabs and implement the same (Using clearing lightbox will be super easy now). If you want animation for your tabs you can refer Jquery Slide animations and implement the same for your tabs. You can also refer Foundation Tabs animation using this.
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! :)
After searching through the internet, I found out two different effect that we could apply on Bootstrap Carousel namely, Slide and Fade. Are there any other effect like splitting the picture into small 3d boxes that turn around to change the image or similar?
try this plugin for performance and change the css animation the way you want ithere
https://gist.github.com/haydenbleasel/8158640
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