PDA

View Full Version : Help request: jQuery/CSS looping vertical marquee



BlueFox
10-14-2019, 11:29 PM
I don't think "marquee" is the proper term as I know those are kind of the herpes of basic HTML coding but I am tasked with building a website for my job. The following things are true: I have no formal training, my bosses do not understand that and have the expectations that I can do it anyways, and I've racked every corner of Google I could find.

What I'm attempting to create is a smooth and seamless "marquee" of icons that pauses when you mouse over the items and there is no "blink" or "skip" when it ends the first loop. It's intended to be a "sponsorship strip" for people who invest in my company's website. I tried using animation and using ease-in, ease-out, etc but I can NOT get it to seamlessly flow. I looked up all kinds of stuff today and I couldn't seem to get anything to work and I'm not quite familiar with how to use jquery, which a lot of suggestions I found online recommended. But I did manage to make the vertical marquee, I just can't get it to continually flow without interruption. The items flow all the way to the top and then it blinks back to the beginning all the way at the bottom.

If it helps at all, I am using Wix to build the site. They have the premium package so I've got access to the coding boxes and can put in custom code. I'm pretty sure I can use external stylesheets if needed, I just hadn't attempted it yet lol. I may or may not have rage-quit and lost the coding I was using so I don't have anything to show.

If anyone could give me some ideas on how to accomplish a vertical marquee that stops on mouseover, I'd be eternally grateful. I feel like I can't see the forest for the trees and I need some help re-focusing.

Example of what I'm looking for is super similar to the icons at the bottom of this webpage ([Only registered and activated users can see links]).

I_just_learning
12-18-2020, 02:53 AM
Hey. Not long ago I began to study the layout of sites (I have never done this before). I see that the question was asked by you a long time ago, but I will try to say my idea.

---------- Post added at 01:53 AM ---------- Previous post was at 01:49 AM ----------

look, I have two solutions: 1) using styles, write it autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true;
2) or option using jQuery library
'mouseleave.owl.autoplay': $.proxy(function() {
if (this._core.settings.autoplayHoverPause && this._core.is('rotating')) {
this.stop();
this.play();
}
}, this),

there is a link to Git, as I understand it, I cannot show it yet (my post will be deleted)