Jump to content


Photo
Depth Charge

ScrollSpy on Front Page

sprite scrollspy depthcharge scroll

Best Answer canadiangazelles , 25 September 2013 - 05:08 PM

Thanks etcio and jenny. that's perfect! I'll take it from here. many thanks.

Go to the full post


  • Please log in to reply
8 replies to this topic

#1 canadiangazelles

canadiangazelles

    Advanced Member

  • DMS Subscriber
  • 40 posts
  • Country: Country Flag

Posted 12 September 2013 - 03:33 AM

Hi Everyone, 

 

I'm trying to create an effect whereby a text sprite in a DepthCharge section changes depending on the subsection of the page that the user is on.

 

Please visit the draft site at http://hti.flywheelsites.com/ to see what I mean. As you scroll down, you'll note that the text (via the DepthCharge section) follows, coming to a rest at the bottom of the section. 

 

What I'd like to do is to have the middle word "Professional" dynamically change (via a fade animation) to another word depending on the users location on the page. I'm not even sure if this is possible through scrollspy so I thought I'd ask the more advanced gurus out there if I should even attempt this or if it would involve going outside of DMS to bring in non-futureproofed plugins or code? 

 

Thanks in advance for your input. 

 

 


Edited by txthedx, 12 September 2013 - 03:34 AM.


#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 September 2013 - 01:19 AM

I'm going to redirect this for the developer of DepthCharge to chime in.  However, I think you should consider hiring him or, one of our other developers to customize your desired result. 

 

As we don't provide this kind of customization the forum, I'm sure you'll understand this is the best way to get you  some answers and set a way of achieving results.



#3 canadiangazelles

canadiangazelles

    Advanced Member

  • DMS Subscriber
  • 40 posts
  • Country: Country Flag

Posted 13 September 2013 - 02:16 AM

That's a great suggestion, Rob. Thanks for pointing me in the right direction.



#4 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 18 September 2013 - 03:02 PM

I have asked the developer to follow up on this topic.


  • canadiangazelles likes this

#5 etcio

etcio

    Advanced Member

  • Members


  • 68 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 18 September 2013 - 03:36 PM

Jenny: Thanks for the heads up!

Hey CG,
 

It's definitely possible, but it isn't going to be something built into DC inherently.

You'll want to use scrollspy to change the contents of the text div directly, and add a CSS animation to the transition. You can fire any js event you want with scrollspy.

Let me know if that makes sense.


  • canadiangazelles likes this

#6 canadiangazelles

canadiangazelles

    Advanced Member

  • DMS Subscriber
  • 40 posts
  • Country: Country Flag

Posted 18 September 2013 - 03:45 PM

Veeeery interesting; thanks for the feedback, etcio. Is there a sample code that you can forward me to which I can pick apart to learn how this is done? I haven't seen a page use that effect before so I haven't been able to structure in my mind what the code would look like and all my attempts have fallen flat. 

 

My initial thinking was that this effect needs two parts: 

 

1. Defining the text as a class as .navbar is defined below

$(".navbar").scrollspy();
$('[data-spy="scroll"]').each(function()
{
$(this).scrollspy('refresh');
});
$("ul.nav li").on("activate", function()
{
console.log("ACTIVATED");
});

 

2. Changing that based on the scroll position in the page (so changing .parent('li') below to whatever the class above is defined as.

active = $(selector)
.parent('li')
.addClass('active')

if (active.parent('.dropdown-menu')) {
active = active.closest('li.dropdown').addClass('active')
}

active.trigger('activate')

 

I hope it's clear that I'm trying to work through this myself but if there are any resources or suggestions you may have to help me conceptually and in practice, that would be greatly appreciated. 

 

Many thanks in advance :)



#7 etcio

etcio

    Advanced Member

  • Members


  • 68 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 18 September 2013 - 04:21 PM

CG - I'm trying to visualize exactly what you need, but that site above has a password and I can't get to it.

Are you using this script? https://github.com/s...query-scrollspy

I believe you could get away with a simpler implementation.

 

 
<script type='text/javascript'>
    $(document).ready(function() {
            $('#your-element').scrollspy({
                min: $('#anchor').offset().top,
                onEnter: function(element, position) {
                    $("#depthcharge-text").html('new header');
                },
                onLeave: function(element, position) {
                    $("#depthcharge-text").html('old header');
                }
            });
        });
</script>

Something to that effect.



#8 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 25 September 2013 - 02:42 PM

Please let us know if you still need help with this topic otherwise I will close it in 7 days. Thanks!



#9 canadiangazelles

canadiangazelles

    Advanced Member

  • DMS Subscriber
  • 40 posts
  • Country: Country Flag

Posted 25 September 2013 - 05:08 PM   Best Answer

Thanks etcio and jenny. that's perfect! I'll take it from here. many thanks.


  • Jenny likes this





Also tagged with one or more of these keywords: Depth Charge, sprite, scrollspy, depthcharge, scroll