Elegantly Expand Hidden div - as you scroll - CSS-Tricks

This topic is empty.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
December 12, 2014 at 1:03 am #190656

cmisak
Participant

I am hitting a wall finding help to complete a project. I have a Product Details Page, that I’d like to showcase a promotion on… But since its going to be near bottom of fold I only want to show it to slightly engaged viewers.. ie those who have decided to scroll some – does anyone have a direction I could take to complete this? Ideally stay open afterwards too.

Thank you in advanced for any help.

December 12, 2014 at 2:26 am #190658

Shikkediel
Participant

If I get it correctly, you want to show something when the user has scrolled a certain amount? Sounds like something easily created with JavaScript (the basics, jQuery could add effects) :

http://tinyurl.com/show-on-scrolldown-pen

December 12, 2014 at 9:52 am #190660

Paulie_D
Member

ScrollMagic – http://janpaepke.github.io/ScrollMagic/
ScrollSpy – https://github.com/thesmart/jquery-scrollspy

December 12, 2014 at 11:52 pm #190706

cmisak
Participant

Thank you for the replies and fast response.

I’ll explore the scroll spy, Scroll magic didn’t have exactly what I was looking for in their demos – some cool stuff though.

I did install #Shikkediel’s suggestion (see links below) and its working ~sorta~ the entrance is just a bit abrupt. Trying to find something like a draw that will collapse back up if you scroll up and haven’t reached 100%. Sorta, a sticky div triggered on the bottom when at 50% vertical view that seemingly pulls or catches as you scroll down to 100% at which point its stuck open regardless of users interaction.

EXAMPLES: Don’t judge! :) its very rough state. But scroll down see what I’m talking about. Will trigger on the 4th listing and past the specs on the details page.

http://dev.jaywolfe.com/inventory/New
http://dev.jaywolfe.com/inventory/2014/Hyundai/Accent/LA/Reno/KMHCU4AE1EU769301

December 13, 2014 at 2:00 am #190717

Shikkediel
Participant

Your site is already plugged into jQuery, which is the perfect tool for adding effects to elements appearing. There’s slideDown, fadeIn and more of sorts. Also the reverse effect of course :

http://tinyurl.com/slidedown-fadein-example-pen

You may need to use jQuery(…) instead of $(…) in your script.

August 16, 2015 at 9:45 am #206612

digitaldoctor
Participant

Shikkediel:

I was able to get the scroll down code to work fine. (Was elated when the issue of ‘up and down’ was raised.)

However, I’ve fallen off the wagon w/ the latter version. Do I have to invoke JQuery as well? Here’s my (non-working) URL: IAmCED.Com

August 16, 2015 at 6:13 pm #206618

Shikkediel
Participant

Looks like there’s a different issue – the style has been misplaced between the </head> and <body> tags. The error seems to be mostly ignored but it’s not working despite that. Fixing it would be a first requirement though (script seems to be working).

May 5, 2016 at 12:02 pm #241273

Nathan
Participant

Why are Shikkediel’s answers reported for inappropriate content? The solutions are spot on.

May 5, 2016 at 12:07 pm #241274

Paulie_D
Member

Fixed…no idea why that would come up unless someone either misclicked or the security side of things doesn’t like link shorteners.

May 5, 2016 at 3:14 pm #241283

Shikkediel
Participant

I regularly see threads where all posts from some people are supposedly reported. I’m thinking it’s either someone that’s very very bored and holding some grudge or an oddly motivated robot doing it.

May 5, 2016 at 11:37 pm #241289

Michał Sajnóg
Participant

Just for the record here is pure JS plugin for animating elements on page as you scroll I wrote some time ago:

https://github.com/michalsnik/aos

It makes it super easy to handle animations and actions on scroll and provides bunch of different settings if needed. Full documentation in README.

Demo: http://michalsnik.github.io/aos/

May 5, 2016 at 11:50 pm #241290

cmisak
Participant

Thank you everyone for the replies, Michal nice stuff too. Not exactly what I was trying to develop. But might have a place in some pages I’m working on. I found to some extent what I was working towards if nothing else as a better example, haven’t implemented it yet.

http://codecanyon.net/item/footr-footer-reveal-plugin-for-wordpress/full_screen_preview/13119612

only elements missing is A) will have issues with placement, because its relys on wp footer. B) stay open after hitting 100% so scrolling up after scrolling past doesn’t collapse the content.

Goals were a eye catching break the to banner blindness normal banner ad area (internal promos only). Not talking “advertisements”. Not trying to build a spammy tool.
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

The forum ‘JavaScript’ is closed to new topics and replies.