I need to create pyramid slider.
As you can see in my current implementation, I need to have a center image that is in top of rest of items. They form a pyramid structure. Also images are placed under each other and this effect is breaking everything because I need to transform them ( elements on the right side of center image needs to have translateX(-100px) and on the left side translateX(100px). I need to have animations when changing items but due to translateX it looks awful. I created this one using http://kenwheeler.github.io/slick/ but maybe someone know such slider with out of box funcionality ?
Any help appreciated.
http://idangero.us/swiper or just look for a 3d carousel.
With some customization, I finally made it how I wanted :)
Related
I am trying to create a web design with a unique shape. This is a simple coming soon template with the top left corner for info button and the bottom right corner for contact button. The green center area for the logo and other basic stuff.
The basic layout looks like this. I did this by creating 3 div elements. When it comes to the background color, this is fine. But the challenge is that I want those white pieces are like cut off from the green one. Something like this.
I also wish to have an output similar to the above image when it comes to playing a slideshow or Youtube/Vimeo video or custom video.
This is a Youtube video playing on the green area. But not the way I want it to be.
I want the final output to look similar to this. On the body background a pattern or a small animating pattern. Above that the cut-out layout and over that custom design another darker pattern to make it bit more attractive.
I know I am asking a lot here. But I never see any such design with a splitting of something from parent div (I did try overflow method, it didn't work or I missed something.) On top of this, the design should be responsive and the size of cutoffs (white triangles) must decrease in size with the very smaller displays.
I really need help from you guys. Thank you so much in advance.
I made a simple image slider to show the houses at sale of a properties website, but the slider doesn't slide the whole width of the divs containing the images. I made a codepen at
http://codepen.io/anon/pen/Eamns to illustrate what I mean, does someone know how can I slide the element without leaving a small bit of it visible? Somehow I don't like to use the whole lot of sliders that are out there, but building my own. I'll appreciate any help, as you can see I'm using the outerWidth and margin properties to determine the distance of the slide, but it's not very clean and I still don't like it.
Thanks in advance
[1]: http://codepen.io/anon/pen/Eamns
Not sure if your CodePen is complete. If you want something clean and easy to implement, I recommend using the 'jquery cycle' plug-in (http://jquery.malsup.com/cycle/) to create your slider. It is the easiest way I have found to make many types of image sliders.
I would appreciate little help on this.
I wanna add an image/text overlay hover on images of this slider below.
So when someone's hovering the image will appear a 50% transparent black block and the "details" image/text in the middle.
This is an example of hovering (the zoom and details buttons) : http://themes.derby-web-design-agency.co.uk/Lola-Html-Theme/Light/
This is the slider I wanna use : http://codepen.io/anon/pen/Alzhn
Thanks in advance !
No need to reinvent the wheel. Consider the following projects:
http://wowslider.com/jquery-slideshow-huge-demo.html
http://bxslider.com/examples/image-slideshow-captions
For overlays, you can also consider
http://buildinternet.com/project/mosaic/1.0/
Try any of the above links for implementation and be more specific with your question.
For example, I am having issue with X, I want to do Y and I have tried solving this using XYZ. Your JS fiddle is just a copy of your existing project with no indication of what you have tried to solve your problem.
As with any learning environment, I would take small steps first. In your use case, I would tackle the problem as follows:
Require on hover caption
Require slider
Then when step#1 is completed, you can build on top of that and so forth.
I wonder if there exists some kind of tear apart image animation effect with jQuery today?
Not like into one millions pieces, but instead like tearing a picture apart effect at the middle? Moving towards the sides. Or is this something which requires the use of Flash animations??
Thanks!
You can accomplish this with javascript and css3.
Simply have javascript duplicate an image (probably a div with the background as an image) and paste it over itself. Then have the left image show the first pixels 0 to 50% and the right image should show pixels 50% to 100% with the background aligned right. You can then have css or jquery move each side apart. You would need to add some extra styles to create that rip look but it is completely doable.
I'd like to know if it's possible to achieve something like this slider automatically with javascript/jquery:
http://www.elegantthemes.com/preview/TheSource/
Notice how the slider background changes according to the edge of the slider image. This can be seen easily on higher resolutions.
My objective would be to:
Add a fixed resolution image to the slider and then the background of that image would be "calculated" automatically with JS and create a smooth gradient.
I'm not sure if i made my point clear, so if you have any question please ask.
Thanks in advance!
Do you mean something like the jQuery.cycle plugin?
http://jquery.malsup.com/cycle/