Stealing a Websites Changing Accent Color Effect

  • Resolved powellmarquis56

    (@powellmarquis56)


    5 years ago

    So this website has an effect that I Like. I want to Re-Create this effect. and apply it to my site. But i know little about coding.

    T H E E F F E C T
    Okay I want to steal the effect they have where the accent of the color rotates across the whole website. but i need help doing this. When I inspected the Website this is what I got Click Here When I look at the inspected element it changes as well. That’s why I Put this in this Forum because I think that this is tied to the theme and thats why I Put it in this theme But Does anyone think that there is CSS that I can Include to Achieve This effect? if so Can you help me achieve this Look.

    T H E R E S E A R C H
    I did a lot of digging around to find out more about this topic. here is just a few things that I found.

    Fiddle Experiment Changes Color
    https://jsfiddle.net/sbBpd/
    – I still would not know how to apply this to our website.

    Where I I was Looking and Reading Up on this
    https://css-tricks.com/almanac/properties/t/transition/
    – I know nothing about this I read it and most of this went over my head.

    I Don’t Want to Make this To Long But Can Someone Help Me With This Please!!
    Thank You Advance

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Jarret

    (@jarretc)

    Not quite sure what you mean by the accent color rotating on the site that you linked. When I visit that URL, it displays the information about the packages but none of the colors are rotating for me like shown in the jsfiddle example.

    Can you be a bit more specific about exactly what you’re wanting to have happen on your own site that is happening on the designeminent.com URL that you linked?

    Anonymous User 14254218

    (@anonymized-14254218)

    @jarretc just wait a few sec on the site (or maybe scroll around) guess it is simple js changing the classes of the accent related elements with a set timer. can not verify though since i am on mobile atm.

    Thread Starter powellmarquis56

    (@powellmarquis56)

    Yeah the main color changes overtime. simple JS?? care to elaborate?

    Anonymous User 14254218

    (@anonymized-14254218)

    well, in css3 this can also be done using keyframes so it was just an assumption since the website seems quite js heavy.

    either they are using a script which searches for specific elements which then adds/removes/replaces a specific class, or they are using keyframes like in the following link:
    https://codepen.io/metagrapher/pen/tgcLl

    i’d tend to use the latter but i wouldn’t be surprised if they went for the js approach. since i cannot check the code of their page atm, someone else has to further investigate this for now.

    imo the fiddle above should be a good starting point.

    Jarret

    (@jarretc)

    Messed around with this a bit more like raQai did and came up with this approach using no JS

    https://jsfiddle.net/ykhev0wd/

    Basically, you’d just need to add the CSS code into your Appearance->Customize->Additional CSS section

    For the CSS, depending upon which elements on the site you’d want to change color you’d modify the a, h1 values already set.

    You can also set it to run longer by increasing the 15s value

    The other animation value settings should be left as they are, from there you can just set the value of the color field to the ones you’d like it to switch between

    Thread Starter powellmarquis56

    (@powellmarquis56)

    This is Good GUYS!!!!! Like Really good. Is there anyway I could pay you guys. OMG this helps SO MUCH

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Stealing a Websites Changing Accent Color Effect’ is closed to new replies.