Question

Posted (edited) · Report post

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

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

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

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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/sxalexander/jquery-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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now