So, I have this site I'm throwing together. My image gallery is pretty basic, but doesn't need to be dynamic anyway so I don't mind.
My question is this... I have the motion down, but I can't figure out how to collapse the image without it squashing the contents.
I either want them to slide nicely off the #container div, or have the vertical bars wipe between images... Not sure how to explain this in text.
Here's the site in question:
http://intwind.com/test/
Related
If possible, I am trying to create something like the below using just HTML, CSS, and Javascript. I know that the carousel below was built in React but I am not using that nor am I familiar with it. This carousel stretches across the whole screen but it looks like the picture(s) only takes up 65-75% of the width (highlighted in blue) and then the rest is a black box that never changes even when the pictures do. There are words that also overlap the black box and picture. The picture also has some gradient over it on the left side so that the black box nicely fades into the picture.
I am currently using a slideshow/carousel script from W3Schools (https://www.w3schools.com/howto/howto_js_slideshow.asp). I do not have bootstrap with this project either though I may be able to add it if needed. I tried dividing my container into columns so that one side could be 40% black and the other 60% could be the slideshow but that didn't work.
Sorry, I am still pretty new to all of this! Does anyone have suggestions on how to add a carousel kind of like this one without React (and preferably bootstrap)?
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
I have content in a horizontal div that exceeds the page area so that to see all of it you have to scroll horizontally. Fine with a trackpad but for those who don't have one I want to make this obvious with the use of either scrollbars or mouseover text/image.
After hours of experiments I finally found this code - scrolling a div of images horizontally with controls - which is perfect(just changed it to mouseover).
The only problem is I want to do it smoothly and without having to repeat the mouseover or clicking.
Also I want to avoid Jquery and all that sliders stuff. I'm a very new to JS and want to keep things simple. Also I wasn't able to force a scrollbar with any CSS solutions.
Thank you
I am trying to implement a twitter bootstrap carousel. Except, I need to put content (containers, rows, spans, copy) in the slides rather than a big image. But, I do have a big image (1366x450) to display as the background of each slide, scalable/responsively.
I can't quite find a way to do this so that the background image scales correctly and the slide displays at the responsive sizes needed. I need quite a bit of padding top and bottom of the content.
Any ideas where to start?
I'd like to have an effect in a lightbox gallery (preferably FancyBox): When clicking on the thumbnail image, the lightbox opens and here it goes:
the image needs to get cut in half, with one part dropping or
sliding in from the top and the other half from the bottom.
A little bouncing effect would be great as well, especially for the
next and previous buttons which need to drop/slide in as well.
Do you know what I mean? Is that possible in Javascript at all? (No Flash if possible.)
I haven't found specific tutorials around the web yet and don't really know which exact term to search for.