Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Addons
  3. Change background color with fade animation as you scroll

Change background color with fade animation as you scroll

Scheduled Pinned Locked Moved Addons
9 Posts 5 Posters 3.6k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • E Offline
    E Offline
    extra-vitamins
    wrote on last edited by
    #1

    I've set up the fullscreen slider add-on and I'd like to add some script so that as you scroll into each section the background color fades into a new color. I want the images to scroll as usual, though.

    Example of fade effect here: https://concreterep.com/

    Any hints of how to do this?

    Thanks!

    1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      Hi @extra-vitamins
      are you familiar with jQuery?

      Do you want to change the color on every slide or a slow transition when you scroll down?

      Let me know :-)

      Marius

      www.mariusjopen.world

      E 1 Reply Last reply
      0
      • mariusjopenM mariusjopen

        Hi @extra-vitamins
        are you familiar with jQuery?

        Do you want to change the color on every slide or a slow transition when you scroll down?

        Let me know :-)

        Marius

        E Offline
        E Offline
        extra-vitamins
        wrote on last edited by
        #3

        @mariusjopen Yeah, I can do some JQuery.
        I want the color to change on every slide. Thanks!

        1 Reply Last reply
        0
        • K Offline
          K Offline
          koliveros
          wrote on last edited by
          #4

          @mariusjopen im interested in a slow transition when you scroll down, would appreciate it if you could provide more info on that. Thank you!

          1 Reply Last reply
          0
          • mariusjopenM Offline
            mariusjopenM Offline
            mariusjopen
            Global Moderator
            wrote on last edited by
            #5

            Hi @extra-vitamins
            I cannot write you the whole code because of time issues but I try to explain as best as I can.

            When you change a slide the BODY class changes the slide number:
            fp-viewing-1 -> fp-viewing-2 -> fp-viewing-3.

            1. So first you need to make an array of colors you want display.
              Similar to this one:
            var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
            
            1. Then you need to find out which slide is activated.

            2. Then you need to use the current slide to get the color you have in the array.
              Somewhere here:

            jQuery('body').css('background-color', color);
            

            I post you this example which generates a random background color. So you can sue it as a start.

            <script>
            var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
            window.laytheme.on("newpageshown", function(){
            	var ix = getRandomInt(0, colors.length);
            	var color = colors[ix];
            	jQuery('body').css('background-color', color);
            });
            
            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
            // Returns a random integer between min (included) and max (excluded)
            function getRandomInt(min, max) {
            	min = Math.ceil(min);
            	max = Math.floor(max);
            	return Math.floor(Math.random() * (max - min)) + min;
            }
            </script>
            

            I hope I could help!

            Marius

            www.mariusjopen.world

            1 Reply Last reply
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              Hi @koliveros
              there should be JS Fiddles and examples out there how to do that with jQuery.

              Just hook up your scroll position to an array of colors.

              All the best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply
              0
              • M Offline
                M Offline
                moritzmortimer
                wrote on last edited by
                #7

                Hi,

                I guess I am trying to achieve the same as @koliveros before. Unfortunetly I am not very familiar with writing jQuery and could really need some help adjusting code to suit the lay theme.

                I found this (https://codepen.io/Funsella/pen/dpRPYZ) which pretty much reflects what I have in mind, but I struggle with adjusting it to laytheme –

                Can I use the background colors of rows in the gridder as a source for this jQuery code? If so, how would I have to change the code up. It would be very helpful if someone can give me detailed instructions, or a better solution on how to handle this… cheers

                1 Reply Last reply
                0
                • mariusjopenM Offline
                  mariusjopenM Offline
                  mariusjopen
                  Global Moderator
                  wrote on last edited by
                  #8

                  Dear @extra-vitamins
                  to rewrite this code goes a bit beyond the service we offer here in the forum.

                  I hope you understand.

                  But have a look here for sure:
                  http://laytheme.com/documentation.html#custom-javascript

                  Also consider that they use an extra library in the example of CodePen:
                  https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/in-view.min.js

                  0_1551888817325_Bildschirmfoto 2019-03-06 um 13.12.50.png

                  You can try to use it as well.

                  Let me know :-)

                  Best!

                  Marius

                  www.mariusjopen.world

                  1 Reply Last reply
                  0
                  • Y Offline
                    Y Offline
                    yeni
                    wrote on last edited by
                    #9

                    @koliveros @moritzmortimer Have you guys found a solution for this? :)

                    1 Reply Last reply
                    0
                    Reply
                    • Reply as topic
                    Log in to reply
                    • Oldest to Newest
                    • Newest to Oldest
                    • Most Votes


                    I also code custom websites or custom Lay features.
                    💿 Email me here: 💿
                    info@laytheme.com

                    Before you post:
                    1. When using a WordPress Cache plugin, disable it or clear your cache.
                    2. Update Lay Theme and all Lay Theme Addons
                    3. Disable all Plugins
                    4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                    This often solves issues you might run into

                    When you post:
                    1. Post a link to where the problem is
                    2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                    3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                    Online Users
                    V
                    vonMatthias
                    Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                    laytheme.com
                    • Login

                    • Don't have an account? Register

                    • Login or register to search.
                    • First post
                      Last post
                    0
                    • Recent
                    • Tags
                    • Popular
                    • Users
                    • Search