Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Change background color with fade animation as you scroll

    Addons
    5
    9
    3097
    Loading More Posts
    • 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
      extra-vitamins last edited by

      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 Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        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 Reply Quote 0
        • E
          extra-vitamins @mariusjopen last edited by

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

          1 Reply Last reply Reply Quote 0
          • K
            koliveros last edited by

            @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 Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              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 Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                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 Reply Quote 0
                • M
                  moritzmortimer last edited by

                  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 Reply Quote 0
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

                    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 Reply Quote 0
                    • Y
                      yeni last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • First post
                        Last post

                      Before you post

                      Use the Search Feature. Maybe there is already a solution to your issue.

                      1. Update Lay Theme and all Lay Theme Addons
                      2. Disable all Plugins
                      3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                      4. Now see if your problem solved itself
                      5. Go here, see if your problem is listed here:
                      Troubleshooting

                      When you post:
                      1. Post a link to where the problem is
                      2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                      Thanks!

                      Online Users

                      A
                      A
                      7
                      N
                      J
                      S
                      M
                      P

                      Recent Topics

                      • A

                        Theme crashed - because of Polylang?

                      • A

                        can't change front page

                      • M

                        komische boxen auf der Website

                      laytheme.com