Jump to content
Search Community

How to use pseudo class with find method

Narendra Verma test
Moderator Tag

Recommended Posts

Hello,

I am using scroll magic,  What I am doing is, I have to scroll the element on scroll.

 

I fount the example here

See the Pen zaBYoW by PointC (@PointC) on CodePen

and I try to understand the script but I am not able to use pseudo class with find method.

Would you help me out this?

See the Pen gOpoaYW by Narendra_verma (@Narendra_verma) on CodePen

Link to comment
Share on other sites

@mikel  There is a css called as  .wrapper .location:before. So I want to know how can I target the location:before

 

I know I have to use CSSRulePlugin.getRule()   but how can I use when I am using find method?

I found one website https://nobox.pt/en/about      for reference. The heart and circle are animating when you scroll.

Edited by hybreeder
Link to comment
Share on other sites

1 minute ago, hybreeder said:

Is this code is correct?

var rule  = $(this).find(".location:before");
var child = CSSRulePlugin.getRule(rule);

Nope. CSSRulePlugin requires that you give it selector text. You're trying to pass in an element reference, which is invalid.

 

Like I said, it's generally best to use a regular element or CSS variables instead of CSSRulePlugin. That way you can scope things as you need to.

  • Like 1
Link to comment
Share on other sites

Hey @hybreeder,

 

Please check the pointer of @ZachSaucier

 

On 3/9/2020 at 2:15 PM, ZachSaucier said:

Nope. CSSRulePlugin requires that you give it selector text. You're trying to pass in an element reference, which is invalid.

 

var rule = CSSRulePlugin.getRule(".myClass::before"); // !!!

See the Pen bGdLZQv by mikeK (@mikeK) on CodePen

 

Keep cool - step by step ...

Mikel

  • Like 1
Link to comment
Share on other sites

@ZachSaucier I am really appreciate if you help me with this animation

See the Pen zaBYoW by PointC (@PointC) on CodePen


with my location icon. I have to move my location icon when scroll. Your code pen answer is different.

 

One more example, I need my location icon like this https://nobox.pt/en/about 

Please check the heart animation when I scroll bottom the heart going to up and when I scroll top then heart going to the bottom

 

Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...