I'm looking for a JQuery plug-in for a drawer-like effect. I found that plug-in which is quite similar to what I want but it slides from one side of the screen (top, bottom, left or right). In my case, I have an image as wide as the content div, and I want it to slide down when clicked to reveal the content, but not from the top of the screen, the image won't be located at the top of the screen. In other words, the effect I want is exactly like what that plug-in does but the only difference is that I don't want it to slide from the top side of the screen, it should slide from wherever the image is on the page.
Any suggestions would be really appreciated...
I think something like that would do it no?
Related
i would like to implement an effect that i saw at amazon and zalando. On top of the product info page is an image on the left side and a long description on the right side. If i scroll down, the image stays at the top of my screen, untill the right side reaches its end, than it stops scroling.
Examples:
https://www.zalando.de/levis-standard-crew-sweatshirt-caviar-le221j03m-q11.html
https://www.amazon.de/Bluetooth-Kopfh%C3%B6rer-Wasserdicht-Sportkopfh%C3%B6rer-Klangprofil-New-Model/dp/B08C7C29JK/ref=sr_1_5?__mk_de_DE=%C3%85M%C3%85%C5%BD%C3%95%C3%91&crid=2CF2HKPS0ISI2&dchild=1&keywords=bluetooth%2Bkopfh%C3%B6rer%2Bmit%2Bmikrofon&qid=1624500497&sprefix=bluetooth%2Bkopfh%C3%B6rer%2Bmit%2Bmi%2Caps%2C167&sr=8-5&th=1
I checked the code but haven't found any trace of JS and no position:fixed on the outer div of the image box. Can someone give me an idea what i am supposed to search for to achieve the same result?
you can use position:sticky;for the image while the rest are in position relative. For position:sticky; be sure to use top:0px so it would stick to the topmost part of the screen. If you want to read more about position sticky you go to this link
I am making a website where I need to slide a group of divs from right to left.
This is the screen shot
I want to slide these divs from left to right in a circular way ie when div A is on the left end and about to disappear it must be shown from right side
As mentioned in the comments this is called a Content carousel. For this you can use slick slider for example, its free to use and easy to setup, its also very well documented in my opinion. http://kenwheeler.github.io/slick/ Heres the link
(See the second example for what you want).
I'm trying to create a responsive website in Dreamweaver with a header and menu which initially scroll and then stick to the top of the page.
The header and menu would need to scroll over the top of a fixed hero image.
This hero image can't be defined as a background as it will be powered by a flexslider script to change the image after a set time.
I would also like the sticky header to possibly shrink down in height when it reaches the top of the page, to reduce the amount of screen space it takes up.
I've found a number of sticky menu examples on-line and some seem to have the annoying trait where the content directly below the menu disappears behind it at the point at which the menu sticks to the top of the screen. I would like to avoid this.
Please find a Mock-up of what I'm looking for here
Obviously, all of the above won't be acceptable on a mobile device.
So for mobiles, the header would need to scroll out of the way, leaving just a hamburger style menu fixed at the top of the screen.
I have found a number of examples on-line with elements of what I require, but nothing yet that combines everything.
I've tried cutting and pasting code from different sources, but haven't yet achieved the desired effect.
I don't know if what I'm asking for is workable, but I would appreciate if anyone could point me to examples of how to achieve this (or improve upon what I'm looking for).
Thanks
Neil White
Use this JS
http://stickyjs.com/
it adds the class is-sticky to the element which you wanted to stick to top. So you can add height in css for is-sticky class. Which in terms will reduce or increase the height of element when it reaches to top as per your requirement.
I am trying to create a banner for the top of page, but haven't found any code yet that combines all of what I need. I have included an illustration of what I'm trying to do.
A) I have 4 buttons (each an image file), two to either side default image in the center. This is the main/inactive state.
All of the buttons would have similar animation when hovered over. For the sake of this question, I only illustrated two of the buttons.
B) If you hover over Box 1 (top left), the button would change and text and lines would slide out from left to right. Also, the center image would change. And, to make things extra challenging, the left button and center image would link to Page 1. When you move away, the text slides back to the left, and the image returns to the default state in A. The blue box would behave the same way, linking to Page 2.
C) In a similar manner, if you hover over Box 4 (bottom right), the button would change and text and lines would slide out from right to left. Also, the center image would change. The right button and center image would link to Page 4. When you move away, the text slides back to the right, and the image returns to the default state in A. The green box would behave in the same manner, linking to Page 3.
The closest I've found is this: jQuery image slide on hover effect (horizontal) I was thinking that if I used the static images of all (A) as a background image, maybe I could create a transparent sprite, with only the active version of the hovered button and the center image, to slide left or right on hover.
I can see how the above example might would work for Boxes 1 and 3 (top left and right) and give the illusion of the lines sliding out as the image slides either left or right, but I'm not sure how it would work for Boxes 2 and 4.
Am I on the right track, or am I asking for way more than what's possible in JQuery? I'd be fine with loosing the animated text (I could just make them part of the hover images), but the buttons and center image need to change on hover, and they need to link to a page.
I've made a widget in jQuery that was confused with flash before. I think you need to breakdown each element of your widget into discrete pieces. You are making a new widget. There will be no methods doing what you want. You will have to use the .animate() method explained here. http://api.jquery.com/animate/ You will be animating one CSS class to another CSS class using the .animate() method.
This page has a good primer on the animate method.
http://viralpatel.net/blogs/2010/03/understanding-jquery-animate-function.html
Here's what I would do:
I would make the HTML of the page you want.
I would create CSS of each style of box that you will have.
I would have all the same CSS directives on every box that will
animate. I have found the animate method more agreeable if all CSS
that is to be computed has the same parameters but with different
values.
I would use full resolution images in the 4 outer boxes.
I would animate the div containing the image, not the image itself.
I would make the image fill the div dynamically so that when I
changed the size of the div the image would be a gimmie.
I would work in firebug testing out different commands and see how
they behave. This is critical. The interactive javascript console
is your friend.
This is a big task... when you're done this will be a nice feather in your cap! Maybe after that you could turn it into a jQuery plugin for others to use!
I decided to mess around with this for a bit, here is what I whipped up so far. No links as yet, but for a half hour I don't feel too bad about that :)
http://jsfiddle.net/BH8s5/3/
Basically what I have is a page with a background image and when I have content which is quite long and overflows. I want the text to be inside that image and it appears to fade out when scrolling at the end of the image and the top of the image. I do not want internal scrollbars. The background image itself is fixed and centered and I want the text to always remain inside there.
Is this possible? if this is not clear then I will try and explain myself further.
I have looked at options in Jquery and CSS fading but cannot find exactly what i want.
Any help is appreciated!
Thanks
H
I would suggest you plant an image overlay (white to transparent) at the top and bottom of the div, but that might not work because of your background...could we perhaps see the background you are using?
The two images Nexxeus says should be placed in a fixed position at the top and bottom of the browser. You shouldn't touch what the overflow does, since it will be hidden below the two images.